javaScript贪吃蛇

已于 2022-11-16 20:11:56 修改
阅读量4.3k 收藏 14
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javaScript html css 文章标签： javascript css css3
于 2022-11-16 19:54:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58065010/article/details/127845596

文章目录

一、html文件

html文件要写的东西很少

  1. 游戏的容器
  2. 开始按钮
  3. 暂停按钮
<body>
  <!-- 整个游戏容器 -->
  <div class="container">
    <!-- 开始游戏按钮 -->
    <button class="startBtn"></button>
    <!-- 暂停游戏按钮 -->
    <button class="pauseBtn"></button>
  </div>
  </body>

二、CSS文件

1. 将标签初始化

*{
	margin:0;
	padding:0;
}

2. 游戏容器

  • 长度和高度为600px;
  • 背景颜色为#225675;
  • 边框20px实线颜色为#7dd9ff;
  • 上下左右距离20px 居中；
.container{
	width:600px;    
	height:600px;
	background:#225675;
	border:20px solid #7dd9ff;
	margin:20px auto;
}

3.开始和暂停按钮

1. 按钮的公共样式

 - 去除按钮默认的边框
- 去除按钮的轮廓

.container button{
	border:none;
	outline:none;
}

2. 开始按钮

  • 宽200px
  • 高80px;
  • 设置背景图片 startGame.png 居中 铺满 不重复
.startBtn{
	height:80px;
	width:200px;
    background:url(./img/开始游戏.png) center/contain no-repeat
}

3. 暂停按钮

  • 宽高都为70px
.pauseBtn{
  display: none;
  width: 70px;
  height: 70px;
  background:url(./img/暂停.png) center/contain no-repeat
}

4.按钮的位置问题

这时候生成的样式为：
在这里插入图片描述

  • 问题：那么怎么让按钮在中间的位置？
  • 思路：flex布局 然后主轴元素居中（x轴），侧轴元素居中（y轴）
  • 解决：
    由于flex的触发条件是父元素设置成flex 故我们在.container将display修改为flex，在将justify-content（设置主轴上元素的排列方式 即x轴）属性修改为center，align-items(设置侧轴上的元素的排列方式 即y轴)
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height: 600px;
  background: #225675;
  border: 20px solid #7dd9ff;
  margin: 20px auto;
  position: relative;  
}

这里多设置了一个position为relative(相对定位) 为什么要这么做？
由于后期蛇的身体其实是一个个div，我们将这一个个div设置成absolute那么子元素的参考点就是父元素了，通过设置left和top属性就可以控制移动了。

5.按钮的显示问题

样式截图：
在这里插入图片描述

  • 问题：现在有两个按钮，但是需要一次性只能显示一个
    • 思路：通过修改开始和暂停按钮的display属性来解决（后期也是通过修改这两个按钮的display属性为block和none进行显示切换）
    • 具体如下
  1. 开始按钮
.startBtn{
  display: block;
  width: 200px;
  height: 80px;
  background:url(./img/开始游戏.png) center/contain no-repeat
}
  1. 暂停按钮
.pauseBtn{
  display: none;
  width: 70px;
  height: 70px;
  background:url(./img/开始.png) center/contain no-repeat
}

三、js文件

3.1文件分类

将js分为两个文件

  1. index.js 用于书写业务逻辑的文件
  2. config.js 用于存放游戏配置相关的文件

3.2文件引入

在html文件body标签的最后面需要引入这两个js文件，由于index.js需要用到config.js中的内容故需要在index.js文件之前引入config.js否则会报错

<body>
  <!-- 引入js文件 -->
  <script src="../js/config.js"></script>
  <script src="../js/index.js"></script>
</body>

3.3面对对象思想

做游戏最好采用面对对象思维。定义一个main函数，游戏执行只需要执行main函数即可

3.4步骤

1.主函数

首先我们在index.js中写一个主函数 在执行

注意：后续如果没有专门提到config.js那么书写的东西都是在index.js文件夹中

//定义游戏的主函数
function main(){
}
//执行游戏的主函数
main()

2. 初始化游戏

第一步我们需要在main函数中调用初始化游戏的方法

function main(){
//1.第一步：初始化游戏
initGame()
}
  • 思考：我们需要初始化游戏的什么东西？
    • 步骤：
      1. 初始化地图
      2. 绘制蛇
      3. 绘制食物
    • 如下：
//初始化游戏的方法
function initGame(){
	//1.初始化地图

	//2.绘制蛇

	//3.绘制食物

}
1.1初始化地图
  • 问题：那么初始化游戏需要用到什么参数配置？
    • 思考：
      1. 存储地图对象 将container容器变为一个二维数组（蛇移动即通过坐标表示比如蛇头从（0，0）移动到（1，0））
      2. 行和列
      3. 蛇身体的大小
        在这里插入图片描述
    • 参数创建：
      在config.js文件中
var gridData = [] //存储地图对象
//整个网格的行列
var tr = 30 //行 y 
var td = 30 //列 x 
//蛇的身体大小   一个格子的大小width/tr
var snakeBody = parseInt(window.getComputedStyle(document.getElementsByClassName('container')[0], null).width.split('px')) / tr

