HTML5 Canvas实现贪吃蛇（二）

有了一个实心圆，就可想想大致的思路了。

游戏思路

全局变量：global

浏览器类型，区别PC浏览器和手机端的浏览器，broswerType；
canvas的长和宽，paleWidth,paleHeight;
实心圆半径，radius；
蛇身前进步长，step；

蛇：snake

蛇身的组成是一个一个实心圆，所以最核心的属性就是长度，设为length；
蛇需要移动，就需要一个前进的方向，设为head；
需要在canvas中绘制蛇身，需要一系列坐标，需要一个数组来存储这些坐标，设为body；
考虑到后续可能要改变蛇前进的速度，设定速度speed；
设置一个定时移动的方法，moveTimer；

食物：food

作为游戏的一个结束条件，给食物设定一个总量，totalNum；
同时可能会放置多个食物，设定一个同时存在的食物数量concurrenctNum；
吞食一个食物之后蛇身增加的长度,energy；
同时放置多个食物时，为了控制食物数量，检测是否生成新食物，将现存食物数量保存下来，presentFoodNum；
绘制多个食物，需要数组存储食物坐标，foodsLocation；

这里有个比较关键的问题就是蛇身具体怎么动起来。首先肯定是根据重绘canvas来让它动起来的，那么就需要两次绘制中snake.body的坐标点有变化，这个变化是根据snake.head这个方向来的，这里约定：0-上，1-下，2-左，3-右。具体到坐标的变化，很直观的想法是后面一个坐标替代前面一个坐标，然后再新增一个坐标，但这样一来，是比较复杂的。我采取的做法是：

根据snake.head生成一个新的圆-newpart;
将newpat插入snake.body；
通过snake.length截取新的蛇身，完成绘制；

这样一来，算法复杂度是很小的。接下来，代码码起来。

首先，绘制边界：

c.width = global.paleWidth;
c.height = global.paleHeight;
cc.beginPath();
cc.fillStyle = "#FFFF00";
cc.lineWidth = 4;
cc.moveTo(0, 0);
cc.lineTo(global.paleWidth - 3, 0);
cc.lineTo(global.paleWidth - 3, global.paleHeight - 3);
cc.lineTo(0, global.paleHeight - 3);
cc.lineTo(0, 0);
cc.stroke();
cc.closePath();

接着，可以在点上面随机找一个绘制一个圆，同时把这个坐标放入snake.body：

var initX = Math.floor(Math.random() * (global.paleWidth + 1)) / 3 * 3;
var initY = Math.floor(Math.random() * (global.paleHeight + 1)) / 3 * 3;
var initLocation = [initX, initY];
snake.body.push(initLocation);
snake.paintCycle(initLocation, global.lineWidth, global.radius);

同时，设置一个定时方法，执行蛇的移动动作：

snake.moveTimer = setInterval(snake.move, 600);

下面构建move方法：

move: function() {switch (snake.head) {case 0:var newPart = [snake.body[snake.body.length - 1][0], snake.body[snake.body.length - 1][1] - global.step];if (newPart[1] < 0)newPart[1] += global.paleHeight;break;case 1:var newPart = [snake.body[snake.body.length - 1][0], snake.body[snake.body.length - 1][1] + global.step];if (newPart[1] > global.paleHeight)newPart[1] -= global.paleHeight;break;case 2:var newPart = [snake.body[snake.body.length - 1][0] - global.step, snake.body[snake.body.length - 1][1]];if (newPart[0] < 0)newPart[0] += global.paleWidth;break;case 3:var newPart = [snake.body[snake.body.length - 1][0] + global.step, snake.body[snake.body.length - 1][1]];if (newPart[0] > global.paleWidth)newPart[0] -= global.paleWidth;break;}snake.body.push(newPart);cc.clearRect(3, 3, global.paleWidth - 10, global.paleHeight - 10);if (snake.body.length > snake.length) {snake.body = snake.body.splice(1, snake.length);}for (i = 0; i < snake.body.length; i++) {snake.paintCycle(snake.body[i], 5.6, 3);}
}

这样，蛇身就会动起来了。接下来就需要设计食物了。

HTML5 Canvas实现贪吃蛇（二）相关推荐

基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
近重要在研究OAuth2,等demo完成了,会给大家来一个专题分享. 看到我身边的一个同事在玩蛇蛇争霸感觉蛮有意思的,这里找了一个贪吃蛇的游戏分享给大家. 按理说canvas与其应用是老生常谈 ...
html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下实现思路: ps:这个只是思路,详细可看代码注释一.先把蛇画出来定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
Canvas实现贪吃蛇小游戏（面向对象）
Canvas实现贪吃蛇小游戏我们常常在网页上制作的小游戏都是通过Canvas实现的,虽然我们也可以使用DOM来实现,但是这样会更加的节约资源. 我们书写这个小游戏的目的主要是为了适应js中关于面向对 ...
c/c++游戏编程之控制台贪吃蛇(二)
c/c++游戏编程之控制台贪吃蛇(一) c/c++游戏编程之控制台贪吃蛇(二) 为了解决"闪屏"问题,我们不再使用system("cls")进行清屏,而是直接用 ...
html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
先看结果截图(界面很丑,但是主要是为了贪吃蛇游戏算法设计和历史记录.排行榜功能的实现,希望以后不被产品经理打,哈哈) 功能描述: 1.开始游戏页面之前输入玩家姓名 2.历史记录:可以查看之前自己玩过的 ...
html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
HTML5小游戏贪吃蛇分析与实现
昨天下午研发中心总结大会,晚上大家一起吃饭. 多少面孔成了曾经,多人新人充满憧憬,明年又会是如何.年年岁岁花相似,岁岁年年人不同. 晚上大家吃饭,我们桌不喝酒. 口味虽然淡了点,勉强也还算尽兴. 8点 ...

HTML5 Canvas实现贪吃蛇（二）

游戏思路

全局变量：global

蛇：snake

食物：food

HTML5 Canvas实现贪吃蛇（二）相关推荐

最新文章

热门文章