利用HTML5 实现2048小游戏

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

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

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

最后成品图：

index.html:

	
		
	
	
		

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