当前位置: article > 正文

用javascript制作网页贪吃蛇游戏_js贪吃蛇游戏代码

作者：天景科技苑 | 2024-08-19 08:18:57

踩

js贪吃蛇游戏代码


<!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;
}
 
//

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/1001451