当时我们设置的container是600px宽高那么每一个小格子就是20px

  • 问题1：那么为什么不直接将蛇的身体设置成20px？
    • 解答：为了方便我们后期修改地图大小这里利用了一些方法进行自动计算蛇身体的大小。
    • 步骤解释：
      1. 先获取container元素
      2. 在通过container元素获取width 但是此时带有px单位
      3. 通过split方法去掉px
      4. 在通过parseInt转化为数字 就获取了width大小
  • 问题2：为什么要绕这么一大圈获取container的长和宽？
    • 解答：当时第一个想法是通过获取container游戏容器的dom元素，在通过.style的方式直接获取游戏容器的长和宽，但是获取失败，显示的是空值，思考了下造成空值的原因是通过style.属性方式获取元素属性值有一个前提就是设置的css属性要是直接写在行内的，而我们当时写这些css属性是通过外链的形式，故获取不到。
function  initGame(){
	//1.初始化地图
	drawMap()
}

function drawMap(){
}
  • 思考：初始化地图是初始化什么东西？
    • 解答：初始化地图就是将地图每个格子变为一个二维坐标
    • 操作：用双重for循环即可
      fucntion drawMap(){
  for(var i = 0 ; i<tr;i++){  //tr是y
    for(var j = 0 ;j<td;j++){//td是x
      gridData.push({
        x:j,
        y:i,
      })
    }
  }
}

第一列（0，0）（1，0）（2，0） y是不变的所以x是j ，y是i

1.2绘制蛇
  • 思考：蛇需要有什么？
    • 步骤
      1. 蛇头的初始位置 （用数组定义，里面存放对象：蛇头蛇身，蛇头和舍身对象的属性：x，y，domContent 用于存放dom元素,flag用于标记是头还是身体）
      2. 蛇一开始移动的方向或者可以说蛇目前移动的方向(在绑定事件时会用到)
    • 参数实现：
      config.js文件中写配置文件
      //蛇相关的配置
var 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(){
	//2.绘制蛇
	drawSnake(snake);
}

function drawSnake(snake){
}
  • 问题1：绘制蛇需要怎么实现？
    • 思路：
      1. 首先判断蛇是否有domContent元素，如果为空则说明是新增加的，需要创建一个div元素，设置他的position为absolute，设置width和height属性为snakeBody 加一个”px“，设置它的left和top属性。left和top属性需要经过计算我们要将其放在左上角的位置。
      2. 在第一个判断条件里判断它的flag是头还是身体，如果是身体则添加背景颜色为#9ddbb1以及百分之五十圆，如果是头则使用蛇头图片 居中 铺满 不重复。
      3. 将设置好的domContent元素添加进container容器里
    • 绘制蛇实现
      //绘制蛇的方法
function drawSnake(snake) {
  for (var 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/蛇头.png") center/contain no-repeat`

      } else {
        //说明是蛇身
        snake.snakePos[i].domContent.style.background = '#9ddbb1'
        snake.snakePos[i].domContent.style.borderRadius = '50%'
      }
    }
    //需要将创建dom元素添加到container容器上面
    var container = document.getElementsByClassName('container')[0]
    container.appendChild(snake.snakePos[i].domContent)
  }
}
    • 完成图：
      在这里插入图片描述
  • 问题2：为什么要设置left和top属性？
    • 解答：因为后期要移动蛇是要通过控制left和top属性的改变来实现的，而要控制left和top属性，首先是需要有这个属性的初始值，如果无，则控制不了。
  • 问题3：如何计算left和top属性？
    • 如图
      在这里插入图片描述
    • 思路：每一个格子的大小是snakeBody，也就是说蛇头要在3，0的位置要将蛇头的x乘以snakeBoyd加一个”px“，y值不变，以此类推
1.3绘制食物
  • 问题：绘制食物需要有什么配置信息？
    • 解答：
      1. 需要有x和y轴坐标（初始值无所谓）
      2. domContent（用于生成dom元素）
    • 动手：
      在config.js文件中写
      //食物相关的配置
var food = {
  //食物的初始位置
  x: 0,
  y: 0,
  domContent: '',
}

function initGame(){
	//3.绘制食物
	drawFood(food)
}

function drawFood(food){

}

  • 问题1：绘制食物需要注意什么？

    • 要求：
      1. 首先食物坐标是随机的
      2. 食物不能生成在蛇头或者蛇身上面

  • 问题2：绘制食物的步骤是什么？

    • 步骤：
      1. 随机生成食物坐标
      2. 判断食物坐标是否符合要求
      3. 如果符合要求判断食物是否存在dom元素
        • 如果存在则生成一个div元素，添加width和height属性为snakeBody，position为absolute，background为食物图片，居中 铺满 不重复，在添加到contaniner容器里
      4. 设置食物dom元素的left和top值为生成的坐标

  • 问题3：怎么生成食物坐标？

    • 思路：构成一个死循环，用random函数一直生成直到生成符合要求的食物坐标才能退出循环

  • 问题4：x和y的范围是多少？

    • 如图：tr和td有30种可能，Math.random()生成的范围是[0,1) 只需要将这个范围处理成（0，0）–>(29,29)即可
      在这里插入图片描述
    • 提示：可以使用floor函数，用于向下取整

  • 问题5：如何判断食物是否在蛇头或者蛇身上？

    • 解答：只需要遍历snake数组的x，y值即可。

  • 问题6：食物dom的left和top值怎么设置？

    • 解答：
      和绘制蛇时类似用生成符合要求的食物坐标的x和y分别乘以snakeBody加上px

    • 绘制食物实现函数：

      //绘制食物
