本文为大家分享了javascript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下效果图效果图设计设计贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。贪吃蛇游戏贪吃蛇游戏玩法:玩法:玩法:点击屏幕控制蛇的移动方向,寻找吃的东西,每吃一口就能得到一定的积分,而且蛇的身子会越吃越长,身子越长玩的难度就越大,不能咬到自己的身体,更不能咬自己的尾巴,等到了一定的分数,游戏胜利。设计:
设计:
设计:
首先需要创建一个棋盘,然后需要生成一条贪吃蛇,接着随机生成食物。每当蛇吃到食物的时候,随机生成新的食物,蛇头吃到自己的身体的时候游戏结束。棋盘设计:棋盘设计:棋盘设计:元素 :行数,列数,基础细胞(可表现为空,食物,蛇身体);属性 :创建棋盘,清空棋盘;基础细胞设计:基础细胞设计:基础细胞设计:属性 :重设颜色,重设大小;食物:食物:食物:需求 : 需要在棋盘剩余空白位置随机位置生成食物;贪吃蛇:贪吃蛇:贪吃蛇:元素 : 位置集合(数组),移动速率,移动方向需求: 初始随机生成只有一节的贪吃蛇,定时器函数(根据移动方向求得下一个要移动到的位置,需要注意的是到达边界后进行特殊处理。判断下个位置是否为蛇本身,如果是蛇就吃到自己,游戏结束。接着将下个位置添加到蛇位置集合内,最后判断下个位置 是否与食物相同,如果相同,则重现生成新的食物,否则移除蛇尾)。方向控制:
方向控制:本游戏使用点击屏幕,控制蛇移动方向。实现实现cell.js
/*
* @Author: ls
* @Date: 2021-09-01 18:23:09
* @LastEditTime: 2021-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;
},
});
/*
* @Author: ls
* @Date: 2021-09-01 18:23:09
* @LastEditTime: 2021-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: 2021-09-03 18:09:18
* @LastEditTime: 2021-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;
},

/**
* 下一个引导页面
*/
nextGuide() {
this._step++;
if (this._step < this.step.length - 1) {
this.step[this._step].active = true;
this.step[this._step - 1].active = false;
if (this._step === this.step.length - 2) {
this.step[this._step + 1].active = true;
}
} else {
this.node.active = false;
}
},

callback: function (toggle) {
cc.sys.localStorage.setItem('isStart', toggle.isChecked);
},
});
/*
* @Author: ls
* @Date: 2021-09-03 18:09:18
* @LastEditTime: 2021-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;
},

/**
* 下一个引导页面
*/
nextGuide() {
this._step++;
if (this._step < this.step.length - 1) {
this.step[this._step].active = true;
this.step[this._step - 1].active = false;
if (this._step === this.step.length - 2) {
this.step[this._step + 1].active = true;
}
} else {
this.node.active = false;
}
},

callback: function (toggle) {
cc.sys.localStorage.setItem('isStart', toggle.isChecked);
},
});gameCtrl.js
/*
* @Author: ls
* @Date: 2021-09-01 15:44:33
* @LastEditTime: 2021-09-16 14:23:18
* @LastEditors: Please set LastEditors
* @Description: 游戏导演类
* @FilePath: \snake\assets\gameController.js
*/

var noneColor = new cc.color(120, 120, 120, 255);
var foodColor = new cc.color(254, 168, 23, 255);
var snakeColor = new cc.color(243, 60, 66, 255);

