前端实现贪吃蛇小游戏-附源码详解

最新推荐文章于 2024-04-01 01:21:41 发布
最新推荐文章于 2024-04-01 01:21:41 发布
阅读量1.5k 收藏 5
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131177087
版权

前端实现贪吃蛇小游戏的详细代码和解释。

首先，我们需要在 HTML 中添加一个画布元素，用于绘制游戏界面：

<canvas id="canvas" width="400" height="400"></canvas>

然后，在 JavaScript 中，我们需要定义一些变量来表示游戏状态和参数：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

const cellSize = 20
const width = canvas.width / cellSize
const height = canvas.height / cellSize

let snake = [{ x: 10, y: 10 }]
let direction = 'right'
let food = generateFood()

let score = 0
let gameOver = false

其中，canvas 和 ctx 分别表示画布元素和画布上下文。cellSize 表示每个格子的大小，width 和 height 分别表示画布的宽度和高度。snake 表示蛇的身体，direction 表示蛇的移动方向，food 表示食物的位置。score 表示得分，gameOver 表示游戏是否结束。

接着，我们需要定义一些函数来实现游戏逻辑。首先是 generateFood 函数，用于生成随机食物的位置：

function generateFood () {
  let food = {
    x: Math.floor(Math.random() * width),
    y: Math.floor(Math.random() * height)
  }
  while (snake.some(cell => cell.x === food.x && cell.y === food.y)) {
    food = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height)
    }
  }
  return food
}

该函数首先随机生成一个食物的位置，然后检查该位置是否与蛇的身体重叠，如果是则重新生成位置，直到找到一个不与蛇重叠的位置。

接下来是 drawCell 函数，用于绘制一个格子：

function drawCell (x, y, color) {
  ctx.fillStyle = color
  ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize)
  ctx.strokeStyle = 'white'
  ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize)
}

该函数接受三个参数，分别表示格子的横坐标、纵坐标和颜色。它使用 fillRect 和 strokeRect 方法绘制格子的填充和边框。

接下来是 drawSnake 函数，用于绘制蛇的身体：

function drawSnake () {
  snake.forEach(cell => {
    drawCell(cell.x, cell.y, 'green')
  })
}

该函数使用 forEach 方法遍历蛇的身体，然后调用 drawCell 函数绘制每个格子。

接下来是 drawFood 函数，用于绘制食物：

function drawFood () {
  drawCell(food.x, food.y, 'red')
}

该函数调用 drawCell 函数绘制食物格子。

接下来是 update 函数，用于更新游戏状态：

function update () {
  const head = { x: snake[0].x, y: snake[0].y }
  switch (direction) {
    case 'up':
      head.y--
      break
    case 'down':
      head.y++
      break
    case 'left':
      head.x--
      break
    case 'right':
      head.x++
      break
  }
  if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || snake.some(cell => cell.x === head.x && cell.y === head.y)) {
    gameOver = true
    return
  }
  snake.unshift(head)
  if (head.x === food.x && head.y === food.y) {
    score++
    food = generateFood()
  } else {
    snake.pop()
  }
}

该函数首先复制蛇头的位置，然后根据当前的移动方向更新蛇头的位置。如果蛇头超出了画布边界或者与蛇的身体重叠，则游戏结束。否则，将蛇头插入到蛇的身体的头部，然后检查是否吃到了食物。如果吃到了食物，则将得分加一，并生成新的食物。否则，将蛇的尾部删除。

最后是 draw 函数，用于绘制游戏界面：

function draw () {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  drawSnake()
  drawFood()
  ctx.fillStyle = 'white'
  ctx.fillText(`Score: ${score}`, 10, canvas.height - 10)
}

该函数首先使用 clearRect 方法清空画布，然后调用 drawSnake 和 drawFood 函数绘制蛇和食物，最后使用 fillText 方法绘制得分。

最后是游戏循环，使用 setInterval 方法每隔一段时间调用一次 update 和 draw 函数：

setInterval(() => {
  if (!gameOver) {
    update()
    draw()
  }
}, 100)

至此，贪吃蛇小游戏的前端实现就完成了。完整代码如下：

