利用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 > </SPAN>[[0,0,0,0],
<SPAN > </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.htm
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 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.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
--------------------------------------分割線 --------------------------------------
