HTML5——canvas制作游戏2048
2016-11-07 20:36
465 查看
笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见。
废话不多说,先来一张效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/16/94557bd520b446b390ff107d57e1e4f1)
笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现。那些都是比较简单的内容,这里就不多说了。下面讲述的过程中,将主要是讲讲笔者本人制作过程中的一些思路。
首先,是页面部分,这部分也没啥好讲的,直接上代码:
开头两行是必不可少的,首先通过document.getElementById()获得canvas对象,再通过canvas对象获得上下文绘图环境,(以下的方法属性几乎都是上下文绘图环境对象的方法,但是因为习惯,仍称之为canvas的方法属性,希望读者注意)还有一点要注意的是,js是没有二维数组的,所以我们通过for循环来声明二维数组并给它赋初值。做完这一步之后,下面就开始绘制游戏背景了,这是笔者的一个特点,无论做什么游戏,笔者总是先把界面给做出来,即使这可以说是开发游戏中最简单的一个环节,但笔者总有一种感觉,做出界面就是做了半个游戏,(呵呵)。而且,对笔者而言,有一个界面看着,对之后的思路可能更加清晰。扯远了,下面谈谈界面的开发。其实2048的界面很简单,就是由一个大的矩形包着十六个小矩形,在笔者制作的界面中,大矩形并无特别,只是小矩形的四个角都是圆角的,而canvas绘图并没有提供给我们绘制圆角矩形的方法,因此,笔者自定义了一个方法。笔者看过很多人自定义的画圆角矩形的方法,都比较麻烦,是用moveTo和lineTo绘制四条边,然后用圆弧公式arc绘制圆角,搞的一大堆代码。笔者这里用的arcTo这个函数,具体代码如下:
接下来就是本游戏的重点了,玩过2048的都知道,我们下达一个向左向右或其他方向的指令,数字就会向那个方向汇拢,并且相同的数字会合并起来变成更大的数字,对此,笔者的思路是:将二维数组拆分为四个一维数组,具体拆分看指令,比如我们下达一个向右的指令,则将二维数组横向拆分,若向下则纵向拆分。然后对一维数组进行判断,是否符合指令的标准,如果不符合,则对数组进行移动和合并两个操作,然后再判断是否符合,如此循环,直到得到符合的数组,然后将数组的数据重新赋值给二维数组。之后就是清除原有的图像,重新绘制图像。如下是代码:
判断一维数组是否符合标准:
到此就算大功告成了,笔者第一次写这么长的文章,写得不好,大家多多提点意见。
另外,完整版代码也已上传,有兴趣的可以下载看看:点击打开链接
废话不多说,先来一张效果图:
笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现。那些都是比较简单的内容,这里就不多说了。下面讲述的过程中,将主要是讲讲笔者本人制作过程中的一些思路。
首先,是页面部分,这部分也没啥好讲的,直接上代码:
<!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&& 4000 amp;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.onkeydown=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制作一个简单的游戏 英雄抓小怪物(中)
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)
- 怎样用HTML5 Canvas制作一个简单的游戏
- HTML5——canvas制作游戏接住小球
- 怎样用HTML5 Canvas制作一个简单的游戏
- 怎样用HTML5 Canvas制作一个简单的游戏
- [译]怎样用HTML5 Canvas制作一个简单的游戏
- 借助HTML5 Canvas API制作一个简单的猜字游戏
- javascript与canvas制作蜘蛛纸牌八色蜘蛛纸牌在线可玩,html5游戏,包括游戏AI
- 用HTML5 canvas制作简单游戏
- HTML5 Canvas 制作水波纹效果
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
- 使用html5 canvas创建太空游戏的示例
- UC将发布高性能HTML5游戏引擎X-Canvas
- cocos2d-html5 游戏制作1.
- javascript和HTML5利用canvas构建猜牌游戏实现算法
- 自己写的HTML5 canvas动画制作函数,非常简单易懂
- html5 2D游戏制作工具Construct 2
- 零基础HTML5游戏制作教程 第4章 移动的控制