canvas游戏入门,canvas 作业

　　前言

　　(最近设计模式点头大，一直面对纯js有点无聊-_-。所以写点有趣的东西换换口味吧)

　　现在画布已经不新鲜了，但是因为日常业务中不常用，所以没有太多实践。今天，我们来分享一下如何实现一个简单的画布迷宫。这个例子来自于《html5秘籍》的第二版，代码略有调整。

　　因为中间有一步使用canvas获取图片信息，所以必须使用服务器环境。所以我先写了一个样本扔在服务器上，让你先体验一下效果(以成就感为动力，哈哈哈)。

　　点我体验

　　Git地址

　　正文

　　实现这个小游戏并不难。我们来思考一下一个迷宫游戏的基本要素是什么。

　　当然首先要有地图，然后要有会动的小人。我们用卡万画这两个。

　　接下来是物体运动的程序，主要包括两个方面：

　　1.让物体按照我们指定的指令移动；

　　2.检查物体是否接触到墙壁或出口。

　　绘制迷宫地图，移动小人。

　　绘制地图的主要步骤是：

　　拿一张地图的图片，用cavans画一个图像。地图可以由谷歌的迷宫在线生成器生成。

　　画反派也是如此。直接找反派的图就行了，不过这里需要注意的是，你要找正方形的图，因为我们后面需要做运动碰撞检测，正方形比较好判断。

　　接下来，我们将编写绘制迷宫和小人的主要函数。

　　函数drawMaze(mazeFile，startingX，Starting Y){ var img maze=new image()img maze . onload=function(){//canvas调整大小canvas . width=img maze . width canvas . height=imgmaze.height//画一个笑脸var img face=document . getelementbyid( face )context . Draw image(img maze，0，0)x=Starting x Y=Starting Y context . Draw image(img face，x，Y)context . stroke()} img maze file } maze file就是图片在这里，有两种方式介绍图片。原因是我不常换小人的图片，所以直接写在页面上。迷宫的地图是可变的，所以在js中引入了它。如果你想直接用js介绍所有的图片，没有问题。其他部分比较简单，这里就不赘述了。

　　移动函数

　　移动的主要原理是：

　　接受的用户输入(这里是响应方向键)被转换成相应的移动指令。然后定期查看运动指令，画出相应的目标位置。举个简单的例子：

　　比如你每按一次方向键，就要记录下你应该向上移动，然后每隔100毫秒检查一次当前的移动指令，画出你应该移动的目标位置，重复这个过程。代码也很简单：

　　//移动函数函数进程键(e){ dx=0dy=0//上下左右方向键检测if(e . key code==38){ dy=-1 } if(e . key code==40){ dy=1 } if(e . key code==37){ dx=-1 } if(e . key code==39){ dx=1 } }//绘制框架函数drawFrame() {if (dx！=0 dy！=0) {//context.clearrect (x，y，canvas.width，canvas . height)//绘制移动轨迹context . begin path()；context.fillStyle=rgb(254，244，207) context.rect(x，Y，15，15) context.fill() x=dx y=dy //碰撞检测if(checkforcollision()){ x-=dxy-=dy dx=0dy=0 }//绘制小人应该移动的地方var img face=document . getelementbyid( face )context . Draw image(img face，x，Y)if(canvas . height-y17){//is first=中我不想重置//dx=0//dy=0 } SetTimeout(draw frame，20)}在上面的代码中，移动函数比较简单，碰撞检测函数是画框函数中最重要的一个，下面详细讲解。

　　碰撞检测

　　要检测物体是否与墙壁碰撞，通常需要先将地图信息保存到内存中，然后在移动物体时检测是否与当前墙壁碰撞。然而，因为我们的地图背景是黑白迷宫，所以我们可以使用颜色来检测碰撞。具体做法是：

　　获取当前对象的坐标位置，用canvas检测当前地图上该位置的颜色是否为黑色。如果有，就说是墙，不应该动。代码如下：

　　函数checkForCollision(){ var imageData=context . getimagedata(x-1，y - 1，15 2，15 2)var pixels=imageData . data for(var I=0，len=pixels.length我leni ) { var red=pixels[i]，Green=pixels[I 1]blue=pixels[I 2]alpha=pixels[I 3]//检测你是否触碰到一面黑墙if(red==0 Green==0 blue==0){ return true } } return false }这里15是小人的宽度，我们检测小人两边的1px范围(对应代码中的getImageData(x-1，y-1，15 2，15 2)，你可以稍微思考一下为什么这里是2)。如果是黑色，表示检测到碰撞。

　　其余

　　在代码中，我添加了一些其他的功能，比如提示回答。至于改图，也比较简单：存储文件地址、起点坐标、答案图片路径等。在一个对象中对应贴图，然后设置一个贴图数组。单击时，切换地图并重新渲染。还有一些值得优化的地方，比如：

　　碰撞检测在拐角处的体验较差；目前的情况是有迹可循。在回答模式下我应该如何摆脱痕迹？有兴趣的同学可以试着自己体会一下。

　　小结

　　这个例子比较简单，对js的要求也不高。用它玩挺好的。

　　然后每次还是一样的结局。内容如有错误，请指出。如果对你有帮助，请喜欢，收藏。征得同意后转载请注明出处。如有疑问，也欢迎私信交流。首页有邮箱地址~溜之大吉。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。