JS 实战贪吃蛇游戏

一、css 部分

1. 居中

想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒

也可以使用其他方法

【代码】

2. 将父元素设置为相对定位，偏于之后贪吃蛇长长的身子，是以父元素为基点的绝对定位，通过 left 和 top 来控制位置

二、 JS 部分

（一）初始化地图

用一个数组，来储存地图上的每一个点

注意：上图红框位置是（0，0）

1. 设置标签

标签不一样，到时候渲染的东西也就不一样

2. 用绝对定位设置初始位置

3. 【代码】

// 蛇相关的配置let snake = {// 蛇的初始位置snakePos:[{ x:0,y:0,domContent:"",flag:'body'},{ x:1,y:0,domContent:"",flag:'body'},{ x:2,y:0,domContent:"",flag:'body'},{ x:3,y:0,domContent:"",flag:'head'}]
}// 初始化游戏方法function initGame(){// 1. 初始化地图for(let i = 0;i < tr; i++){for(let j = 0 ; j < td ; j++){gridData.push({// 给数组里面加对象x:i,y:j})}}

（二）绘制蛇

1. 设置蛇头蛇身

注意：CSS中样式转变到JS中 - 短横线删除变为大写字母

2. 用 append 将创建的元素加到容器上

3. 【代码】

// 绘制蛇的方法
function drawSnake(snake){for(let i = 0;i < snake.snakePos.length;i++){// 判断内容是不是为空，是不是第一次开始if(!snake.snakePos[i].domContent){//如果进入此if，说明是第一次创建蛇snake.snakePos[i].domContent = document.createElement("div")snake.snakePos[i].domContent.style.position = "absolute"snake.snakePos[i].domContent.style.width = snakeBody + "px"snake.snakePos[i].domContent.style.height = snakeBody + "px"snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + "px"snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + "px"if(snake.snakePos[i].flag === 'head'){// 说明当前是蛇头snake.snakePos[i].domContent.style.background = 'url(/img/snake.jpg) center/contain no-repeat'snake.snakePos[i].domContent.style.borderRadius = '50%'snake.snakePos[i].domContent.style.width = snakeBody +5 + "px"snake.snakePos[i].domContent.style.height = snakeBody +5 + "px"}else{//说明是蛇身snake.snakePos[i].domContent.style.background = "rgb(249, 203, 210)";snake.snakePos[i].domContent.style.borderRadius = '50%'snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody +3 + "px"}} // 需要将添加的元素加到 container 容器上去document.querySelector(".container").append(snake.snakePos[i].domContent)}
}

（三）绘制食物

1. 随机生成一个坐标

2.【代码】

// 绘制食物function drawFood(){// 1. 食物的坐标是随机的// 2. 食物不能生成在蛇头或者蛇身上while(true){//构成一个死循环，直到生成符合要求的实物坐标才能退出该循环let isRepeat = false  //默认生成的坐标是符合要求的// 随机生成一个坐标(几格)food.x = Math.floor(Math.random() * tr )food.y = Math.floor(Math.random() * tr )// 查看坐标是否符合要求（遍历蛇）for(let i = 0;i<snake.snakePos.length;i++){if(snake.snakePos[i].x === food.x && snake.snakePos[i].y === food.y){// 进入此if，说明当前生成的食物坐标和蛇的坐标冲突了isRepeat = truebreak  //没必要重复了，直接跳出for循环}}if(!isRepeat){//跳出 while 循环break}}// 若跳出了整个 while 循环，那么食物坐标一定是 OK 的// 给他添加食物if(!food.domContent){food.domContent = document.createElement("div")food.domContent.style.width = snakeBody + "px"food.domContent.style.height = snakeBody + "px"food.domContent.style.position = "absolute"food.domContent.style.borderRadius = '50%'food.domContent.style.background = 'url(/img/食物.jpg) center/contain no-repeat'//添加到容器中document.querySelector(".container").append(food.domContent)}//食物的位置food.domContent.style.left = food.x * snakeBody + "px" food.domContent.style.top = food.y * snakeBody + "px" 
}

（四）绑定事件

1. 用户按键盘上的上下左右，对应的字符串

2. 通过计算得到新蛇头的坐标

新的蛇头坐标

注意：把所有snake 都改为 oldHead

按上下左右可以实现移动

