用javascript制作网页贪吃蛇游戏

最新推荐文章于 2025-03-18 07:52:26 发布

范式5N

最新推荐文章于 2025-03-18 07:52:26 发布

阅读量682

点赞数

文章标签： javascript 游戏 java

本文链接：https://blog.youkuaiyun.com/2301_78098294/article/details/131004145

版权

本文展示了如何使用HTML5的Canvas元素和JavaScript编写一个简单的贪吃蛇游戏。代码包括了初始化画布、定义蛇和食物的位置、绘制蛇和食物、移动蛇的逻辑以及生成随机食物的算法。游戏规则是蛇吃到食物会增长，碰到边界或自身身体则游戏结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
  </body>
</html>


        
javascript
复制代码

// 定义画布和上下文
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// 定义贪吃蛇的初始位置和大小
let snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }];
let food = {};
let score = 0;
let speed = 100;

// 定义绘制贪吃蛇的函数
function drawSnake() {
  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = "#00FF00"; // 贪吃蛇的身体颜色为绿色
    ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10); // 每个方块的大小为10像素
  }
}

// 定义绘制食物的函数
function drawFood() {
  ctx.fillStyle = "#FF0000"; // 食物的颜色为红色
  ctx.fillRect(food.x * 10, food.y * 10, 10, 10); // 每个方块的大小为10像素
}

// 定义移动贪吃蛇的函数
function moveSnake() {
  let head = getHead(); // 获取贪吃蛇的头部位置
  let newHead = { x: head.x + dx, y: head.y + dy }; // 根据方向计算新的头部位置

  if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height) return; // 如果新的位置超出了画布范围，则返回

  if (newHead === food) food = generateFood(); // 如果新的位置是食物，则生成新的食物位置并更新食物状态
  else snake.pop(); // 如果新的位置不是食物，则删除最后一个身体块并将头部移动到新的位置上

  snake.unshift(newHead); // 将新的头部位置添加到贪吃蛇的前面，形成新的贪吃蛇身体块序列
}

// 定义生成随机食物位置的函数
function generateFood() {
  let x = Math.floor(Math.random() * canvas.width); // 在画布上随机生成一个位置作为食物位置
  let y = Math.floor(Math.random() * canvas.height); // 在画布上随机生成一个位置作为食物位置

  while (snake.some((segment) => segment.x === x && segment.y === y)) x = Math.floor(Math.random() * canvas.width); // 如果食物位置已经被贪吃蛇占据，则重新生成一个新的食物位置


// 定义画布和上下文
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// 定义贪吃蛇的初始位置和大小
let snake = [{ x: 10, y: 10 }, { x: 9, y: 10 }];
let food = {};
let score = 0;
let speed = 100;

// 定义绘制贪吃蛇的函数
function drawSnake() {
  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = "#00FF00"; // 贪吃蛇的身体颜色为绿色
    ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10); // 每个方块的大小为10像素
  }
}

// 定义绘制食物的函数
function drawFood() {
  ctx.fillStyle = "#FF0000"; // 食物的颜色为红色
  ctx.fillRect(food.x * 10, food.y * 10, 10, 10); // 每个方块的大小为10像素
}

// 定义移动贪吃蛇的函数
function moveSnake() {
  let head = getHead(); // 获取贪吃蛇的头部位置
  let newHead = { x: head.x + dx, y: head.y + dy }; // 根据方向计算新的头部位置

  if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height) return; // 如果新的位置超出了画布范围，则返回

  if (newHead === food) food = generateFood(); // 如果新的位置是食物，则生成新的食物位置并更新食物状态
  else snake.pop(); // 如果新的位置不是食物，则删除最后一个身体块并将头部移动到新的位置上

  snake.unshift(newHead); // 将新的头部位置添加到贪吃蛇的前面，形成新的贪吃蛇身体块序列
}

// 定义生成随机食物位置的函数
function generateFood() {
  let x = Math.floor(Math.random() * canvas.width); // 在画布上随机生成一个位置作为食物位置
  let y = Math.floor(Math.random() * canvas.height); // 在画布上随机生成一个位置作为食物位置

  while (snake.some((segment) => segment.x === x && segment.y === y)) x = Math.floor(Math.random() * canvas.width); // 如果食物位置已经被贪吃蛇占据，则重新生成一个新的食物位置

  food.x = x; // 将新的食物位置保存下来
  food.y = y;
}

//