最近一直在玩一款消灭星星的消除类游戏，周末无聊就用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> 历史最高分</td> 21 <td colspan=2 id="bestScore"></td> 22 <td colspan=3></td> 23 </tr> 24 <tr> 25 <td colspan=2> 当前得分</td> 26 <td colspan=2 id="currentLevelScore"></td> 27 <td colspan=3></td> 28 </tr> 29 <tr> 30 <td> 关卡</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> 总分</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>
