利用HTML5 实现2048小游戏

//仅供学习用，请勿用于其他用途

嗯，花一天写了一下，当做练手，后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上

肯定没有原版的好看好操作，而且貌似封装得也不太行，将就着看看吧

最后成品图：

index.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 =? ? [[0,0,0,0],?
? ? [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();?

本文源码下载：

------------------------------------------分割线------------------------------------------

具体下载目录在 /2014年资料/12月/26日/利用HTML5 Canvas实现2048小游戏/

--------------------------------------分割线 --------------------------------------

--------------------------------------分割线 --------------------------------------