实现2048小游戏

利用HTML5 <canvas>实现2048小游戏//仅供学习用，请勿用于其他用途嗯，花一天写了一下，当做练手，后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上肯定没有原版的好看好操作，而且貌似封装得也不太行，将就着看看吧本文的2048小游戏演示地址：http://www.linuxidc.com/files/2014/12/2048/index.html最后成品图：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（）; 本文源码下载：------------------------------------------分割线------------------------------------------免费下载地址在 http://linux.linuxidc.com/用户名与密码都是www.linuxidc.com具体下载目录在 /2014年资料/12月/26日/利用HTML5 Canvas实现2048小游戏/下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm--------------------------------------分割线 --------------------------------------HTML5 地理位置定位（HTML5 Geolocation）原理及应用 http://www.linuxidc.com/Linux/2012-07/65129.htmHTML5移动开发即学即用（双色） PDF+源码 http://www.linuxidc.com/Linux/2013-09/90351.htmHTML5入门学习笔记 http://www.linuxidc.com/Linux/2013-09/90089.htmHTML5移动Web开发笔记 http://www.linuxidc.com/Linux/2013-09/90088.htmHTML5 开发中的本地存储的安全风险 http://www.linuxidc.com/Linux/2013-06/86486.htm《HTML5与CSS3权威指南》及相配套源码 http://www.linuxidc.com/Linux/2013-02/79950.htm关于 HTML5 令人激动的 10 项预测 http://www.linuxidc.com/Linux/2013-02/79917.htmHTML5与CSS3实战指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm--------------------------------------分割线 --------------------------------------本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-12/110883.htm

首页 / 操作系统 / Linux / 利用HTML5 &lt;canvas&gt;实现2048小游戏

首页 / 操作系统 / Linux / 利用HTML5 <canvas>实现2048小游戏