HTML5——canvas制作游戏2048

笔者刚学HTML5不久，这是笔者第一次用HTML5制作游戏，希望大家多多提点意见。

废话不多说，先来一张效果图：

笔者只做了游戏主体，至于那些得分啊，历史最高分之类的，都没有去实现。那些都是比较简单的内容，这里就不多说了。下面讲述的过程中，将主要是讲讲笔者本人制作过程中的一些思路。

首先，是页面部分，这部分也没啥好讲的，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2048</title>
<style type="text/css">div{text-align:center;margin-top:150px;}#view{border:1px solid #ccc;}
</style>
</head>
<body>
<div><canvas id="view" height="500px" width="500px"></canvas><script type="text/javascript" src="Test_2048.js"></script>
</div>
</body>
</html>
值得注意的是，要为canvas设置一个id，方便js调用。接下来就是js部分了，这部分是本游戏的重点，首先，笔者声明了需要用到的一些变量和对象，如下：
var dom=document.getElementById("view");
var ctx=dom.getContext("2d");var width=ctx.canvas.width;
var height=ctx.canvas.height;var box_width=width*0.8*0.25;
var margin_width=width*0.2*0.20;var digital=new Array();
for ( var i = 0; i < 4; i++) {digital[i]=new Array();              //声明二维数组for ( var j = 0; j < 4; j++) {digital[i][j]=0;                 //给数组赋初值}
}
开头两行是必不可少的，首先通过document.getElementById（）获得canvas对象，再通过canvas对象获得上下文绘图环境，（以下的方法属性几乎都是上下文绘图环境对象的方法，但是因为习惯，仍称之为canvas的方法属性，希望读者注意）还有一点要注意的是，js是没有二维数组的，所以我们通过for循环来声明二维数组并给它赋初值。做完这一步之后，下面就开始绘制游戏背景了，这是笔者的一个特点，无论做什么游戏，笔者总是先把界面给做出来，即使这可以说是开发游戏中最简单的一个环节，但笔者总有一种感觉，做出界面就是做了半个游戏，（呵呵）。而且，对笔者而言，有一个界面看着，对之后的思路可能更加清晰。扯远了，下面谈谈界面的开发。其实2048的界面很简单，就是由一个大的矩形包着十六个小矩形，在笔者制作的界面中，大矩形并无特别，只是小矩形的四个角都是圆角的，而canvas绘图并没有提供给我们绘制圆角矩形的方法，因此，笔者自定义了一个方法。笔者看过很多人自定义的画圆角矩形的方法，都比较麻烦，是用moveTo和lineTo绘制四条边，然后用圆弧公式arc绘制圆角，搞的一大堆代码。笔者这里用的arcTo这个函数，具体代码如下：
function drawRect(x,y,c){ctx.beginPath();ctx.fillStyle=c;ctx.moveTo(x,y);ctx.arcTo(x+box_width,y,x+box_width,y+1,margin_width*0.7);ctx.arcTo(x+box_width,y+box_width,x+box_width-1,y+box_width,margin_width*0.7);ctx.arcTo(x,y+box_width,x,y+box_width-1,margin_width*0.7);ctx.arcTo(x,y,x+1,y,margin_width*0.7);ctx.fill();
}
这里传的x和y是小矩形的左上角的坐标，c是填充的颜色，对arcTo这个函数不明白的可以查看w3cschool里的讲解，也可以查看笔者的另一篇文章： canvas学习心得之arcTo。之后是整个界面的代码，没什么好说的了：
function drawBack(){ctx.beginPath();ctx.fillStyle="#f0d799";ctx.fillRect(0,0,width,height);for ( var i= 0; i <4; i++) {for ( var j = 0; j < 4; j++) {var c="";if(digital[i][j]==0){c="#D7C184 ";}if(digital[i][j]==2){c="#f5bb82 ";}if(digital[i][j]==4){c="#DBB280 ";}if(digital[i][j]==8){c="#E1C57A ";}if(digital[i][j]==16){c="#E8B173 ";}if(digital[i][j]==32){c="#F2A769 ";}if(digital[i][j]==64){c="#e08931 ";}if(digital[i][j]==128){c="#f27f0c ";}if(digital[i][j]==256){c="#f76063 ";}if(digital[i][j]==512){c="#e84648 ";}if(digital[i][j]==1024){c="#b03133 ";}if(digital[i][j]==2048){c="#fc080c ";}x=margin_width+i*(box_width+margin_width);y=margin_width+j*(box_width+margin_width);drawRect(x,y,c);}}
}
接下来就是绘制小矩形里的数字，玩过2048的都知道，它是随机在某个矩形里生成一个“2”；所以我们先要判断随机得到的那个位置是否已有数字，如果已有就重新随机，否则将他保存在数组里，以下是代码：
function createRandom(){var x=Math.round(Math.random()*3);var y=Math.round(Math.random()*3);if (digital[x][y]==0) {digital[x][y]=2;}else{createRandom();}
}
这里数组里面有了数据，就可以绘制数字了，代码如下：
function drawDigital(){for ( var i = 0; i < 4; i++) {for ( var j = 0; j < 4; j++) {if (digital[i][j]>0) {ctx.beginPath();ctx.textAlign="center";ctx.textBaseline="middle";ctx.fillStyle="red";ctx.font="40px Arial";x=margin_width+i*(box_width+margin_width)+box_width/2;y=margin_width+j*(box_width+margin_width)+box_width/2;ctx.fillText(digital[i][j],x,y);}}}
}
因为canvas有textAlign和textBaseline这两个属性，这里的x和y直接取小矩形的中心点坐标就行。

