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