function drawFood(food) {
  //构成一个死循环，直到生成符合要求的坐标
  while (true) {
    var isRepeat = false //默认生成的食物坐标是符合要求
    //随机生成一个坐标
    food.x = Math.floor(Math.random() * td)
    food.y = Math.floor(Math.random() * tr)
    //查看坐标是否符合要求(遍历蛇)
    var len = snake.snakePos.length,
      snakePos = snake.snakePos
    for (var i = 0; i < len; i++) {
      if (snakePos[i].x === food.x && snakePos[i].y === food.y) {
        //进入此if说明生成的坐标和蛇身体冲突了
        isRepeat = true
        break
      }
    }
    if (!isRepeat) {
      break
    }
  }
  //整个while循环退出之后，食物的坐标肯定是ok的
  if (!food.domContent) {
    food.domContent = document.createElement('div')
    food.domContent.style.position = 'absolute'
    food.domContent.style.width = snakeBody + 'px'
    food.domContent.style.height = snakeBody + 'px'
    food.domContent.style.background = `url(./img/西瓜.png) center/contain no-repeat`
    document.getElementsByTagName('div')[0].appendChild(food.domContent)
  }
  food.domContent.style.left = food.x * snakeBody + 'px'
  food.domContent.style.top = food.y * snakeBody + 'px'
}

    • 完成图：
      在这里插入图片描述

3.绑定事件

  • 思考：绑定事件需要有哪些参数？
    • 解答：
      1. 要明确新的蛇头和旧的蛇头之间的位置关系，即需要一个移动参数，用于存储上下左右变化时蛇头坐标的变化从而得出新的蛇头的坐标。
      2. 需要一个flag用于存储蛇是怎么移动的。
      3. 此时，蛇还需要目前移动的方向，由于我们的蛇是创建在左上角，那么默认一开始移动方向是向右，在snake对象中添加一个属性用于存放一开始移动的方向
    • 参数实现：
      在config.js种
      //明确新的蛇头和旧的蛇头之间的位置关系
//我们在确定新的蛇头坐标的时候，会拿下面的对象和旧蛇头做一个计算
//从而得出新的蛇头的坐标
var directionNum={
  left:{x:-1,y:0,flag:'left'},
  top:{x:0,y:-1,flag:'top'},
  right:{x:1,y:0,flag:'right'},
  bottom:{x:0,y:1,flag:'bottom'}
}
      补充绘制蛇时的蛇移动的方向
      //蛇相关的配置
var snake = {
  //蛇的初始位置 这里不写省略代码
	
  //添加： 蛇目前移动的方向
  direction:directionNum.right
}

第二步我们需要在main函数里绑定事件。

function main(){
	//2.绑定事件
	bindEvent()
}

//绑定事件函数
function bindEvent(){
}

  • 问题1：绑定事件需要有哪些步骤？

    • 步骤：
      1. 首先，是绑定键盘事件，用户按下上下左右，蛇会移动。
      2. 修改蛇目前的移动方向
      3. 执行让蛇移动的方法snakeMove()
      4. 在绑定事件函数外写一个让蛇移动的方法
    • 绑定事件实现函数：
      	//绑定事件
