java贪吃蛇详细设计,javascript贪吃蛇游戏设计与实现

本文为大家分享了javascript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下

效果图

设计

贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。

玩法：

点击屏幕控制蛇的移动方向，寻找吃的东西，每吃一口就能得到一定的积分，而且蛇的身子会越吃越长，身子越长玩的难度就越大，不能咬到自己的身体，更不能咬自己的尾巴，等到了一定的分数，游戏胜利。

设计：

首先需要创建一个棋盘，然后需要生成一条贪吃蛇，接着随机生成食物。每当蛇吃到食物的时候，随机生成新的食物，蛇头吃到自己的身体的时候游戏结束。

棋盘设计：

元素 ：行数，列数，基础细胞(可表现为空，食物，蛇身体)；

属性 ：创建棋盘，清空棋盘；

基础细胞设计：

属性 ：重设颜色，重设大小；

食物：

需求 ： 需要在棋盘剩余空白位置随机位置生成食物；

贪吃蛇：

元素 ： 位置集合(数组)，移动速率，移动方向

需求： 初始随机生成只有一节的贪吃蛇，定时器函数(根据移动方向求得下一个要移动到的位置，需要注意的是到达边界后进行特殊处理。判断下个位置是否为蛇本身，如果是蛇就吃到自己，游戏结束。接着将下个位置添加到蛇位置集合内，最后判断下个位置 是否与食物相同,如果相同，则重现生成新的食物，否则移除蛇尾)。

方向控制：

本游戏使用点击屏幕，控制蛇移动方向。

实现

cell.js

/*

* @Author: ls

* @Date: 2020-09-01 18:23:09

* @LastEditTime: 2020-09-16 14:23:37

* @LastEditors: Please set LastEditors

* @Description: 基础细胞类

* @FilePath: \snake\assets\cell.js

*/

cc.Class({

extends: cc.Component,

properties: {},

onLoad() {},

/**

* @param {*} cellColor

*/

setCellColor(cellColor = new cc.color(255, 255, 255, 255)) {

this.node.getChildByName('color').color = cellColor;

},

/**

* @param {*} cellSize

*/

setCellPos(cellSize = new cc.v2(20, 20)) {

this.node.width = cellSize.x;

this.node.height = cellSize.y;

},

});

guideCtrl.js

/*

* @Author: ls

* @Date: 2020-09-03 18:09:18

* @LastEditTime: 2020-09-14 08:55:47

* @LastEditors: Please set LastEditors

* @Description: 引导类

* @FilePath: \snake\assets\guideCtrl.js

*/

cc.Class({

extends: cc.Component,

properties: {

step: [cc.Node],

startToggle: cc.Toggle,

},

onLoad() {

this.startGuide();

this.startToggle.isChecked = false;

},

/**

* 开始引导

*/

startGuide() {

if (!this.step.length) {

this.node.destroy();

return;

}

for (let index = 0, length = this.step.length; index < length; index++) {

this.step[index].active = false;

}

this._step = 0;

this.step[0].active = true;</