cc.Class({
extends: cc.Component,

properties: {
// 棋盘
node_grid: cc.Node,
// 分数
lab_score: cc.Label,
// 最好分数
lab_best: cc.Label,

// 开始
node_start: cc.Node,
// 新人引导
node_guide: cc.Node,
// 结束
node_over: cc.Node,

// 基础类
cellPrefab: cc.Prefab,

// 移动速度
mSpeed: 5,
// 列数
colCount: 30,
// 行数
rowCount: 30,
},

onLoad() {
// 初始化方向
// 静止、上、下、左、右
// (0,0)、(0,1)、(0,-1)、(-1,0)、(1,0)
this._direction = { x: 0, y: 0 };
// 初始化细胞大小
this._cellSize = { x: 10, y: 10 };

this._map = [];
this.initCellPool();
this.onCreateMap();
// 显示开始游戏界面
this.showStartGame();
},

/**
* 初始化细胞对象池
*/
initCellPool() {
this.cellPool = new cc.NodePool();
let initCount = this.rowCount * this.colCount;
for (let i = 0; i < initCount; i++) {
let cell = cc.instantiate(this.cellPrefab); // 创建节点
this.cellPool.put(cell); // 通过 put 接口放入对象池
}
},

/**
* 创建地图
*/
onCreateMap() {
this._map = [];
let node_bg = this.node_grid.getChildByName('background');
this._cellSize = { x: node_bg.width / this.rowCount, y: node_bg.height / this.colCount };

for (var y = 0; y < this.colCount; y++) {
for (let x = 0; x < this.rowCount; x++) {
var obj = {};
obj.x = x;
obj.y = y;
obj.node = this.createCell(node_bg, x, y);

this._map.push(obj);
}
}
},

/**
* 从对象池请求对象
* @param {*} parentNode
*/
createCell: function (parentNode, x, y) {
let cell = null;
if (this.cellPool.size() > 0) {
// 通过 size 接口判断对象池中是否有空闲的对象
cell = this.cellPool.get();
} else {
// 如果没有空闲对象,也就是对象池中备用对象不够时,我们就用 cc.instantiate 重新创建
cell = cc.instantiate(this.cellPrefab);
}

cell.getComponent('cell').setCellPos(this._cellSize);

cell.x = this._cellSize.x * x;
cell.y = this._cellSize.y * y;

cell.parent = parentNode;
return cell;
},

/**
* 还原地图
*/
clearMap() {
for (let index = 0, length = this._map.length; index < length; index++) {
this._map[index].node.getComponent('cell').setCellColor(noneColor);
}
},

/**
* 显示开始界面
*/
showStartGame() {
this.node_over.active = false;
this.node_start.active = true;
},

/**
* 显示结束界面
*/
showOverGame() {
this.node_start.active = false;
this.node_over.active = true;
},

/**
* 游戏开始
*/
startGame() {
this.node_guide.active = false;
this.node_over.active = false;
this.node_start.active = false;
this.lab_score.node.active = true;
this.lab_best.node.active = true;
this.node_grid.active = true;
// 是否首次进入界面
if (!cc.sys.localStorage.getItem('isStart')) {
this.node_guide.active = true;
}

this._score = 0;
// 更新最高分数
this.updateBest();

this._canControl = true;
this._direction = { x: 1, y: 0 };
this._snakeGrid = [];
this._foodGrid = {};

// 初始化触摸事件
this.openTouchEvent();

this.clearMap();
this.onCreateSnake();
this.onCreateFood();

// 开启移动
this.schedule(this.move, 1 / this.mSpeed);
},

/**
* 更新分数
*/
updateBest() {
this._best = cc.sys.localStorage.getItem('best');
if (this._best) {
if (this._best < this._score) {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}
} else {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}

this.lab_best.string = this._best;
},

/**
* 游戏结束
*/
gameOver() {
// 是否能控制 蛇改变移动方向
this._canControl = false;

this.unschedule(this.move);
this.closeTouchEvent();
this.clearMap();
this.showOverGame();
},

/**
* 创建蛇
*/
onCreateSnake() {
let x = ~~(Math.random() * this.rowCount);
let y = ~~(Math.random() * this.colCount);

for (let index = 0, length = this._map.length; index < length; index++) {
if (this._map[index].x === x && this._map[index].y === y) {
this._map[index].node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(this._map[index]);
}
}
},

/**
* 创建食物
*/
onCreateFood() {
if (this._map.length !== this._snakeGrid.length) {
let r = ~~(Math.random() * (this._map.length - this._snakeGrid.length));

let subGrid = [];
for (let i = 0; i < this._map.length; i++) {
subGrid.push(this._map[i]);
}

for (let m = 0; m < subGrid.length; m++) {
for (let n = 0; n < this._snakeGrid.length; n++) {

if (subGrid[m].x === this._snakeGrid[n].x && subGrid[m].y === this._snakeGrid[n].y) {

subGrid.splice(m, 1);

if (m > 0) {

m--;

}

}
}
}

for (let index = 0; index < subGrid.length; index++) {
if (index === r) {

this._foodGrid = subGrid[index];

this._foodGrid.node.getComponent('cell').setCellColor(foodColor);


// 增加分数

this._score++;

this.lab_score.string = this._score;
}
}
}
},

/**
* 打开触摸
*/
openTouchEvent() {
var self = this;
this.node.on(
cc.Node.EventType.TOUCH_START,
function (touch) {
if (self._canControl) {

self._canControl = false;

let touchPos = self.node.convertToNodeSpaceAR(touch.getLocation());

self._direction = self.getTouchDirection(touchPos);


this.scheduleOnce(function () {

self._canControl = true;

}, 1 / this.mSpeed);
}
},
this
);
},

/**
* 关闭触摸
*/
closeTouchEvent() {
this.node.off(cc.Node.EventType.TOUCH_START, this);
},

/**
* 获取选择的方向
* @param {* 触摸位置} touchPos
*/
getTouchDirection(touchPos) {
// 获取向量长度
function getABS(pos) {
return Math.sqrt(pos.x * pos.x + pos.y * pos.y);
}
// 获取横向 方向
function getLandscape(touchPos) {
if (touchPos.x > 0) {
cc.log('更改为 向 右 移动');
return { x: 1, y: 0 };
} else {
cc.log('更改为 向 左 移动');
return { x: -1, y: 0 };
}
}
// 获取竖向 方向
function getPortrait(touchPos) {
if (touchPos.y > 0) {
cc.log('更改为 向 上 移动');
return { x: 0, y: 1 };
} else {
cc.log('更改为 向 下 移动');
return { x: 0, y: -1 };
}
}

if (getABS(this._direction) === 1) {
cc.log('蛇 正在移动');
if (this._direction.y === 1) {
cc.log('蛇 正在向 上 移动');
return getLandscape(touchPos);
} else if (this._direction.y === -1) {
cc.log('蛇 正在向 下 移动');
return getLandscape(touchPos);
} else if (this._direction.x === -1) {
cc.log('蛇 正在向 左 移动');
return getPortrait(touchPos);
} else if (this._direction.x === 1) {
cc.log('蛇 正在向 右 移动');
return getPortrait(touchPos);
}
} else {
cc.log('蛇 未开始 或 停止了移动。此时修改方向无效!');
}
},

/**
* 移动
*/
move() {
let nextGrid = {};
nextGrid.x = this._snakeGrid[this._snakeGrid.length - 1].x + this._direction.x;
nextGrid.y = this._snakeGrid[this._snakeGrid.length - 1].y + this._direction.y;

if (this._direction.x === 1) {
// 向右
if (nextGrid.x > this.colCount - 1) {
nextGrid.x = 0;
}
} else if (this._direction.x === -1) {
// 向左
if (nextGrid.x < 0) {
nextGrid.x = this.colCount - 1;
}
} else if (this._direction.y === 1) {
// 向上
if (nextGrid.y > this.rowCount - 1) {
nextGrid.y = 0;
}
} else if (this._direction.y === -1) {
// 向下
if (nextGrid.y < 0) {
nextGrid.y = this.rowCount - 1;
}
}

for (let m = 0, l = this._map.length; m < l; m++) {
if (this._map[m].x === nextGrid.x && this._map[m].y === nextGrid.y) {
nextGrid = this._map[m];
}
}

for (let n = 0, length = this._snakeGrid.length; n < length; n++) {
if (nextGrid.x === this._snakeGrid[n].x && nextGrid.y === this._snakeGrid[n].y) {
this.gameOver();
// return false;
}
}

nextGrid.node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(nextGrid);

if (nextGrid.x === this._foodGrid.x && nextGrid.y === this._foodGrid.y) {
this.onCreateFood();
} else {
let startGrid = this._snakeGrid.shift();
startGrid.node.getComponent('cell').setCellColor(noneColor);
}
},
});
/*
* @Author: ls
* @Date: 2021-09-01 15:44:33
* @LastEditTime: 2021-09-16 14:23:18
* @LastEditors: Please set LastEditors
* @Description: 游戏导演类
* @FilePath: \snake\assets\gameController.js
*/

