javascript贪吃蛇游戏设计与实现
本文为大家分享了javascript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
效果图
设计
贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。
玩法：
点击屏幕控制蛇的移动方向，寻找吃的东西，每吃一口就能得到一定的积分，而且蛇的身子会越吃越长，身子越长玩的难度就越大，不能咬到自己的身体，更不能咬自己的尾巴，等到了一定的分数，游戏胜利。
设计：
首先需要创建一个棋盘，然后需要生成一条贪吃蛇，接着随机生成食物。每当蛇吃到食物的时候，随机生成新的食物，蛇头吃到自己的身体的时候游戏结束。
棋盘设计：
元素：行数，列数，基础细胞（可表现为空，食物，蛇身体）；
属性：创建棋盘，清空棋盘；
基础细胞设计：
属性：重设颜色，重设大小；
食物：
需求：需要在棋盘剩余空白位置随机位置生成食物；
贪吃蛇：
元素：位置集合(数组)，移动速率，移动方向
需求：初始随机生成只有一节的贪吃蛇，定时器函数(根据移动方向求得下一个要移动到的位置，需要注意的是到达边界后进行特殊处理。判断下个位置是否为蛇本身，如果是蛇就吃到自己，游戏结束。接着将下个位置添加到蛇位置集合内，最后判断下个位置是否与食物相同,如果相同，则重现生成新的食物，否则移除蛇尾)。
方向控制：
本游戏使用点击屏幕，控制蛇移动方向。
实现
cell.js
/*
*@Author:ls
*@Date:2020-09-0118:23:09
*@LastEditTime:2020-09-1614:23:37
*@LastEditors:PleasesetLastEditors
*@Description:基础细胞类
*@FilePath:\snake\assets\cell.js
*/
cc.Class({
extends:cc.Component,
properties:{},
onLoad(){},
/**
*@param{*}cellColor
*/
setCellColor(cellColor=newcc.color(255,255,255,255)){
this.node.getChildByName('color').color=cellColor;
},
/**
*@param{*}cellSize
*/
setCellPos(cellSize=newcc.v2(20,20)){
this.node.width=cellSize.x;
this.node.height=cellSize.y;
},
});
guideCtrl.js
/*
*@Author:ls
*@Date:2020-09-0318:09:18
*@LastEditTime:2020-09-1408:55:47
*@LastEditors:PleasesetLastEditors
*@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(letindex=0,length=this.step.length;index
gameCtrl.js
/*
*@Author:ls
*@Date:2020-09-0115:44:33
*@LastEditTime:2020-09-1614:23:18
*@LastEditors:PleasesetLastEditors
*@Description:游戏导演类
*@FilePath:\snake\assets\gameController.js
*/
varnoneColor=newcc.color(120,120,120,255);
varfoodColor=newcc.color(254,168,23,255);
varsnakeColor=newcc.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=newcc.NodePool();
letinitCount=this.rowCount*this.colCount;
for(leti=0;i0){
//通过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;
returncell;
},
/**
*还原地图
*/
clearMap(){
for(letindex=0,length=this._map.length;index0){
m--;
}
}
}
}
for(letindex=0;index0){
cc.log('更改为向右移动');
return{x:1,y:0};
}else{
cc.log('更改为向左移动');
return{x:-1,y:0};
}
}
//获取竖向方向
functiongetPortrait(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('蛇正在向上移动');
returngetLandscape(touchPos);
}elseif(this._direction.y===-1){
cc.log('蛇正在向下移动');
returngetLandscape(touchPos);
}elseif(this._direction.x===-1){
cc.log('蛇正在向左移动');
returngetPortrait(touchPos);
}elseif(this._direction.x===1){
cc.log('蛇正在向右移动');
returngetPortrait(touchPos);
}
}else{
cc.log('蛇未开始或停止了移动。此时修改方向无效！');
}
},
/**
*移动
*/
move(){
letnextGrid={};
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;
}
}elseif(this._direction.x===-1){
//向左
if(nextGrid.x<0){
nextGrid.x=this.colCount-1;
}
}elseif(this._direction.y===1){
//向上
if(nextGrid.y>this.rowCount-1){
nextGrid.y=0;
}
}elseif(this._direction.y===-1){
//向下
if(nextGrid.y<0){
nextGrid.y=this.rowCount-1;
}
}
for(letm=0,l=this._map.length;m
完整代码：js贪吃蛇游戏
更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。