利用HTML5 实现2048小游戏
//仅供学习用,请勿用于其他用途
嗯,花一天写了一下,当做练手,后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上
肯定没有原版的好看好操作,而且貌似封装得也不太行,将就着看看吧
最后成品图:
index.html:
2048your 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();
本文源码下载:
------------------------------------------分割线------------------------------------------
具体下载目录在 /2014年资料/12月/26日/利用HTML5 Canvas实现2048小游戏/
--------------------------------------分割线 --------------------------------------
--------------------------------------分割线 --------------------------------------