好的，下面是完整代码和详细解释：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>贪吃蛇小游戏</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')

      const cellSize = 20
      const width = canvas.width / cellSize
      const height = canvas.height / cellSize

      let snake = [{ x: 10, y: 10 }]
      let direction = 'right'
      let food = generateFood()

      let score = 0
      let gameOver = false

      function generateFood () {
        let food = {
          x: Math.floor(Math.random() * width),
          y: Math.floor(Math.random() * height)
        }
        while (snake.some(cell => cell.x === food.x && cell.y === food.y)) {
          food = {
            x: Math.floor(Math.random() * width),
            y: Math.floor(Math.random() * height)
          }
        }
        return food
      }

      function drawCell (x, y, color) {
        ctx.fillStyle = color
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize)
        ctx.strokeStyle = 'white'
        ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize)
      }

      function drawSnake () {
        snake.forEach(cell => {
          drawCell(cell.x, cell.y, 'green')
        })
      }

      function drawFood () {
        drawCell(food.x, food.y, 'red')
      }

      function update () {
        const head = { x: snake[0].x, y: snake[0].y }
        switch (direction) {
          case 'up':
            head.y--
            break
          case 'down':
            head.y++
            break
          case 'left':
            head.x--
            break
          case 'right':
            head.x++
            break
        }
        if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || snake.some(cell => cell.x === head.x && cell.y === head.y)) {
          gameOver = true
          return
        }
        snake.unshift(head)
        if (head.x === food.x && head.y === food.y) {
          score++
          food = generateFood()
        } else {
          snake.pop()
        }
      }

      function draw () {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        drawSnake()
        drawFood()
        ctx.fillStyle = 'white'
        ctx.fillText(`Score: ${score}`, 10, canvas.height - 10)
      }

      setInterval(() => {
        if (!gameOver) {
          update()
          draw()
        }
      }, 100)

      document.addEventListener('keydown', event => {
        switch (event.key) {
          case 'ArrowUp':
            if (direction !== 'down') {
              direction = 'up'
            }
            break
          case 'ArrowDown':
            if (direction !== 'up') {
              direction = 'down'
            }
            break
          case 'ArrowLeft':
            if (direction !== 'right') {
              direction = 'left'
            }
            break
          case 'ArrowRight':
            if (direction !== 'left') {
              direction = 'right'
            }
            break
        }
      })
    </script>
  </body>
</html>

首先定义了一些常量，包括格子的大小、画布的宽度和高度等等。

然后定义了几个变量，包括蛇的初始位置、移动方向、食物的位置、得分和游戏是否结束等等。

接下来是 generateFood 函数，用于生成随机的食物位置：

function generateFood () {
  let food = {
    x: Math.floor(Math.random() * width),
    y: Math.floor(Math.random() * height)
  }
  while (snake.some(cell => cell.x === food.x && cell.y === food.y)) {
    food = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height)
    }
  }
  return food
}

该函数首先生成一个随机的食物位置，然后检查该位置是否与蛇的身体重叠。如果重叠，则重新生成随机位置，直到找到一个不与蛇的身体重叠的位置。

接下来是 drawCell 函数，用于绘制单个格子：

function drawCell (x, y, color) {
  ctx.fillStyle = color
  ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize)
  ctx.strokeStyle = 'white'
  ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize)
}

该函数接受三个参数，分别表示格子的横坐标、纵坐标和颜色。它使用 fillRect 和 strokeRect 方法绘制格子的填充和边框。

接下来是 drawSnake 函数，用于绘制蛇的身体：

function drawSnake () {
  snake.forEach(cell => {
    drawCell(cell.x, cell.y, 'green')
  })
}

该函数使用 forEach 方法遍历蛇的身体，然后调用 drawCell 函数绘制每个格子。

接下来是 drawFood 函数，用于绘制食物：

function drawFood () {
  drawCell(food.x, food.y, 'red')
}

该函数调用 drawCell 函数绘制食物格子。

接下来是 update 函数，用于更新游戏状态：

function update () {
  const head = { x: snake[0].x, y: snake[0].y }
  switch (direction) {
    case 'up':
      head.y--
      break
    case 'down':
      head.y++
      break
    case 'left':
      head.x--
      break
    case 'right':
      head.x++
      break
  }
  if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || snake.some(cell => cell.x === head.x && cell.y === head.y)) {
    gameOver = true
    return
  }
  snake.unshift(head)
  if (head.x === food.x && head.y === food.y) {
    score++
    food = generateFood()
  } else {
    snake.pop()
  }
}