function bindEvent() {
  //1.首先是键盘事件
  document.onkeydown = function (e) {
    //keyCode：38是上 87 w 40是下 83 s 37是左 65 a 39是右 68 d
    if (e.keyCode == '37' || e.keyCode == '65') {
      snake.direction = directionNum.left
    }
    if (e.keyCode == '38' || e.keyCode == '87') {
      snake.direction = directionNum.top
    }
    if (e.keyCode == '39' || e.keyCode == '68') {
      snake.direction = directionNum.right
    }
    if (e.keyCode == '40' || e.keyCode == '83') {
      snake.direction = directionNum.bottom
    }
    snakeMove()
  }
}

  • 问题2：绑定哪些键盘事件？

    • 解答：wasd 和上下左右方向键

  • 问题3：怎么触发这些事件？

    • 解答：
      • 一种是通过keypress触发一种是通过keydown触发。推荐使用keydown触发。

    注意：keypress只能触发ASCII有的，即上下左右方向键不可以触发。

  • 问题4：怎么确定方向键？

    • 两种方法：
      1. 如果采用的是keydowm绑定事件：那么一种是通过e.keyCode一种是通过e.key(e就是event事件，函数调用会默认有一个这个参数。)
      2. 如果采用keypress绑定事件那么无法触发上下左右方向键，可以触发wasd通过e.charCode或者e.key来锁定.

    我采用的是keydown触发：测试得keyCode：37是左38是上39是右40是下 87 w 83 s 65 a 68 d

  • 问题5：如何修改蛇目前移动的方向？

    • 解答：在判断完键盘事件之后，在对应的事件里将snake的direction修改为对应的键盘事件方向即可

  • 问题6：蛇移动方法需要怎么实现？

    • 实现步骤：

      1. 根据蛇目前的方向在下一个点添加蛇头，蛇头对象新增domContent对象为空，x值，y值，flag值
      2. 做碰撞检测：看计算出来新的蛇头是否碰上食物或者蛇身体或者墙壁封装一个函数isCollide(newHead)并且执行，在设移动的方法外书写此函数具体逻辑（具体分析看下面的碰撞检测分析）
      3. 接受碰撞检测的结果，判断isCollide的结果，如果是撞墙或者撞到身体则游戏结束（现在先简单的console.log一下后期在进行处理）
      4. 将旧的蛇头修改为身体 需要修改的是flag,background,borderRadius
      5. 接受碰撞检测返回的结果，判断isEatFood的结果。如果吃到食物则重新生成食物，如果没有吃到食物则调用container容器的removeChild方法删除子元素（snake的snakePos的第一个对象的domContent），还需要删除蛇数组的第一个元素（通过shift方法）
      6. 将新的蛇头push进snake.snakePos
      7. 重新绘制蛇（调用drawSnake方法） （此时有个蛇头方向BUG，看下面解答的蛇头方向问题BUG分析）

    • 蛇移动的代码

      //让蛇移动
function snakeMove() {
  var oldHead = snake.snakePos[snake.snakePos.length - 1] //获取旧的蛇头
  //根据方向计算出新的蛇头的坐标
  var newHead = {
    domContent: '',
    x: oldHead.x + snake.direction.x, //蛇头的x坐标
    y: oldHead.y + snake.direction.y, //蛇头的y坐标
    flag: 'head',
  }
  //碰撞检测
  var collideCheckResult = isCollide(newHead)
  if (collideCheckResult.isCollide) {
    console.log('撞墙了')
  }
  //旧蛇头修改为蛇身
  oldHead.flag = 'body'
  oldHead.domContent.style.background = '#9ddbb1'
  oldHead.domContent.style.borderRadius = '50%'

  if (collideCheckResult.isEatFood) {
    //重新生成食物
    drawFood()
  } else {
    //没有吃到食物  移出最后一个元素
    document.getElementsByTagName('div')[0].removeChild(snake.snakePos[0].domContent)
    snake.snakePos.shift()
  }
  //将新蛇头添加到蛇数组中
  snake.snakePos.push(newHead)
  //重新绘制蛇
  drawSnake(snake)
}

    • 如何判断蛇头的新坐标？

      • 解答：新增x值为旧蛇头的x坐标加上蛇目前移动方向（snake.direction）的x值，y值以此类推。

    • 蛇头方向问题BUG

      • 已经可以让蛇移动了但是此时蛇头的位置没改变，如下图
        在这里插入图片描述
      • 判断蛇头的direction的flag属性，根据flag属性，添加绘制蛇里的绘制蛇头时根据方向旋转蛇头图片，由于蛇头默认朝向右边，那么如果向左则旋转180°，向上则旋转270°以此类推
      • 蛇头转换代码：
        function drawSnake(snake){
if (snakePos[i].flag === 'head') {
	      //添加根据方向进行一个旋转的判断（已有代码不重复书写在此）
switch (snake.direction.flag) {
  case 'left':
    snake.snakePos[i].domContent.style.transform = 'rotate(180deg)'
    break
  case 'top':
    snake.snakePos[i].domContent.style.transform = 'rotate(270deg)'
    break
  case 'right':
    snake.snakePos[i].domContent.style.transform = 'rotate(0deg)'
    break
  case 'bottom':
    snake.snakePos[i].domContent.style.transform = 'rotate(90deg)'
    break
    }
	 }
 }
      • 蛇头显示已正常图：
        在这里插入图片描述

    • 碰撞检测分析：

      • 步骤：
        1. 首先要有一个碰撞对象信息collideCheckInfo
        2. 碰撞对象信息里面需要有是否撞墙属性：isCollide默认false
        3. 碰撞对象信息里面需要有是否吃到食物属性：isEatFood默认false
        4. 判断是否撞到墙新蛇头的x是否小于0 或者 大于等于td 或者 新蛇头的y是否小于0 或者 是否大于等于tr 如果是则修改collideCheckInfo.isCollide属性为true且返回collideCheckInfo
        5. 判断是否碰到自己的身体（遍历snake数组将每一个x与y与新蛇头的x,y对比）如果是则修改collideCheckInfo.isCollide为true且返回collideCheckInfo
        6. 判断是否吃到东西（将新蛇头的x与y与食物的坐标进行对比）如果是则修改collideCheckInfo.isEatFood = true
        7. 返回collideCheckInfo
      • 碰撞检测代码：
        		//碰撞检测