————>

根据方向转蛇头

是否吃到食物


// 碰撞检测
function isCollide(newHead){let collideCheckInfo = {isCollide : false,  //是否碰到身体或者墙壁isEat : false  // 是否吃到食物}
//   1. 检测是否碰到墙壁
// td 是列，tr 是行
if(newHead.x < 0 || newHead.x >= td || newHead.y < 0 || newHead.y >= tr ){collideCheckInfo.isCollide = truereturn collideCheckInfo
}
//   2. 检测是否碰到身体
// 遍历整个蛇身，检查有没有碰到身体
for(let i = 0; i < snake.snakePos.length; i++){if(snake.snakePos[i].x === newHead.x && snake.snakePos[i].y === newHead.y){collideCheckInfo.isCollide = truereturn collideCheckInfo}
}
//   3. 检测是否吃到食物
if(newHead.x === food.x && newHead.y === food.y){collideCheckInfo.isEat = true
}return collideCheckInfo}

控制用户不能左移动的时候按右，上移动的时候按下

添加定时器，让蛇自己动

（五）bug 修复

点击重新开始之后，暂停键不起作用

可以将两个按钮添加上去

但是，点击按钮不会有相应的反应（它上面没有绑定事件）

可以通过事件委托，将之前添加的事件给到后面的新 dom 元素中

三、总代码

1. HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/css/index.css"></head>
<body><!-- 整个游戏容器 --><div class="container"><!-- 开始游戏按钮 --><button class="startBtn"></button><!-- 暂停游戏按钮 --><button class="pauseBtn"></button><script src="/js/index.js"></script><script src="/js/config.js"></script></div>
</body>
</html>

2. CSS

*{margin: 0;padding: 0;
}.container{width: 600px;height: 600px;background-color: lightblue;margin: 20px auto;border: 20px solid lightskyblue;/* 想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒 */display: flex;justify-content: center;align-items: center;position: relative;
}/* 按钮公共样式 */
.container button{border: none;outline: none;
}/* 开始按钮 */
/* contain 是铺满整个 */
.startBtn{width: 200px;height: 80px;background: url(/img/开始.png) center/contain no-repeat;display: block;
}/* 暂停按钮 */
.pauseBtn{width: 70px;height: 70px;background: url(/img/暂停.png) center/contain no-repeat;display: none;
}
/* 食物 */
/* snake */

3. JS

// 游戏的相关配置const gridData = []; //储存地图数组// 整个网格的行与列const tr = 30  //行const td = 30  //列// 蛇的身体大小
// 大盒子宽高600 30行 30列 所以每一小格就是 20 ，所以蛇的身体就是 20
const snakeBody = 20// 要明确 
// 我们在确定新的蛇头坐标的时候，会拿下面的对象和旧蛇头做一个计算
// 从而得到新蛇头的坐标
let directionNum = {left:{ x:-1, y: 0 , flag: 'left'},right:{ x:1, y: 0 , flag: 'right'},top:{ x:0, y: -1 , flag: 'top'},bottom:{ x:0, y: 1, flag: 'bottom'}
}// 蛇相关的配置
let snake = {// 蛇一开始移动的方向direction : directionNum.right,   // 一开始向右边移动// 蛇的初始位置snakePos:[{ x:0,y:0,domContent:"",flag:'body'},{ x:1,y:0,domContent:"",flag:'body'},{ x:2,y:0,domContent:"",flag:'body'},{ x:3,y:0,domContent:"",flag:'head'}]
}// 游戏分数
let score = 0// 停止计时器
let timerStop = nullconst time = 200// 食物相关的配置信息
let food= {x:0, y:0, domContent:""  //domContent刚开始是空
}// 配置信息结束// 绘制蛇的方法
function drawSnake(snake){for(let i = 0;i < snake.snakePos.length;i++){// 判断内容是不是为空，是不是第一次开始if(!snake.snakePos[i].domContent){//如果进入此if，说明是第一次创建蛇snake.snakePos[i].domContent = document.createElement("div")snake.snakePos[i].domContent.style.position = "absolute"snake.snakePos[i].domContent.style.width = snakeBody + "px"snake.snakePos[i].domContent.style.height = snakeBody + "px"snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + "px"snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + "px"if(snake.snakePos[i].flag === 'head'){// 说明当前是蛇头snake.snakePos[i].domContent.style.background = 'url(/img/snake.jpg) center/contain no-repeat'snake.snakePos[i].domContent.style.borderRadius = '50%'snake.snakePos[i].domContent.style.width = snakeBody +5 + "px"snake.snakePos[i].domContent.style.height = snakeBody +5 + "px"// 根据方向旋转蛇头switch(snake.direction.flag){case 'top':{snake.snakePos[i].domContent.style.transform = 'rotate(-90deg)'break}case 'bottom':{snake.snakePos[i].domContent.style.transform = 'rotate(90deg)'break}case 'left':{snake.snakePos[i].domContent.style.transform = 'rotate(180deg)'break}case 'right':{snake.snakePos[i].domContent.style.transform = 'rotate(0deg)'break}}}else{//说明是蛇身snake.snakePos[i].domContent.style.background = "rgb(249, 203, 210)";snake.snakePos[i].domContent.style.borderRadius = '50%'snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody +3 + "px"}} // 需要将添加的元素加到 container 容器上去document.querySelector(".container").append(snake.snakePos[i].domContent)}
}// 绘制食物function drawFood(){// 1. 食物的坐标是随机的// 2. 食物不能生成在蛇头或者蛇身上while(true){//构成一个死循环，直到生成符合要求的实物坐标才能退出该循环let isRepeat = false  //默认生成的坐标是符合要求的// 随机生成一个坐标(几格)food.x = Math.floor(Math.random() * tr )food.y = Math.floor(Math.random() * tr )// 查看坐标是否符合要求（遍历蛇）for(let i = 0;i<snake.snakePos.length;i++){if(snake.snakePos[i].x === food.x && snake.snakePos[i].y === food.y){// 进入此if，说明当前生成的食物坐标和蛇的坐标冲突了isRepeat = truebreak  //没必要重复了，直接跳出for循环}}if(!isRepeat){//跳出 while 循环break}}// 若跳出了整个 while 循环，那么食物坐标一定是 OK 的// 给他添加食物if(!food.domContent){food.domContent = document.createElement("div")food.domContent.style.width = snakeBody +5 + "px"food.domContent.style.height = snakeBody +5 + "px"food.domContent.style.position = "absolute"food.domContent.style.borderRadius = '50%'food.domContent.style.background = 'url(/img/食物.jpg) center/contain no-repeat'//添加到容器中document.querySelector(".container").append(food.domContent)}//食物的位置food.domContent.style.left = food.x * snakeBody + "px" food.domContent.style.top = food.y * snakeBody + "px" 
}// 初始化游戏方法function initGame(){// 1. 初始化地图for(let i = 0;i < tr; i++){for(let j = 0 ; j < td ; j++){gridData.push({// 给数组里面加对象x:i,y:j})}}// 2. 绘制蛇drawSnake(snake);  //将snake传进去，调用 drawSnake函数// 3. 绘制食物drawFood(snake);}// 绑定事件
function bindEvent(){//  1. 首先键盘事件，用户按上下左右，蛇能移动document.onkeydown = function(e){if((e.key === "ArrowUp" || e.key.toLocaleLowerCase() === "w") && snake.direction.flag !== "bottom"){// 用户按的是上snake.direction = directionNum.top}if((e.key === "ArrowDown" || e.key.toLocaleLowerCase() === "s") && snake.direction.flag !== "top"){// 用户按的是下snake.direction = directionNum.bottom}if((e.key === "ArrowLeft" || e.key.toLocaleLowerCase() === "a") && snake.direction.flag !== "right"){// 用户按的是左snake.direction = directionNum.left}if((e.key === "ArrowRight" || e.key.toLocaleLowerCase() === "d") && snake.direction.flag !== "left"){// 用户按的是右snake.direction = directionNum.right}}// 2. 计时器自动调用，蛇移动的方法startGame() // 3. 点击整个容器的时候，可以暂停游戏和重新开始游戏document.querySelector('.container').onclick = function(e){// 这边通过事件委托的形式，判断用户酒精点击的是 container 容器，还是暂停按钮或者开始按钮// 从而做出不同的处理// 用一个类名判断，点击的是暂停按钮，还是重新开始按钮if(e.target.className === 'container'){// 那么要做的是暂停操作document.querySelector('.pauseBtn').style.display = 'block'clearInterval(timerStop)}else{// 那么要做的是恢复游戏操作document.querySelector('.pauseBtn').style.display = 'none'startGame()}}}// 自动调用蛇移动
function startGame(){timerStop = setInterval(function(){snakeMove()},time)
}// 蛇的移动方法
function snakeMove(){let oldHead = snake.snakePos[snake.snakePos.length - 1]//  根据方向计算出新的蛇头坐标let newHead = {domContent:"",x : oldHead.x + snake.direction.x,y : oldHead.y + snake.direction.y,flag : 'head'}// 接下来我们首先要做碰撞检测// 看计算出来的新的蛇头有没有碰上食物，蛇的身体，墙壁let collideCheckResult = isCollide(newHead)if(collideCheckResult.isCollide){// 进入这个 if 说明碰撞了if( window.confirm(`哦呦~ gameover~ 笨蛋凯凯当前的分数是${score}分，啵我一口，允许你再来一次~ 嘿嘿`)){// 重新开始游戏//重置内容document.querySelector(".container").innerHTML = `<!-- 开始游戏按钮 --><button class="startBtn" style="display:none"></button><!-- 暂停游戏按钮 --><button class="pauseBtn" style="display:none"></button>`score = 0 // 蛇的初始位置snake = {// 蛇一开始移动的方向direction : directionNum.right,   // 一开始向右边移动// 蛇的初始位置snakePos:[{ x:0,y:0,domContent:"",flag:'body'},{ x:1,y:0,domContent:"",flag:'body'},{ x:2,y:0,domContent:"",flag:'body'},{ x:3,y:0,domContent:"",flag:'head'}]}food = {x:0,y:0,domContent:""}// 再次调用initGameinitGame()}else{// 结束游戏// 把绑定的事件删除document.onkeydown = null;// 关闭定时器clearInterval(timerStop)}return  //结束 snakeMove 函数}// 将旧的头修改为身体oldHead.flag = 'body'oldHead.domContent.style.background = "rgb(249, 203, 210)" oldHead.domContent.style.borderRadius = '50%'// 将蛇头大小改为蛇身大小，并且垂直居中oldHead.domContent.style.width = snakeBody + "px"oldHead.domContent.style.height = snakeBody + "px"oldHead.domContent.style.top = oldHead.y * snakeBody +3 + "px"// 判断是否吃到食物
if(collideCheckResult.isEat){// 吃到食物了，重新生成新食物drawFood()
}else{// 进入这里，说明没有吃到食物// 那么移除最后一个元素document.querySelector(".container").removeChild(snake.snakePos[0].domContent)// 把最后一个元素从数组中删除，即删除第一个数组snake.snakePos.shift()
}//  把新蛇头加进去snake.snakePos.push(newHead)// 重新绘制蛇drawSnake(snake)
}// 碰撞检测
function isCollide(newHead){let collideCheckInfo = {isCollide : false,  //是否碰到身体或者墙壁isEat : false  // 是否吃到食物}
//   1. 检测是否碰到墙壁
// td 是列，tr 是行
if(newHead.x < 0 || newHead.x >= td || newHead.y < 0 || newHead.y >= tr ){collideCheckInfo.isCollide = truereturn collideCheckInfo
}
//   2. 检测是否碰到身体
// 遍历整个蛇身，检查有没有碰到身体
for(let i = 0; i < snake.snakePos.length; i++){if(snake.snakePos[i].x === newHead.x && snake.snakePos[i].y === newHead.y){collideCheckInfo.isCollide = truereturn collideCheckInfo}
}
//   3. 检测是否吃到食物
if(newHead.x === food.x && newHead.y === food.y){collideCheckInfo.isEat = truescore++  //分数自增
}return collideCheckInfo}// 游戏的主方法
function main() {// 用户点击了开始游戏之后，再做后续的工作document.querySelector('.startBtn').onclick = function(e){// 取消冒泡e.stopPropagation()document.querySelector('.startBtn').style.display = 'none'// 1. 第一步 初始化游戏initGame(); //调用初始化游戏方法// 2. 绑定事件bindEvent();
}
}
main(); //调用游戏的主方法

好啦！本次的分享到这里就结束啦！大家快去练练这个小游戏吧~

我们下次不见不散哦！！！