该函数首先创建一个新的头部位置，根据当前移动方向更新头部位置。然后检查头部是否超出边界或与蛇的身体重叠。如果是，则游戏结束。否则，将新的头部位置插入到蛇的身体前面。如果头部位置与食物位置重叠，则得分加一，生成新的食物位置，否则将蛇的尾部弹出，使其移动。

最后是 draw 函数，用于绘制游戏界面：

function draw () {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  drawSnake()
  drawFood()
  ctx.fillStyle = 'white'
  ctx.fillText(`Score: ${score}`, 10, canvas.height - 10)
}

该函数首先使用 clearRect 方法清空画布，然后分别调用 drawSnake 和 drawFood 函数绘制蛇和食物。最后使用 fillText 方法绘制得分。

最后是游戏主循环，使用 setInterval 方法每隔一定时间更新游戏状态并绘制游戏界面。并且监听键盘事件，根据按键更新移动方向。

setInterval(() => {
  if (!gameOver) {
    update()
    draw()
  }
}, 100)

document.addEventListener('keydown', event => {
  switch (event.key) {
    case 'ArrowUp':
      if (direction !== 'down') {
        direction = 'up'
      }
      break
    case 'ArrowDown':
      if (direction !== 'up') {
        direction = 'down'
      }
      break
    case 'ArrowLeft':
      if (direction !== 'right') {
        direction = 'left'
      }
      break
    case 'ArrowRight':
      if (direction !== 'left') {
        direction = 'right'
      }
      break
  }
})

这就是贪吃蛇游戏的全部代码。