function isCollide(newHead) {
  var collideCheckInfo = {
    //1.是否撞墙
    isCollide: false,
    //2.是否吃到食物
    isEatFood: false,
  }
  //1.撞墙
  if (newHead.x < 0 || newHead.x >= td || newHead.y < 0 || newHead.y >= tr) {
    collideCheckInfo.isCollide = true
    return collideCheckInfo
  }
  //2.检测是否碰到自己
  for(var i=0;i<snake.snakePos.length;i++){
    if(snake.snakePos[i].x==newHead.x&&snake.snakePos[i].y==newHead.y){
      collideCheckInfo.isCollide = true
      return collideCheckInfo
    }
  }
  //3.检测是否吃到食物
  if(newHead.x==food.x&&newHead.y==food.y){
    collideCheckInfo.isEatFood = true
  }
  return collideCheckInfo
}

4.游戏分数

在config.js中添加一个分数变量

//游戏分数
var score = 0
  • 问题：什么地方让游戏分数++？
    • 解答：在碰撞检测函数吃到食物的时候让分数++
    • 实现代码
        //3.检测是否吃到食物
  function isCollide(newHead){
    if (newHead.x == food.x && newHead.y == food.y) {
    //之前的代码这里不做展示
    score++ ; //分数自增    <----新增
  	}
  }

5.精化

config.js中创建一个计分变量

//游戏分数
var score = 0

在碰撞函数处理中的判断是否吃到食物添加分数++

  //3.判断是否吃到食物
  if (newHead.x == food.x && newHead.y == food.y) {
    collideCheckInfo.isEat = true
    score ++;//分数加一
  }

修改碰到东西之后的处理

  //判断是否撞到东西
  if (collideCheckInfo.isCollide) {
    //如果进入此if表示碰到东西了
    var result = window.confirm(`游戏结束，你的得分为${score}分,是否重新开始？`)
    if (result) {
      //如果进来则说明重新开始
      // window.location.reload() //刷新页面
      //方法二：
      document.getElementsByClassName('container')[0].innerHTML = ''
      score = 0
      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' },
        ],
        //蛇一开始移动的方法
        direction: directionNum.right,
      }
      food = {
        //食物的初始位置
        x: 0,
        y: 0,
        domContent: '',
      }
      initGame()
    } else {
      //结束游戏
      document.onkeydown=false
       clearInterval(timerStop)
      
    }
    return
  }

优化移动：
往左的时候不能往右
往上的时候不能往下
以此类推
修改绑定事件函数

//绑定事件
function bindEvent() {
  //1.监听用户的键盘事件 上下左右
  document.onkeydown = function (e) {
    //37 左 38上 39右 40下 ↑↓←→
    //65 a 87 w 68d 83s

    //上
    if ((e.keyCode == '38' || e.keyCode == '87')&&snake.direction.flag!='bottom') {
      snake.direction = directionNum.top
    }
    //下
    if( (e.keyCode == '40' || e.keyCode == '83') && snake.direction.flag!='top'){
      snake.direction = directionNum.bottom
    }
    //左
    if( (e.keyCode == '37' || e.keyCode == '65') && snake.direction.flag!='right') {
      snake.direction = directionNum.left
    }
    //右
    if ((e.keyCode == '39' || e.keyCode == '68') && snake.direction.flag!='left') {
      snake.direction = directionNum.right
    }
    snakeMove() //蛇的移动方法
  }
}

写一个定时器让蛇自己移动
将绑定事件中的snakeMove()修改为startGame()
在config.js中创建三个变量

//停止计时器
var timerStop = null
//计时器事件
var speed =500
//防止重复执行setInterval
var flag=true

书写startGame函数

//定时器
function startGame() {
  if (flag) {
    timerStop = setInterval(function () {
      snakeMove()
      flag = false
    }, speed)
  }
}

6.暂停

在bindEvent函数中添加

    //当点击container的时候暂停游戏
    document.getElementsByClassName('container')[0].onclick=function(){
      document.getElementsByClassName('pauseBtn')[0].style.display='block'
      clearInterval(timerStop)
      flag=true
    }
    //点击暂停按钮继续游戏
    document.getElementsByClassName('pauseBtn')[0].onclick=function(e){
      //阻止冒泡事件
      e.stopPropagation()
      document.getElementsByClassName('pauseBtn')[0].style.display='none'
      startGame()
    }

7.开始游戏

在main函数中修改代码

function main() {
  //用户点击了开始游戏之后在左后续的工作
  var startBtn = document.getElementsByClassName('startBtn')[0]
  startBtn.onclick = function (e) {
    //阻止冒泡
    e.stopPropagation()
    //1.初始化游戏
    initGame()
    //2.绑定事件
    bindEvent()
    //3.将按钮隐藏
    startBtn.style.display='none'
  }
}

但是有个bug 点击开始按钮之后无法暂停

为什么会出现这样子的事情？
因为在重新开始的时候我们将container的innerHTML置空了
本身是有开始和暂停两个按钮的
修复：

      document.getElementsByClassName('container')[0].innerHTML = 
     `    <!-- 开始游戏按钮 -->
      <button class="startBtn" style="display: none"></button>
      <!-- 暂停游戏按钮 -->
      <button class="pauseBtn" style="display: none"></button>`

