利用canvas加js简单的制作了一个传统的贪吃蛇游戏，都是很基础的东西，需要的朋友可以参考一下，大神请直接跳过。
　　游戏画面是自适应的，在电脑、手机、平板均测试通过。
　　一言不合先上效果图。

　　

　　游戏规则：其中红色的边框为边界，蛇头碰到游戏结束，蛇头咬到自己的身体则游戏结束。
　　那条比较长的黑色长条就是蛇，那个小的黑色方块就是豆子，主要就是蛇跑来跑去吃豆子。
　　目前游戏的设定是蛇每吃一个豆子加一分。分数每增加五，则蛇的速度增加100。这些初始化设定都是可以随便改的。当然你不喜欢黑色方块就改别的，用头像去画都行，可以自己简单的修改代码。
　　下半部分的控制及显示按钮，都是简单的div制作并排列，这是更基础的东西，还是建议大神跳过。
　　有些基础的人看到这个图之后建议自己来写游戏，下面是从基础开始制作本游戏，需要的可以看。
　　第一步、制作游戏边界和内部。
　　游戏边界很简单，这里用了一个div来控制
　　<div></div>
　　宽度建议尽量不要设置100%，因为两端顶到屏幕边上的话首先视觉不好，其次有些屏幕蛇跑到边界会有问题，所有游戏框的两边留了适当的距离，宽度设置为95%。高度设定为60%，是为了下半部分留40%的高度显示控制操作按钮。
　　接着画canvas，这里有个坑就是canvas的宽不能用百分比，只能用width="500px";这种格式，而且不能画完之后再设定宽度，这样会导致所画的图片拉伸变形，图片会模糊。
　　所以我这里使用jquery的append方法设置，现在应该明白为什么用一个div去控制游戏画面大小了，是为了设定方便。jquery获取div的高和宽，这都是基础的东西，然后赋值给canvas，这样canvas画的画面是等比的，再往里面添加东西不会变形模糊。
　　这两句js语句是这样的。
　　var can = '<canvas></canvas>'; //字符串can设定
　　$(".a").append(can); //can追加到div之后。
　　既然是讲基础的东西，这里就会注释的详细一点，大家不要嫌啰嗦。
　　第一句中的kuan和gao，其实并不是直接取div的宽度和高度。因为这个游戏画面的大小肯定要设置成棋盘格式，要有多少行多少列，而且每个棋盘的格子，宽和高都是要相等的。
　　像下图一样。

　　

　　中间的绿色格子，就是我们下一步要制作的棋盘，而蛇的移动就是每前进一步，蛇的身体就往前移动一个格子。
　　由于这些格子都是正方形，而div的宽和高都是用百分比赋值的，不一定能取到整数，所以我们设置canvas的宽和高的时候，要经过一系列的计算得到。
　　下一期讲canvas的高宽计算，还有棋盘列自动补齐的方法。

楼主发言：2次 发图：2张 | 更多

| | 楼主 |

作者：星痕姚远 时间：2016-10-27 09:25:00

　　国外有个贪吃蛇网页游戏，挺逗的。

| | 1楼 | 打赏 | | 评论(1) |

楼主：你不是猪008 时间：2016-11-01 10:10:00

　　这一期讲游戏画面的设定，棋盘的制作与蛇的初始化。
　　首先设定一个变量var heng=23；
　　表示棋盘有23行，然后根据大小自动计算每一行的高度
　　gao = $(".a").height(); //预设div的高度
　　gao = parseInt(gao);//取整
　　jiangeh = gao/heng;//计算每一行的高度
　　然后让每个格子的宽度和高度相等：jiangew = jiangeh;
　　然后计算出列数：
　　shu = kuan/jiangeh;//总宽度除以每个格子的宽度
　　shu=parseInt(shu);//取整
　　如果直接这样画出列数，会发现游戏区域的右侧会有一段的空白，因为取整之后会舍去小数点之后的位数，所以再计算数目会比原宽度小一些。这个时候就要做游戏画面的宽度补齐。
　　var buqi1 = kuan-shu*jiangew;//检测剩余宽度
　　if (buqi1>jiangew) //如果剩余宽度大于单个格子的宽度，则执行补齐
　　{
　　var shul = buqi1/jiangew;//检测剩余宽度能放下急列
　　shul = parseInt(shul);//取整
　　shu = shu+shul;//列数相加
　　}
　　这个时候基本上游戏画面就画好了。
　　直接执行循环的画行和列就行了。
　　for (var i=1;i<heng;i++) //循环画每一行，由于已经知道每一行的长宽，所以画起来很简单
　　{
　　cas.beginPath();
　　cas.moveTo(0,i*jiangeh);
　　cas.lineTo(kuan,i*jiangeh);
　　cas.strokeStyle="green";
　　cas.stroke();
　　cas.closePath();
　　}
　　for (var i=1;i<shu;i++)//循环画每一列，由于已经知道每一行的长宽，所以画起来很简单
　　{
　　cas.beginPath();
　　cas.moveTo(i*jiangew,0);
　　cas.lineTo(i*jiangew,gao);
　　cas.strokeStyle="green";
　　cas.stroke();
　　cas.closePath();
　　}
　　代码运行之后大概像下图一样：
　　贪吃蛇游戏制作教程（二），canvas+js这里面有几个变量要设置成全局变量，因为游戏中很重要，比如多少行，多少列，游戏区域的高度和宽度，每个格子的高度和宽度。
　　看完上图之后大家应该了解了，所谓贪吃蛇中的蛇，就是由一个个小格子组成的，每吃一个豆子，则蛇的身体增加一格。
　　所以这里蛇可以用一个数组储存，我这里使用的一维数组，并没有使用二维数组，有兴趣的同学可以自己用二维数组试一下。

| | 2楼 | 打赏 | | 评论 |