消除类游戏(js版)

浏览数：48 / 时间：2015年06月09日
最近一直在玩一款消灭星星的消除类游戏，周末无聊就用js也写了一遍，感觉玩比写还困难一直玩不到10000分。废话不多说直接上源码。
效果图(ps 页面有点难看木有美工)

代码总共456行，未经过严格测试
  1 <html lang="zh-CN">
  2 <head>
  3 <meta charset="utf-8">
  4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5 <meta name="viewport" content="width=device-width, initial-scale=1">
  6 <title>消灭方块</title>
  7 </head>
  8 <body>
  9 <style type="text/css">
 10 #content{width:580px;height:620px;margin:0px auto;border:none;position:relative;background:#0b1a7f;}
 11 #top{width:100%;height:auto;position:absolute;top:20px;}
 12 #top tr td{width:5%;height:35px;border:none;text-align:left;line-height:20px;font-size:24px;color:#E9F8F4;font-weight:800;}
 13 #contenttab{width:100%;height:auto;position:absolute;bottom:0px;}
 14 #contenttab tr td{width:56px;height:56px;border:none;text-align:center;line-height:56px;cursor:pointer;}
 15 #showMessage{color:#FF0000 !important;font-size:22px !important;}
 16 </style>
 17 <div id="content">
 18 <table id="top">
 19 <tr>
 20 <td colspan=2>&nbsp;&nbsp;历史最高分</td>
 21 <td colspan=2 id="bestScore"></td>
 22 <td colspan=3></td>
 23 </tr>
 24 <tr>
 25 <td colspan=2>&nbsp;&nbsp;当前得分</td>
 26 <td colspan=2 id="currentLevelScore"></td>
 27 <td colspan=3></td>
 28 </tr>
 29 <tr>
 30 <td>&nbsp;&nbsp;关卡</td>
 31 <td id="currentLevel"></td>
 32 <td colspan=1></td>
 33 <td>目标</td>
 34 <td id="targetScore"></td>
 35 <td colspan=2></td>
 36 </tr>
 37 <tr>
 38 <td>&nbsp;&nbsp;总分</td>
 39 <td id="totalScore"></td>
 40 <td colspan=1></td>
 41 <td colspan=4 id="showMessage"></td>
 42 </tr>
 43 </table>
 44 <table id="contenttab">
 45 </table>
 46 </div>
 47 <script type="text/javascript">
 48 var colorArray=new Array(‘a‘,‘b‘,‘c‘,‘d‘,‘e‘); //颜色数组
 49 var x=7; //x轴行数
 50 var y=10; //y轴行数
 51 var totalArray=new Array(); //方块总数
 52 var sameArray=new Array(); //消灭方块数组
 53 var contenttab=document.getElementById(‘contenttab‘); //存放方块的盒子
 54 var isShow=false;
 55 var timer=null;
 56 var currentLevel=1; //当前关卡
 57 var currentLevelScore=0; //当前关卡得分
 58 var targetScore=getTargetScore(); //目标分数
 59 var totalScore=0; //总分
 60 //最高分
 61 var bestScore=getCookie(‘starBestScore‘);
 62 if(bestScore!=null && bestScore!=""){
 63 bestScore=Number(bestScore);
 64 }else{
 65 bestScore=0;
 66 }
 67 starScore(); //初始化分数
 68 starStar(); //初始化方块数组
 69 starTable(); //初始化方块页面
 70 
 71 //获取目标分数
 72 function getTargetScore(){
 73 return 1000*(1+currentLevel)*currentLevel/2;
 74 }
 75 
 76 //获取每次消除分数
 77 function getScore(length){
 78 return length*length*5;
 79 }
 80 
 81 //获取最后奖励分数
 82 function getRewardsScore(deadCount){
 83 if(deadCount<10){
 84 return (10-deadCount)*100;
 85 }else{
 86 return 0;
 87 }
 88 }
 89 
 90 //设置提示消息
 91 function setShowMessage(msg){
 92 if(document.getElementById(‘showMessage‘).innerHTML!=‘‘ && timer!=null){
 93 delShowMessage();
 94 }
 95 document.getElementById(‘showMessage‘).innerHTML=msg; //设置提示消息
 96 timer=setInterval("delShowMessage()",3000);
 97 }
 98 
 99 //消除提示消息