var noneColor = new cc.color(120, 120, 120, 255);
var foodColor = new cc.color(254, 168, 23, 255);
var snakeColor = new cc.color(243, 60, 66, 255);

cc.Class({
extends: cc.Component,

properties: {
// 棋盘
node_grid: cc.Node,
// 分数
lab_score: cc.Label,
// 最好分数
lab_best: cc.Label,

// 开始
node_start: cc.Node,
// 新人引导
node_guide: cc.Node,
// 结束
node_over: cc.Node,

// 基础类
cellPrefab: cc.Prefab,

// 移动速度
mSpeed: 5,
// 列数
colCount: 30,
// 行数
rowCount: 30,
},

onLoad() {
// 初始化方向
// 静止、上、下、左、右
// (0,0)、(0,1)、(0,-1)、(-1,0)、(1,0)
this._direction = { x: 0, y: 0 };
// 初始化细胞大小
this._cellSize = { x: 10, y: 10 };

this._map = [];
this.initCellPool();
this.onCreateMap();
// 显示开始游戏界面
this.showStartGame();
},

/**
* 初始化细胞对象池
*/
initCellPool() {
this.cellPool = new cc.NodePool();
let initCount = this.rowCount * this.colCount;
for (let i = 0; i < initCount; i++) {
let cell = cc.instantiate(this.cellPrefab); // 创建节点
this.cellPool.put(cell); // 通过 put 接口放入对象池
}
},

/**
* 创建地图
*/
onCreateMap() {
this._map = [];
let node_bg = this.node_grid.getChildByName('background');
this._cellSize = { x: node_bg.width / this.rowCount, y: node_bg.height / this.colCount };

for (var y = 0; y < this.colCount; y++) {
for (let x = 0; x < this.rowCount; x++) {
var obj = {};
obj.x = x;
obj.y = y;
obj.node = this.createCell(node_bg, x, y);

this._map.push(obj);
}
}
},

/**
* 从对象池请求对象
* @param {*} parentNode
*/
createCell: function (parentNode, x, y) {
let cell = null;
if (this.cellPool.size() > 0) {
// 通过 size 接口判断对象池中是否有空闲的对象
cell = this.cellPool.get();
} else {
// 如果没有空闲对象,也就是对象池中备用对象不够时,我们就用 cc.instantiate 重新创建
cell = cc.instantiate(this.cellPrefab);
}

cell.getComponent('cell').setCellPos(this._cellSize);

cell.x = this._cellSize.x * x;
cell.y = this._cellSize.y * y;

cell.parent = parentNode;
return cell;
},

/**
* 还原地图
*/
clearMap() {
for (let index = 0, length = this._map.length; index < length; index++) {
this._map[index].node.getComponent('cell').setCellColor(noneColor);
}
},

/**
* 显示开始界面
*/
showStartGame() {
this.node_over.active = false;
this.node_start.active = true;
},

/**
* 显示结束界面
*/
showOverGame() {
this.node_start.active = false;
this.node_over.active = true;
},

/**
* 游戏开始
*/
startGame() {
this.node_guide.active = false;
this.node_over.active = false;
this.node_start.active = false;
this.lab_score.node.active = true;
this.lab_best.node.active = true;
this.node_grid.active = true;
// 是否首次进入界面
if (!cc.sys.localStorage.getItem('isStart')) {
this.node_guide.active = true;
}

this._score = 0;
// 更新最高分数
this.updateBest();

this._canControl = true;
this._direction = { x: 1, y: 0 };
this._snakeGrid = [];
this._foodGrid = {};

// 初始化触摸事件
this.openTouchEvent();

this.clearMap();
this.onCreateSnake();
this.onCreateFood();

// 开启移动
this.schedule(this.move, 1 / this.mSpeed);
},

/**
* 更新分数
*/
updateBest() {
this._best = cc.sys.localStorage.getItem('best');
if (this._best) {
if (this._best < this._score) {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}
} else {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}

this.lab_best.string = this._best;
},

/**
* 游戏结束
*/
gameOver() {
// 是否能控制 蛇改变移动方向
this._canControl = false;

this.unschedule(this.move);
this.closeTouchEvent();
this.clearMap();
this.showOverGame();
},

/**
* 创建蛇
*/
onCreateSnake() {
let x = ~~(Math.random() * this.rowCount);
let y = ~~(Math.random() * this.colCount);

for (let index = 0, length = this._map.length; index < length; index++) {
if (this._map[index].x === x && this._map[index].y === y) {
this._map[index].node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(this._map[index]);
}
}
},

/**
* 创建食物
*/
onCreateFood() {
if (this._map.length !== this._snakeGrid.length) {
let r = ~~(Math.random() * (this._map.length - this._snakeGrid.length));

let subGrid = [];
for (let i = 0; i < this._map.length; i++) {
subGrid.push(this._map[i]);
}

for (let m = 0; m < subGrid.length; m++) {
for (let n = 0; n < this._snakeGrid.length; n++) {

if (subGrid[m].x === this._snakeGrid[n].x && subGrid[m].y === this._snakeGrid[n].y) {

subGrid.splice(m, 1);

if (m > 0) {

m--;

}

}
}
}

for (let index = 0; index < subGrid.length; index++) {
if (index === r) {

this._foodGrid = subGrid[index];

this._foodGrid.node.getComponent('cell').setCellColor(foodColor);


// 增加分数

this._score++;

this.lab_score.string = this._score;
}
}
}
},

/**
* 打开触摸
*/
openTouchEvent() {
var self = this;
this.node.on(
cc.Node.EventType.TOUCH_START,
function (touch) {
if (self._canControl) {

self._canControl = false;

let touchPos = self.node.convertToNodeSpaceAR(touch.getLocation());

self._direction = self.getTouchDirection(touchPos);


this.scheduleOnce(function () {

self._canControl = true;

}, 1 / this.mSpeed);
}
},
this
);
},

/**
* 关闭触摸
*/
closeTouchEvent() {
this.node.off(cc.Node.EventType.TOUCH_START, this);
},

/**
* 获取选择的方向
* @param {* 触摸位置} touchPos
*/
getTouchDirection(touchPos) {
// 获取向量长度
function getABS(pos) {
return Math.sqrt(pos.x * pos.x + pos.y * pos.y);
}
// 获取横向 方向
function getLandscape(touchPos) {
if (touchPos.x > 0) {
cc.log('更改为 向 右 移动');
return { x: 1, y: 0 };
} else {
cc.log('更改为 向 左 移动');
return { x: -1, y: 0 };
}
}
// 获取竖向 方向
function getPortrait(touchPos) {
if (touchPos.y > 0) {
cc.log('更改为 向 上 移动');
return { x: 0, y: 1 };
} else {
cc.log('更改为 向 下 移动');
return { x: 0, y: -1 };
}
}

if (getABS(this._direction) === 1) {
cc.log('蛇 正在移动');
if (this._direction.y === 1) {
cc.log('蛇 正在向 上 移动');
return getLandscape(touchPos);
} else if (this._direction.y === -1) {
cc.log('蛇 正在向 下 移动');
return getLandscape(touchPos);
} else if (this._direction.x === -1) {
cc.log('蛇 正在向 左 移动');
return getPortrait(touchPos);
} else if (this._direction.x === 1) {
cc.log('蛇 正在向 右 移动');
return getPortrait(touchPos);
}
} else {
cc.log('蛇 未开始 或 停止了移动。此时修改方向无效!');
}
},

/**
* 移动
*/
move() {
let nextGrid = {};
nextGrid.x = this._snakeGrid[this._snakeGrid.length - 1].x + this._direction.x;
nextGrid.y = this._snakeGrid[this._snakeGrid.length - 1].y + this._direction.y;

if (this._direction.x === 1) {
// 向右
if (nextGrid.x > this.colCount - 1) {
nextGrid.x = 0;
}
} else if (this._direction.x === -1) {
// 向左
if (nextGrid.x < 0) {
nextGrid.x = this.colCount - 1;
}
} else if (this._direction.y === 1) {
// 向上
if (nextGrid.y > this.rowCount - 1) {
nextGrid.y = 0;
}
} else if (this._direction.y === -1) {
// 向下
if (nextGrid.y < 0) {
nextGrid.y = this.rowCount - 1;
}
}

for (let m = 0, l = this._map.length; m < l; m++) {
if (this._map[m].x === nextGrid.x && this._map[m].y === nextGrid.y) {
nextGrid = this._map[m];
}
}

for (let n = 0, length = this._snakeGrid.length; n < length; n++) {
if (nextGrid.x === this._snakeGrid[n].x && nextGrid.y === this._snakeGrid[n].y) {
this.gameOver();
// return false;
}
}

nextGrid.node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(nextGrid);

if (nextGrid.x === this._foodGrid.x && nextGrid.y === this._foodGrid.y) {
this.onCreateFood();
} else {
let startGrid = this._snakeGrid.shift();
startGrid.node.getComponent('cell').setCellColor(noneColor);
}
},
});完整代码:js贪吃蛇游戏js贪吃蛇游戏有趣的经典小游戏实现专题,分享给大家:C++经典小游戏汇总C++经典小游戏汇总python经典小游戏汇总python经典小游戏汇总python俄罗斯方块游戏集合python俄罗斯方块游戏集合JavaScript经典游戏 玩不停JavaScript经典游戏 玩不停java经典小游戏汇总java经典小游戏汇总javascript经典小游戏汇总javascript经典小游戏汇总以上就是本文的全部内容,希望对大家的学习有所帮助。