这么写还是有bug 就是开始和暂停按钮会同时出现
将container的暂停事件重新写

    //当点击container的时候暂停游戏
    document.getElementsByClassName('container')[0].onclick = function (e) {
      var pauseBtn = document.getElementsByClassName('pauseBtn')[0]
      if(e.target.className=='container'){
        pauseBtn.style.display = 'block'
        clearInterval(timerStop)
        flag = true
      }else{
        //恢复游戏操作
        pauseBtn.style.display = 'none'
        startGame()
      }

    }

四、完整代码

index.js

//游戏的主方法
function main() {
  //用户点击了开始游戏之后在左后续的工作
  var startBtn = document.getElementsByClassName('startBtn')[0]
  startBtn.onclick = function (e) {
    //阻止冒泡
    e.stopPropagation()

    //1.初始化游戏
    initGame()
    //2.绑定事件
    bindEvent()
    //3.将按钮隐藏
    startBtn.style.display='none'
    
  }
}

//初始化游戏
function initGame() {
  //1.初始化地图
  drawMap()
  //2.初始化蛇
  drawSnake(snake)
  //3.初始化食物
  drawFood()
}

//绘制地图的方法
function drawMap() {
  for (var i = 0; i < td; i++) {
    for (var j = 0; j < td; j++) {
      griData.push({ x: j, y: i }) //将所有的格子坐标存储到数组中
    }
  }
}