100 function delShowMessage(){
101 document.getElementById(‘showMessage‘).innerHTML=‘‘;
102 clearInterval(timer);
103 }
104 
105 //提示消息
106 function showMessage(length){
107 var msg=‘‘;
108 switch(length){
109 case 5:
110 msg=‘牛逼!‘;
111 break;
112 case 6:
113 msg=‘赞!‘;
114 case 7:
115 msg=‘吊炸天!‘;
116 break;
117 case 8:
118 msg=‘赞!‘;
119 break;
120 default:
121 msg=length+‘连消‘+getScore(length)+‘分!‘;
122 }
123 setShowMessage(msg);
124 }
125 
126 //设置Cookie
127 function setCookie(c_name,value,expiredays){
128 var exp=new Date();
129 exp.setTime(exp.getTime()+expiredays*24*60*60*1000);
130 document.cookie=c_name+"="+escape(value)+";expires="+exp.toGMTString();
131 }
132 
133 //获取Cookie
134 function getCookie(c_name){
135 var arr,reg=new RegExp("(^| )"+c_name+"=([^;]*)(;|$)");
136 if(arr=document.cookie.match(reg)){
137 return unescape(arr[2]);
138 }else{
139 return "";
140 }
141 }
142 
143 //初始化分数
144 function starScore(){
145 document.getElementById(‘bestScore‘).innerHTML=bestScore;
146 document.getElementById(‘currentLevelScore‘).innerHTML=currentLevelScore;
147 document.getElementById(‘currentLevel‘).innerHTML=currentLevel;
148 document.getElementById(‘targetScore‘).innerHTML=targetScore;
149 document.getElementById(‘totalScore‘).innerHTML=totalScore;
150 }
151 
152 //初始化方块数组
153 function starStar(){
154 for(var i=x-1;i>=0;i--){
155 totalArray[i]=new Array();
156 for(var j=0;j<y;j++){
157 var color=getRound(); //获取随机颜色
158 totalArray[i][j]=new Array();    
159 totalArray[i][j][‘color‘]=color;
160 totalArray[i][j][‘col‘]=i;
161 totalArray[i][j][‘row‘]=j;
162 }
163 }
164 }
165 
166 //初始化方块页面
167 function starTable(){
168 contenttab.innerHTML=‘‘;
169 for(var i=x-1;i>=0;i--){
170 var td=‘‘;
171 for(var j=0;j<y;j++){
172 td+=‘<td style=\‘background:url(‘+totalArray[i][j][‘color‘]+‘.gif) no-repeat;\‘ onclick=\‘onTouchesBegan(‘+i+‘,‘+j+‘)\‘ id=\‘star‘+i+‘‘+j+‘\‘></td>‘;
173 }
174 contenttab.innerHTML+=‘<tr class=\‘tr‘+i+‘\‘>‘+td+‘</tr>‘;
175 }
176 }
177 
178 //获取随机颜色
179 function getRound(){
180 var num=Math.round(Math.random()*(colorArray.length-1));
181 return colorArray[num];
182 }
183 
184 //检查数组包含元素
185 Array.prototype.contains = function(item){
186 for(i=0;i<this.length;i++){
187 if(this[i][‘col‘]==item[‘col‘] && this[i][‘row‘]==item[‘row‘]){
188 return true;
189 }
190 }
191 return false;
192 };
193 
194 //触发点击事件
195 function onTouchesBegan(col,row){    
196 checkSameColorStars(totalArray[col][row]); //检测方块相同颜色区域
197 removeSameColorStars(); //移除相同的方块
198 }
199 
200 //检测一方块的四个方向
201 function checkOneStarFourSide(sprite){
202 if(sprite==null){
203 retrun;
204 }
205 var col=sprite[‘col‘];
206 var row=sprite[‘row‘];
207 var color=sprite[‘color‘];
208 var fourSideArray=new Array(); //四个方向的方块总数
209 //向上消除
210 if(col<x-1){
211 var upSprite=totalArray[col+1][row];
212 if(upSprite!=null && upSprite[‘color‘]==color){
213 fourSideArray.push(upSprite);
214 }
215 }
216 //向右消除
217 if(row<y-1){
218 var upSprite=totalArray[col][row+1];
219 if(upSprite!=null && upSprite[‘color‘]==color){
220 fourSideArray.push(upSprite);
221 }
222 }
223 //向下消除
224 if(col>0){
225 var upSprite=totalArray[col-1][row];
226 if(upSprite!=null && upSprite[‘color‘]==color){
227 fourSideArray.push(upSprite);
228 }
229 }
230 //向左消除
231 if(row>0){
232 var upSprite=totalArray[col][row-1];
233 if(upSprite!=null && upSprite[‘color‘]==color){
234 fourSideArray.push(upSprite);
235 }
236 }
237 return fourSideArray;
238 }
239 
240 //检测方块相同颜色区域
241 function checkSameColorStars(sprite){
242 if(sprite==null){
243 retrun;
244 }
245 var newSameArray=new Array(); //每次扩展新加入的方块总数
246 sameArray.push(sprite);
247 newSameArray.push(sprite);
248 while(newSameArray.length>0){
249 for(var i=0;i<newSameArray.length;i++){ 
250 var fourSide=checkOneStarFourSide(newSameArray[i]); //检测点击方块四周是否有相同的颜色的方块
251 if(fourSide.length>0){
252 for(var j=0;j<fourSide.length;j++){
253 if(!sameArray.contains(fourSide[j])){ 
254 sameArray.push(fourSide[j]); 
255 newSameArray.push(fourSide[j]);
256 } 
257 } 
258 }
259 newSameArray.splice(i,1);
260 } 
261 }
262 }
263 
264 //移除相同的方块
265 function removeSameColorStars(){
266 //相同颜色的方块是否大于1
267 var length=sameArray.length;
268 if(length>1){
269 for(var k=0;k<length;k++){
270 var simpleStar=sameArray[k];
271 if(simpleStar){
272 var col=simpleStar[‘col‘]; 
273 var row=simpleStar[‘row‘];
274 totalArray[col].splice(row,1,null);
275 document.getElementById(‘star‘+col+‘‘+row).style.background=‘none‘;
276 }
277 }
278 showMessage(length); //提示消息
279 var score=getScore(length); //每次消灭的总数
280 currentLevelScore=currentLevelScore+score; //当前关卡得分
281 totalScore=totalScore+score; //总分
282 //总分大于目标分 过关
283 if(totalScore>targetScore && !isShow){
284 isShow=true;
285 setShowMessage(‘恭喜过关!‘);
286 }
287 document.getElementById(‘currentLevelScore‘).innerHTML=currentLevelScore; //设置当前关卡得分
288 document.getElementById(‘totalScore‘).innerHTML=totalScore; //设置总分
289 }
290 sameArray=[];
291 fallStar(); //方块掉落
292 }
293 
294 //转换数组 获取第j列的数组
295 function getLtotalArray(j){
296 var LtotalArray=new Array();
297 for(var i=0;i<x;i++){    
298 LtotalArray[i]=new Array();
299 if(totalArray[i][j]==null){
300 LtotalArray.splice(i,1,null);
301 }else{
302 LtotalArray[i][‘color‘]=totalArray[i][j][‘color‘];    
303 LtotalArray[i][‘col‘]=totalArray[i][j][‘col‘];
304 LtotalArray[i][‘row‘]=totalArray[i][j][‘row‘];
305 }
306 }
307 return LtotalArray;
308 }
309 
310 //方块掉落 填充空缺
311 function fallStar(){
312 for(var j=0;j<y;j++){
313 //循环得到每一列的数组
314 var sprites=getLtotalArray(j);
315 var length=sprites.length;
316 for(var i=0;i<length;i++){
317 var pSprite0=sprites[i];
318 //找到空方块
319 if(pSprite0==null){
320 var k=i+1;
321 while(k<length){
322 var upSprite=sprites[k];
323 if(upSprite!=null){ 
324 upSprite[‘col‘]=i;
325 upSprite[‘row‘]=j;
326 totalArray[i].splice(j,1,upSprite);
327 totalArray[k].splice(j,1,null);
328 sprites.splice(i,1,upSprite);
329 sprites.splice(k,1,null);
330 document.getElementById(‘star‘+i+‘‘+j).style.cssText=‘background:url(‘+upSprite[‘color‘]+‘.gif) no-repeat;‘;
331 document.getElementById(‘star‘+k+‘‘+j).style.background=‘none‘;
332 k=length;
333 }
334 k++;
335 }
336 }
337 }
338 }
339 combineStar(); //向左合并方块
340 deadStar(); //检测死局
341 }
342 
343 //向左合并方块
344 function combineStar(){
345 for(var j=0;j<y;j++){
346 //循环得到每一列的数组
347 var sprites=getLtotalArray(j);
348 var mSprite0=sprites[0];
349 //如果底部有空方块就向左合并
350 if (mSprite0==null){
351 if(j<y-1){
352 var k=j+1;
353 while(k<y){
354 var upSprite=getLtotalArray(k);
355 var pSprite0=upSprite[0];
356 if(pSprite0!=null){
357 for(var i=0;i<upSprite.length;i++){
358 if(upSprite[i]!=null){
359 upSprite[i][‘col‘]=i;
360 upSprite[i][‘row‘]=j;
361 totalArray[i].splice(j,1,upSprite[i]);
362 totalArray[i].splice(k,1,null);
363 document.getElementById(‘star‘+i+‘‘+j).style.cssText=‘background:url(‘+upSprite[i][‘color‘]+‘.gif) no-repeat;‘;
364 document.getElementById(‘star‘+i+‘‘+k).style.background=‘none‘;
365 }
366 }
367 k=y;
368 }
369 k++;
370 }
371 }
372 }
373 }
374 }
375 
376 //检测死局
377 function deadStar(){
378 var isDead=true; 
379 var deadCount=0; //剩余的方块个数    
380 for(var j=0;j<y;j++){
381 var sprites=getLtotalArray(j);
382 var length=sprites.length; 
383 for(var i=0;i<length;i++){ 
384 var pSprite0=sprites[i];
385 if(pSprite0!=null){ 
386 var fourSide=checkOneStarFourSide(pSprite0);
387 //还有可消灭的方块
388 if(fourSide.length>0){    
389 isDead=false;
390 return;
391 } 
392 } 
393 }
394 }
395 //没有可消灭的方块 
396 if(isDead){
397 for(var j=0;j<y;j++){
398 var sprites=getLtotalArray(j);
399 var length=sprites.length; 
400 for(var i=0;i<length;i++){ 
401 var pSprite0=sprites[i];
402 if(pSprite0!=null){
403 deadCount++;
404 }
405 }
406 }
407 var score=getRewardsScore(deadCount); //获取最后奖励分数
408 if(score>0){
409 currentLevelScore=currentLevelScore+score; //当前关卡得分
410 totalScore=totalScore+score; //总分
411 document.getElementById(‘currentLevelScore‘).innerHTML=currentLevelScore; //设置当前关卡得分
412 document.getElementById(‘totalScore‘).innerHTML=totalScore; //设置总分
413 }    
414 //剩余方块大于0
415 if(deadCount>0){
416 //总分大于目标分 过关
417 if(totalScore>targetScore){
418 currentLevel++; //关卡加1
419 targetScore=getTargetScore(); //获取当前关卡目标分
420 currentLevelScore=0; //当前得分清空
421 setShowMessage(‘剩余‘+deadCount+‘个方块,奖励‘+score+‘分!‘);
422 }else{
423 //游戏结束
424 currentLevel=1; //关卡清空
425 targetScore=getTargetScore(); //获取当前关卡目标分
426 currentLevelScore=0; //当前得分清空
427 //总分大于历史最高分
428 if(totalScore>bestScore){
429 bestScore=totalScore; //保存最高分
430 setCookie(‘starBestScore‘,bestScore,30);
431 }
432 totalScore=0; //总分清空
433 setShowMessage(‘游戏结束!‘);
434 }
435 }else{
436 //总分小于目标分
437 if(totalScore<targetScore){
438 var score=targetScore-totalScore; //获取最后奖励分数
439 currentLevelScore=currentLevelScore+score; //当前关卡得分
440 totalScore=totalScore+score; //总分
441 document.getElementById(‘currentLevelScore‘).innerHTML=currentLevelScore; //设置当前关卡得分
442 document.getElementById(‘totalScore‘).innerHTML=totalScore; //设置总分
443 }
444 currentLevel++; //关卡加1
445 targetScore=getTargetScore(); //获取当前关卡目标分
446 currentLevelScore=0; //当前得分清空
447 }
448 isShow=false;
449 starScore(); //初始化分数
450 starStar(); //初始化方块数组
451 starTable(); //初始化方块页面
452 }
453 }
454 </script>
455 </body>
456 </html>