借助HTML5 <canvas>实现2048小游戏
发布时间：2021-11-19 17:37:01 所属栏目：教程 来源：互联网
导读：利用HTML5 canvas实现2048小游戏 //仅供学习用，请勿用于其他用途 嗯，花一天写了一下，当做练手，后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上 肯定没有原版的好看好操作，而且貌似封装得也不太行，将就着看看吧 本文的2048小游戏演示地址：
|
利用HTML5 <canvas>实现2048小游戏 //仅供学习用，请勿用于其他用途 嗯，花一天写了一下，当做练手，后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上 肯定没有原版的好看好操作，而且貌似封装得也不太行，将就着看看吧 本文的2048小游戏演示地址：http://www.linuxidc.com/files/2014/12/2048/index.html 最后成品图： "利用HTML5 index.html: <!DOCTYPE HTML> <html> <head> <title>2048</title> </head> <body> <div id = "content"> <canvas id = "drawing"> your browser doesn't support canvas! </canvas> </div> <script type="text/javascript" src="js/jquery-2.0.3.js"></script> <script type="text/javascript" src="js/chesspieces.js"></script> <script type="text/javascript" src="js/drawing.js"></script> <script type="text/javascript" src="js/game.js"></script> </body> </html> chesspieces.js: var Cp = { up : function(map){ var i , j , t , k , flag; flag = 0; for ( i = 0; i < map.length; i++ ){ for( j = 0; j < map[i].length ; j++){ if(map[i][j] > 0){ t = map[i][j]; //从上至下遍历，坐标（i,j）的值上边一个是否有值， //有，判断是否相等，相等，合并，不相等，不移动， //无，往上移动，直至到头 for( k = i-1; k >= 0; k--){ if(map[k][j] > 0){ if(map[k][j] == t){ map[i][j]=0; map[k][j]+=t; flag = 1; }else{ map[i][j]=0; map[k+1][j]=t; if(i != k+1){ flag = 1; } } break; } if(k==0){ map[i][j]=0; map[k][j]=t; if(i != k+1){ flag = 1; } } } } } }; return flag; }, down : function(map){ var i , j , t , k , flag; flag = 0; for ( i = map.length - 1; i >= 0 ; i-- ){ for( j = 0 ; j < map[i].length ; j++){ if(map[i][j] > 0){ t = map[i][j]; for( k = i+1; k < map.length; k ++){ if(map[k][j] > 0){ if(map[k][j] == t){ map[i][j]=0; map[k][j]+=t; flag = 1; }else{ map[i][j]=0; map[k-1][j]=t; if(i != k-1){ flag = 1; } } break; } if(k==map.length-1){ map[i][j]=0; map[k][j]=t; if(i != k+1){ flag = 1; } } } } } }; return flag; }, left : function(map){ var i , j , t , k , flag; flag = 0; for ( i = 0; i < map.length; i++ ){ for( j = 0; j < map.length ; j++){ if(map[i][j] > 0){ t = map[i][j]; for( k = j-1; k >= 0; k --){ if(map[i][k] > 0){ if(map[i][k] == t){ map[i][j]=0; map[i][k]+=t; flag = 1; }else{ map[i][j]=0; map[i][k+1]=t; if(j != k+1){ flag = 1; } } break; } if(k==0){ map[i][j]=0; map[i][k]=t; flag = 1; } } } } }; return flag; }, right : function(map){ var i , j , t , k , flag; flag = 0; for ( i = 0; i < map.length; i++ ){ for( j = map[i].length-1; j >= 0 ; j--){ if(map[i][j] > 0){ t = map[i][j]; for( k = j+1; k < map[i].length; k ++){ if(map[i][k] > 0){ if(map[i][k] == t){ map[i][j]=0; map[i][k]+=t; flag = 1; }else{ map[i][j]=0; map[i][k-1]=t; if(j != k-1){ flag = 1; } } break; } if(k==map[i].length-1){ map[i][j]=0; map[i][k]=t; flag = 1; } } } } }; return flag; } }; drawing.js: var mapdata =<SPAN style="WHITE-SPACE: pre"> </SPAN>[[0,0,0,0], <SPAN style="WHITE-SPACE: pre"> </SPAN>[0,0,0,0], [0,0,0,0], [0,0,0,0]]; var Map = { isFull : function(map){ var i , j; }, draw : function(map,ctx){ var i , j , c ; //TODO c = eee4da ; // alert(map); for(i = 0; i < map.length; i++ ){//i为Y轴，j为X轴 for(j = 0; j < map[i].length; j++){ if(map[i][j]==0){ ctx.fillStyle='#eee4da'; } else{ ctx.fillStyle='#ede0c8'; } ctx.fillRect(j*100+10,i*100+10,80,80); if(map[i][j]>0){ ctx.fillStyle='#000000'; ctx.font = 'bold 48px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(''+map[i][j],j*100+50,i*100+50); } } } }, randomchesspieces : function(map){ var x , y , z , i ; while(true){ x = Math.floor(Math.random()*4); y = Math.floor(Math.random()*4); z = 2; if(Math.floor(Math.random()*10) > 7){ z = 4; } if(map[x][y] == 0){ map[x][y] = z; break; } } }, }; game.js: var Game = { drawing : $('canvas'), context : drawing.getContext('2d'), initDrawing : function(){ drawing.setAttribute('width',400); drawing.setAttribute('height',400); this.context.fillStyle = "#bbada0"; this.context.fillRect(0,0,drawing.width,drawing.height); Map.randomchesspieces(mapdata); Map.randomchesspieces(mapdata); Map.draw(mapdata,this.context); }, initGame : function(){ this.initDrawing(); this.Move(this.context); }, Move : function(ctx){ var k; var m = function(e){ var maptest = JSON.parse(JSON.stringify(mapdata));//检验是否还有下一步，无则弹出over var flag =Cp.left(maptest)||Cp.down(maptest)||Cp.right(maptest)||Cp.up(maptest); if(!flag) alert("Game Over!"); switch (e.keyCode) { case 37: if(Cp.left(mapdata)){ Map.randomchesspieces(mapdata); Map.draw(mapdata,ctx); } break; case 38: if(Cp.up(mapdata)){ Map.randomchesspieces(mapdata); Map.draw(mapdata,ctx); console.log("add,up"); } break; case 39: if(Cp.right(mapdata)){ Map.randomchesspieces(mapdata); Map.draw(mapdata,ctx); } break; case 40: if(Cp.down(mapdata)){ Map.randomchesspieces(mapdata); Map.draw(mapdata,ctx); console.log("add,down"); } break; } }; $(document).on("keyup",m); } }; Game.initGame();  （编辑：三明站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