一花一world
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端40款小游戏源码
12-03
40款小游戏各种小例子，切水果，2048，连连看，HTML+CSS+JavaScript练习小例子，应有尽有下载解压后即可运行，完整源代码。
前端编写贪吃蛇游戏-附详细代码
一步一个脚印，踏实努力，向着目标前进
06-23 1667
当我们在前端编写贪吃蛇游戏时，可以按照以下步骤进行：先看截图： 设置游戏板：创建一个HTML元素作为游戏板，可以使用元素，并为其设置合适的样式。绘制蛇和食物：使用JavaScript代码在游戏板上绘制蛇和食物。可以使用CSS样式设置蛇和食物的样式。移动蛇：编写函数来移动蛇的身体和头部。可以使用数组来表示蛇的身体，数组中的每个元素表示蛇的一个部分，如头部、身体和尾部。监听键盘事件：使用JavaScript代码监听键盘事件，根据按键来改变蛇的移动方向。检查碰撞：编写函数来检查蛇是否碰到边界或自身。如果蛇碰到边界
HTML+js实现贪吃蛇小游戏（内含完整代码，字节跳动+腾讯+华为+小米+阿里面试题分享
最新发布
m0_61549591的博客
04-01 541
js代码：//这个方法用来获取蛇头下一个位置对应的元素，要根据元素做不同的事情//单词forEach代表遍历数组//(1)下个点是自己，代表撞到了自己，游戏结束//是否撞到自己//如果数组中两个数据都相等，说明下一个点在蛇身体里面能找到自己了});return;//(2)下个点是围墙，代表撞到了围墙，游戏结束return;//(3)下个点是食物，吃//如果这个条件成立，说明蛇头要走的下一个点是食物return;//(4)下个点什么都不是，走。
贪吃蛇完整代码(史上最详细)
m0_74379014的博客
02-19 1万+
#include <stdio.h> int main()
贪吃蛇完整代码 简便
li___12345的博客
06-29 6819
【代码】贪吃蛇完整代码 简便。
C语言贪吃蛇小游戏，贪吃蛇C语言代码实现大全
chengxuyuanlaow的博客
10-24 2万+
设计贪吃蛇游戏的主要目的是让大家夯实C语言基础，训练编程思维，培养解决问题的思路，领略多姿多彩的C语言。贪吃蛇是非常经典的一款游戏，本次我们模拟在控制台实现贪吃蛇游戏，也就是实现贪吃蛇的基本功能，比如在地图中，用“↑↓←→”控制移动蛇的方向，吃掉食物之后，蛇身体会变长等等。。。。首先我们得分析，游戏中我们会碰见的一些情况。
贪吃蛇游戏-微信小游戏-项目源码
05-10
这是一个微信小游戏项目源码，是经典怀旧的贪吃蛇游戏，适合新手入门参考学习，下面还有↓ 使用微信开发工具选择小游戏导入即可打开，可编译运行，请放心下载， 相关指导教程请看作者发表的以下文章： ① 微信小...
贪吃蛇游戏-uniapp-项目源码
04-18
这是一个uniapp项目小程序源码，是经典怀旧的贪吃蛇游戏，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/124238125
前端实现贪吃蛇小游戏！
03-08
通过Vue3仿照经典版贪吃蛇功能，食物随机位置，蛇可进行移动，吃到食物后身体变长一节，同时分数+1，分数每累积10分等级+1，等级越高蛇移动速度越快，蛇撞墙后或者撞击身体后游戏结束清零重新开始！下载资源后运行两...
C语言实现贪吃蛇小游戏-源码
06-27
C语言实现贪吃蛇小游戏，程序为控制台版本，开发环境是VS2010专业版。
贪吃蛇游戏-微信小程序-项目源码
04-18
这是一个微信小程序项目源码，是经典怀旧的贪吃蛇游戏，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/124238125
前端技术搭建贪吃蛇小游戏（内含源码）
热门推荐
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
贪吃蛇_代码+解析
m0_72413130的博客
04-21 2001
define UP 0 //上#define DOWN 1 //下#define LEFT 2 //左#define RIGHT 3 //右#define X 23 //X坐标#define Y 40 //Y坐标#define MAXLEN 200 //最大长度#define MINTIME 75 //等待时间。
贪吃蛇代码
2301_77625559的博客
04-14 1750
if( x < 2 || x > COLS - 1 || y < 2 || y > ROWS - 1 )//检测是否撞墙。if( x == food_x && y == food_y )//检测是否吃掉苹果。case 'W' ://按下W，向上。case 'w' ://按下w，向上。case 'S' ://按下S，向下。case 'A' ://按下A，向左。case 'a' ://按下a，向左。case 'D' ://按下D，向右。case 'd' ://按下d，向右。
从零开始实现贪吃蛇(完整代码)
qq_65898266的博客
06-26 5856
本文将分为三个部分来讲解贪吃蛇的实现，分为贪吃蛇开始前的游戏画面、游戏中画面、游戏结束画面，那我们开始吧！
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
A_D_H_E_R_E的博客
08-20 4028
通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题。
200行代码搞定贪吃蛇小游戏 C语言
m0_51323582的博客
06-27 606
1122。
前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整
weixin_62848089的博客
12-26 3040
游戏实现很简单，只写游戏主体的话只要三小时就够了。话不多说，我们直接来看效果预览。转成gif图之后有点卡，但是游戏效果并不卡，非常流畅。简单描述一下这个游戏分为两种模式，普通模式和困难模式。普通模式里面如果撞到墙会死，或者撞到自己也会死。困难模式多设置了一些障碍物，如果撞到障碍物也会死，同时速度会更快，难度更大。每个模式的界面下方都会记录一个当前得分和最高得分。为了游戏的完整性，我还写了一个游戏的入口界面，和用户的注册界面。代码的每一块都有注释。
贪吃蛇游戏代码详解
createcoder的博客
05-22 1112
内容目录什么是帧帧 如果时间片足够小 就是动画 一秒 三十帧 六十帧 连起来就是动画 拆分就是静态的图片 键盘监听 定时器 Timer代码步骤在功能集合类中 重点 （步骤） 1 先定义数据 2 先用画笔将数据画上去 3 加入到监听事件中 （键盘监听事件或者是事件监听事件） 总结重点：for循环的时候要注意i的初始值为0或者是1 都有不同重要的意思 有可能导致结果不一样思考贪吃蛇是怎么动起来的？在事件监听中 创建一个定时器 让小蛇运动起来 以ms为单位 1000ms为1s 重点： 由于需要这个定时器
编写一段前端代码,可以实现贪吃蛇小游戏
02-25
可以使用以下代码实现贪吃蛇小游戏： 贪吃蛇小游戏 #canvas { border: 1px solid #ccc; } 你的浏览器不支持canvas元素 // 画布和画笔 var canvas = document.getElementById("canvas"); var context ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一花一world

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

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

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

打赏作者

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

抵扣说明：

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

余额充值