手机2048html5,Html5游戏之2048

canvas版2048,PC端上下左右控制，并支持移动端滑动控制(发现canvas做这种小游戏真是方便啊)

首先用一个center标签显示Score，然后用一个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.οnkeydοwn=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(dy2)move([0,-1]);

if(dy>50&&Math.abs(dy/dx)>2)move([0,1]);

if(dx2)move([-1,0]);

if(dx>50&&Math.abs(dx/dy)>2)move([1,0]);

}

像这样，一个简单的web版2048游戏就做好啦～～

完整代码已上传到我的github上