接下来就是本游戏的重点了，玩过2048的都知道，我们下达一个向左向右或其他方向的指令，数字就会向那个方向汇拢，并且相同的数字会合并起来变成更大的数字，对此，笔者的思路是：将二维数组拆分为四个一维数组，具体拆分看指令，比如我们下达一个向右的指令，则将二维数组横向拆分，若向下则纵向拆分。然后对一维数组进行判断，是否符合指令的标准，如果不符合，则对数组进行移动和合并两个操作，然后再判断是否符合，如此循环，直到得到符合的数组，然后将数组的数据重新赋值给二维数组。之后就是清除原有的图像，重新绘制图像。如下是代码：

判断一维数组是否符合标准：
function checkDigital(arr){                           //判断数组是否已按排列好var flag=false;if (arr[0]==0&&arr[1]==0&&arr[2]==0&&arr[3]==0||arr[0]>0&&arr[1]==0&&arr[2]==0&&arr[3]==0||arr[0]>0&&arr[1]>0&&arr[2]==0&&arr[3]==0||arr[0]>0&&arr[1]>0&&arr[2]>0&&arr[3]==0||arr[0]>0&&arr[1]>0&&arr[2]>0&&arr[3]>0) {flag=true;}if (arr[0]==arr[1]&&arr[0]!=0||arr[1]==arr[2]&&arr[1]!=0||arr[2]==arr[3]&&arr[2]!=0||arr[3]==arr[4]&&arr[3]!=0) {flag=false;}return flag;
}
对数组进行移动和合并操作：
function changeDigital(arr){for ( var i = 0; i <3; i++) {if (arr[i]==0) {var temp=arr[i];arr[i]=arr[i+1];arr[i+1]=temp;}if (arr[i]==arr[i+1]&&arr[i]!=0) {arr[i]=arr[i]+arr[i+1];arr[i+1]=0;}      }if (checkDigital(arr)){return arr;}else{return changeDigital(arr);}
}
最后是下指令代码，四个方向大同小异，这里只贴部分：
document.οnkeydοwn=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==37){                    //向左移动for ( var i = 0; i <4; i++) {var arr=new Array();arr[0]=digital[0][i];arr[1]=digital[1][i];arr[2]=digital[2][i];arr[3]=digital[3][i];if (!checkDigital(arr)){arr=changeDigital(arr);}digital[0][i]=arr[0];digital[1][i]=arr[1];digital[2][i]=arr[2];digital[3][i]=arr[3];}if (checkOver()) {alert("GAME OVER");}else{ctx.clearRect(0,0,width,height);createRandom();drawBack();drawDigital();}     }
到此就算大功告成了，笔者第一次写这么长的文章，写得不好，大家多多提点意见。

另外，完整版代码也已上传，有兴趣的可以下载看看：点击打开链接

HTML5——canvas制作游戏2048相关推荐

[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...
html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
如何用html5 canvas制作子画面动画,如何用HTML5 Canvas制作子画面动画
用户提问为了用DOM做2D游戏,你基本上要动态地调整元素风格,以便在页面上移动它.虽然有些时候DOM修改是很好的,但这一次我将重点介绍使用HTML5 Canvas来制作图像,因为对于现代浏览器,它是 ...

HTML5——canvas制作游戏2048

HTML5——canvas制作游戏2048相关推荐

最新文章

热门文章