//绘制蛇的方法
function drawSnake(snake) {
  for (var 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/蛇头.png") center/contain no-repeat`
        //根据方向进行一个旋转

        switch (snake.direction.flag) {
          case 'left': {
            snake.snakePos[i].domContent.style.transform = `rotate(180deg)`
            break
          }
          case 'right': {
            snake.snakePos[i].domContent.style.transform = `rotate(0deg)`
            break
          }
          case 'top': {
            snake.snakePos[i].domContent.style.transform = `rotate(270deg)`
            break
          }
          case 'bottom': {
            snake.snakePos[i].domContent.style.transform = `rotate(90deg)`
            break
          }
        }
      } else {
        //说明是蛇身
        snake.snakePos[i].domContent.style.background = '#9ddbb1'
        snake.snakePos[i].domContent.style.borderRadius = '50%'
      }
    }
    //需要将创建dom元素添加到container容器上面
    var container = document.getElementsByClassName('container')[0]
    container.appendChild(snake.snakePos[i].domContent)
  }
}
//绘制食物的方法
function drawFood() {
  //思考：
  //1.食物的坐标是随机的
  //2.食物不能生成在container的边界上及以外
  //3.食物不能生成在蛇的身体上蛇的头上
  //TODO：
  while (true) {
    //构成一个死循环 直到生成符合要求的食物坐标 才能退出循环
    var isRepeat = false
    food.x = Math.floor(Math.random() * tr) //最大值为tr-1 因为是从0开始的
    food.y = Math.floor(Math.random() * td) //最大值为td-1 因为是从0开始的
    //floor:总是返回小于等于一个给定数字的最大整数。
    //random:返回0到1之间的一个随机数
    for (var i = 0; i < snake.snakePos.length; i++) {
      if (food.x == snake.snakePos[i].x && food.y == snake.snakePos[i].y) {
        //进入此if说明食物生成在蛇的身体上
        isRepeat = true
        break
      }
    }
    if (!isRepeat) {
      //跳出while循环
      break
    }
  }
  //跳出while循环说明已经生成了符合要求的食物坐标
  if (!food.domContent) {
    food.domContent = document.createElement('div')
    food.domContent.style.position = 'absolute'
    food.domContent.style.height = snakeBody + 'px'
    food.domContent.style.width = snakeBody + 'px'
    food.domContent.style.background = `url("../img/西瓜.png") 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 snakeMove() {
  var oldHead = snake.snakePos[snake.snakePos.length - 1]
  //1.根据方向计算出新的蛇头的坐标作为
  var newHead = {
    domContent: '',
    x: oldHead.x + snake.direction.x,
    y: oldHead.y + snake.direction.y,
    flag: 'head',
  }
  //这之间要左个碰撞检测 看计算出来的蛇头有没有碰上食物或者蛇身体或者墙壁
  var collideCheckInfo = isCollide(newHead)
  //判断是否撞到东西
  if (collideCheckInfo.isCollide) {
    //如果进入此if表示碰到东西了
    var result = window.confirm(`游戏结束，你的得分为${score}分,是否重新开始？`)
    if (result) {
      //如果进来则说明重新开始
      // window.location.reload() //刷新页面
      //方法二：
      document.getElementsByClassName('container')[0].innerHTML = 
      `    <!-- 开始游戏按钮 -->
      <button class="startBtn" style="display: none"></button>
      <!-- 暂停游戏按钮 -->
      <button class="pauseBtn" style="display: none"></button>`
      score = 0
      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' },
        ],
        //蛇一开始移动的方法
        direction: directionNum.right,
      }
      food = {
        //食物的初始位置
        x: 0,
        y: 0,
        domContent: '',
      }
      initGame()
    } else {
      //结束游戏
      document.onkeydown = false

    }
    clearInterval(timerStop)
    return
  }
  //2.将旧的头修改为身体
  oldHead.flag = 'body'
  oldHead.domContent.style.background = '#9ddbb1'
  oldHead.domContent.style.borderRadius = '50%'

  //判断是否吃到东西
  if (collideCheckInfo.isEat) {
    //如果进入此if表示吃到食物了
    //重新生成食物
    drawFood()
  } else {
    //说明没有吃到食物
    document.getElementsByClassName('container')[0].removeChild(snake.snakePos[0].domContent)
    snake.snakePos.shift()
  }

  //3.将新的头添加到蛇的数组中
  snake.snakePos.push(newHead)

  //4.重新绘制蛇
  drawSnake(snake)
}

//定时器
function startGame() {
  if (flag) {
    timerStop = setInterval(function () {
      snakeMove()
      flag = false
    }, speed)
  }
}

//绑定事件
function bindEvent() {
  //1.监听用户的键盘事件 上下左右
  document.onkeydown = function (e) {
    //37 左 38上 39右 40下 ↑↓←→
    //65 a 87 w 68d 83s

    //上
    if ((e.keyCode == '38' || e.keyCode == '87') && snake.direction.flag != 'bottom') {
      snake.direction = directionNum.top
    }
    //下
    if ((e.keyCode == '40' || e.keyCode == '83') && snake.direction.flag != 'top') {
      snake.direction = directionNum.bottom
    }
    //左
    if ((e.keyCode == '37' || e.keyCode == '65') && snake.direction.flag != 'right') {
      snake.direction = directionNum.left
    }
    //右
    if ((e.keyCode == '39' || e.keyCode == '68') && snake.direction.flag != 'left') {
      snake.direction = directionNum.right
    }
    //计时器自动移动蛇
    startGame()
    //当点击container的时候暂停游戏
    document.getElementsByClassName('container')[0].onclick = function (e) {
      var pauseBtn = document.getElementsByClassName('pauseBtn')[0]
      if(e.target.className=='container'){
        pauseBtn.style.display = 'block'
        clearInterval(timerStop)
        flag = true
      }else{
        //恢复游戏操作
        pauseBtn.style.display = 'none'
        startGame()
      }

    }
    // //点击暂停按钮继续游戏
    // document.getElementsByClassName('pauseBtn')[0].onclick = function (e) {

    //   //阻止冒泡事件
    //   e.stopPropagation()
    //   document.getElementsByClassName('pauseBtn')[0].style.display = 'none'
    //   startGame()
    // }
  }
}
//碰撞检测
function isCollide(newHead) {
  var collideCheckInfo = {
    isCollide: false, //是否碰撞墙壁
    isEat: false, //是否吃到食物
  }
  ///1.判断是否碰撞墙壁
  if (newHead.x < 0 || newHead.x > td - 1 || newHead.y < 0 || newHead.y > tr - 1) {
    collideCheckInfo.isCollide = true
    return collideCheckInfo
  }

  //2.检测是否碰到自己的身体
  for (var i = 0; i < snake.snakePos.length; i++) {
    if (newHead.x == snake.snakePos[i].x && newHead.y == snake.snakePos[i].y) {
      collideCheckInfo.isCollide = true
      return collideCheckInfo
    }
  }
  //3.判断是否吃到食物
  if (newHead.x == food.x && newHead.y == food.y) {
    collideCheckInfo.isEat = true
    score++ //分数加一
  }
  return collideCheckInfo
}

//调用主方法
main()

config.js

//存储地图对象  坐标x，y
var griData = []
//整个网格的行列
var tr = 30 //行 y 
var td = 30 //列 x 
//蛇的身体大小   一个格子的大小width/tr
// 1.先获取container元素
// 2.在通过container元素获取width 但是此时带有px单位
// 3.通过split方法去掉px
// 4.在通过parseInt转化为数字 就获取了width大小
var snakeBody = parseInt(window.getComputedStyle(document.getElementsByClassName('container')[0], null).width.split('px')) / tr
//明确新的蛇头和旧的蛇头之间的位置关系
//我们在确定新的蛇头坐标的时候，会拿下面的对象和旧蛇头做一个计算
var directionNum={
  left:{x:-1,y:0,flag:'left'},
  top:{x:0,y:-1,flag:'top'},
  right:{x:1,y:0,flag:'right'},
  bottom:{x:0,y:1,flag:'bottom'}
}
//蛇相关的配置
var 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' },
  ],
  //蛇一开始移动的方法
  direction:directionNum.right
}

//食物相关的配置
var food = {
  //食物的初始位置
  x: 0,
  y: 0,
  domContent: '',
}

//游戏分数
var score = 0

//停止计时器
var timerStop = null
//计时器事件
var speed =200
//防止重复执行setInterval
var flag=true

index.css

*{
  /* 去除内外边距 */
  margin: 0;
  padding: 0;
}
/* 整体游戏容器样式 */
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height: 600px;
  background: #225675;
  border: 20px solid #7dd9ff;
  margin: 20px auto;
  position: relative;
}

/* 设置按钮公共样式 */
.container button{
  border:none;
  outline: none; 
  /* 边框和轮廓 */
}
/* 开始按钮 */
.startBtn{
  display: block;
  width: 200px;
  height: 80px;
  background:url(./img/开始游戏.png) center/contain no-repeat
}
.pauseBtn{
  display: none;
  width: 70px;
  height: 70px;
  background:url(./img/开始.png) center/contain no-repeat
}

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">

</head>

<body>
  <!-- 整个游戏容器 -->
  <div class="container">
    <!-- 开始游戏按钮 -->
    <button class="startBtn"></button>
    <!-- 暂停游戏按钮 -->
    <button class="pauseBtn"></button>
  </div>
  <script src="../js/config.js"></script>
  <script src="../js/index.js"></script>
</body>


</html>
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
贪吃蛇JS代码
06-06
原声JS贪吃蛇　点击我删除div
贪吃蛇js代码
03-25
简单的贪吃蛇游戏，纯JavaScript的开发，可以当做新手试用项目！
JavaScript实现贪吃蛇
08-07
简单定时器实现游戏，附有代码注释....................
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
Javascript贪吃蛇
05-27
JavaScript贪吃蛇是一款基于网页的经典游戏，通过JavaScript编程语言实现，展现了JavaScript在游戏开发中的应用。这款游戏的原理是利用HTML作为展示界面，JavaScript处理游戏逻辑和用户交互，为玩家提供了一个简单但...
JavaScript 贪吃蛇游戏
最新发布
10-25
今天介绍的这款JavaScript贪吃蛇游戏，不仅仅是一个娱乐项目，更是一款适合JavaScript学习者和游戏开发初学者深入研究的优秀资源。 该游戏利用JavaScript编程语言开发，通过HTML和CSS技术搭建界面，使用canvas元素...
JavaScript贪吃蛇
原地起飞
11-24 5869
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
用JavaScript实现贪吃蛇游戏
10-14
主要为大家详细介绍了用JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现贪吃蛇游戏
09-16
功能：蛇吃食物有三种情况：走到的地方有食物；走到的地方没有食物；走到的地方是墙壁。吃到食物后，蛇的身体会变长；碰到墙壁后 Game Over，询问是否重新开始。 整个游戏是在一个<div>框子(地图)里展开的，蛇有地图里的一系列<div>构成，初始状态(刚刚打开页面)蛇是一个<div>框，蛇头和蛇尾是在一起的，就是这个<div>框，以后吃了食物后<div>个数会变多，蛇就会长长。食物用一个<span>框表示，初始时和蛇一样其位置是随机产生的。蛇和食物的坐标用<div>和<span>的绝对位置表示。 算法的关键是当蛇移动到新的位置后，判断前述的三种情况，做出相应的处理。而二维数组 Map[][] 就是判断的依据。二维数组 Map[][]通过其元素的值来表示蛇身、食物和空地。蛇身、食物和空地的值分别为&#39;S&#39;、&#39;F&#39;和&#39;0&#39;。 用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码，再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然该段代码的最大价值还是让我们了解到网页游戏的大概写法，而算法其实是最重要的，把一个游戏的设想变为一堆包含许多的函数的结构化的代码，是值得我们借鉴和学习的。
javascript开发贪吃蛇游戏
01-17
个人小练习，纯javascript开发贪吃蛇小游戏
贪吃蛇源码js
08-23
纯js贪吃蛇游戏
JS实现贪吃蛇游戏
11-27
通过JS实现贪吃蛇功能 1、登录功能，程序运行时必须输入一个名称 2、蛇吃到实物可变长，碰到自己或着墙壁死亡，显示分数 3、游戏过程中动态显示分数变化 4、将数据存入本地文件score.txt（需要ActiveX插件，IE浏览器支持，只保存最高分数）
js贪吃蛇源码
11-23
纯 javascript网页贪吃蛇源码下载 几百行 源码不多，有注释，浏览器打开可运行
贪吃蛇游戏的JavaScript实现
CsCufft的博客
09-18 338
当你在浏览器中打开HTML页面后，你将可以使用键盘上的箭头键来控制蛇的移动方向。接下来，我们将创建一个JavaScript文件（snake.js），用于处理游戏逻辑和绘制。首先，我们需要定义一些变量来表示游戏状态，比如蛇的位置、速度、方向，以及食物的位置等等。在页面中，我们将创建一个画布（canvas）元素，用于绘制游戏场景。贪吃蛇游戏是一款经典的小游戏，玩家通过控制一条蛇在屏幕上移动，吃掉食物并不断增长身体长度。现在，我们已经定义了游戏的逻辑和绘制函数。最后，我们需要启动游戏循环，使游戏开始运行起来。
js实现贪吃蛇小游戏----代码详解
qq_47815128的博客
11-02 623
js实现贪吃蛇小游戏----代码详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> .game-area{ height: 600px; width: 600px; backgrou
Javascript贪吃蛇游戏源码
10-31
贪吃蛇小游戏源码，可以实现分数累加，吃到食物可以随机变化颜色等
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒羊羊h

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值