canvas版2048,PC端上下左右控制，并支持移动端滑动控制（发现canvas做这种小游戏真是方便啊）
首先用一个center标签显示Score，然后用一个canvas标签绘制游戏画面
<center id="score" style="font:bold 25px Arial,Microsoft Yahei"></center><br/>
<canvas id="canvas" width="500" height="500"></canvas>
然后设置canvas的样式
canvas{
display: block;
margin: 0 auto;
border-radius: 10px;
background-color: #bbada0;
}
设置后的canvas看起来像这样
然后进行地图的初始化以及一些数据结构定义
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//初始化地图
var map = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
//不同数字的颜色信息
var num_color = {0:"#ccc0b3",2:"#eee4da",4:"#ede0c8",8:"#f2b179",16:"#f59563",32:"#f67c5f",64:"#ec6544",128:"#e44d29",256:"#edcf72",512:"#c8a145",1024:"#a8832b",2048:"#86aa9c"};
//不同数字的大小信息
var num_size = {0:"60",2:"60",4:"60",8:"60",16:"60",32:"60",64:"60",128:"50",256:"50",512:"50",1024:"40",2048:"40"};
//不同数字的偏移量（为了将数字画在方块中心）
var offsetx = {0:53,2:53,4:53,8:53,16:34,32:35,64:35,128:28,256:28,512:28,1024:24,2048:25};
//上下左右键的code对应的方向信息
var keycom = {'38':[0,-1],'40':[0,1],'37':[-1,0],'39':[1,0]}
//space表示当前剩余的空格块数，score表示当前的分数
var space=16,score=0;
formap函数用来遍历地图中4×4的方格并执行操作
function formap(func){
for(var i=0;i<4;i++)
for(var j=0;j<4;j++){
func(i,j);
}
}
produce函数用来在地图的空白处随机生成一个方块，并重绘地图，这里“~~”操作是为了取整
function produce(){
var cot = ~~(Math.random()*space);
var k = 0;
formap(function(i,j){
if(map[i][j]==0){
if(cot==k){
map[i][j]=2;
draw();
}
k+=1;
}
});
space-=1;
}
draw函数用来绘制地图，包括每个小方格的绘制和Score的更新
function draw(){
formap(function(i,j){
var num = map[i][j];
ctx.fillStyle = num_color[num];
ctx.fillRect(j*120+20,i*120+20,100,100);
if(num!=0){
ctx.font = "bold "+num_size[num]+"px Arial,Microsoft Yahei";
ctx.fillStyle = (num<=4)?"#776e65":"white";
ctx.fillText(String(map[i][j]),j*120+offsetx[num],i*120+70+num_size[num]/3);
}
});
document.getElementById("score").innerText="Score: "+String(score);
}
move函数用来处理方块的移动
function move(dir){
//用来调整不同方向的遍历方式
function modify(x,y){
tx=x,ty=y;
if(dir[0]==0)tx=[ty,ty=tx][0];
if(dir[1]>0)tx=3-tx;
if(dir[0]>0)ty=3-ty;
return [tx,ty];
}
//根据移动的方向，将地图中对应行/列中的数字一个个压入栈中，如果第一次遇到栈顶数字和待入栈数字相等，则栈顶数字乘2，最后用栈中数字更新地图中的对应行/列
for(var i=0;i<4;i++){
var tmp = Array();
var isadd = false;
for(var j=0;j<4;j++){
var ti=modify(i,j)[0],tj=modify(i,j)[1];
if(map[ti][tj]!=0){
if(!isadd&&map[ti][tj]==tmp[tmp.length-1])score+=(tmp[tmp.length-1]*=2),isadd=true,space+=1;
else tmp.push(map[ti][tj]);
}
}
for(var j=0;j<4;j++){
var ti=modify(i,j)[0],tj=modify(i,j)[1];
map[ti][tj] = isNaN(tmp[j])?0:tmp[j];
}
}
produce();
if(space==0)alert("game over");
draw();
}
随机生成两个方块，开始游戏
produce();produce();
监听键盘的上下左右事件，并调用move方法
document.onkeydown=function(e){
dir = keycom[(e?e:event).keyCode];
move(dir);
};
监听移动端屏幕的touch事件，判断滑动方向，并调用move方法
var sx,sy,dx,dy,ex,ey;
canvas.ontouchstart=function(event){
var touch = event.touches[0];
sx=touch.clientX,sy=touch.clientY;
}
canvas.ontouchmove=function(event){
var touch = event.touches[0];
ex=touch.clientX,ey=touch.clientY;
dx=ex-sx,dy=ey-sy;
//禁止默认的滑动事件
event.preventDefault();
}
canvas.ontouchend=function(event){
//根据横纵坐标位移判断滑动方向
if(dy<-50&&Math.abs(dy/dx)>2)move([0,-1]);
if(dy>50&&Math.abs(dy/dx)>2)move([0,1]);
if(dx<-50&&Math.abs(dx/dy)>2)move([-1,0]);
if(dx>50&&Math.abs(dx/dy)>2)move([1,0]);
}
像这样，一个简单的web版2048游戏就做好啦～～
