用html5制作2048小游戏,利用HTML5 <canvas>实现2048小游戏

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

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

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

最后成品图：

index.html:

2048

your browser doesn't support canvas!

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();