Javascript贪吃蛇游戏意外结束输入错误

rkkpypqq  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(119)

我是一个Javascript初学者,现在我们必须为学校写一个Javascript蛇游戏,当你死的时候它会显示死亡信息。
当你碰到蛇本身或墙壁时,你就会死。你吃一个苹果就会得到积分。
它还应该在你死的时候发出声音,在你吃苹果的时候发出声音(这是我的主要问题)。
我尝试了许多youtube教程和我在这里找到的东西,也有我在互联网上的其他网站上找到的东西,但似乎没有什么真正的工作。
我也觉得吃苹果算游戏不太好用,帮帮忙,我们这门课没人知道怎么做,可能是因为我们是化学工程师,不太懂编程,尤其是用Javascript编程。
下面是代码:

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

// Set the dimensions of the canvas
canvas.width = 500;
canvas.height = 500;

// Set the size of each cell in the grid
const cellSize = 20;

// Set the initial position and direction of the snake
let x = 0;
let y = 0;
let dx = 1;
let dy = 0;

// Set the initial length of the snake
let length = 5;

// Set the initial position of the apple
let appleX = 10;
let appleY = 10;

// Set the score to 0
let score = 0;

// Create an array to store the positions of the snake's body
const body = [];

// Create the audio elements for the death and eating sounds
const deathSound = new Audio('death.mp3');
const eatSound = new Audio('eat.mp3');

// Draw the grid lines on the canvas
function drawGrid() {
  for (let i = 0; i <= canvas.width; i += cellSize) {
    ctx.moveTo(i, 0);
    ctx.lineTo(i, canvas.height);
  }
  for (let i = 0; i <= canvas.height; i += cellSize) {
    ctx.moveTo(0, i);
    ctx.lineTo(canvas.width, i);
  }
  ctx.strokeStyle = '#ccc';
  ctx.stroke();
}

// Draw the snake on the canvas
function drawSnake() {
  // Shift the first element off the array and add the new position to the end
  body.shift();
  body.push({ x, y });

  // Draw each cell of the snake's body
  for (let i = 0; i < body.length; i++) {
    ctx.fillStyle = (i === body.length - 1) ? 'green' : 'white';
    ctx.fillRect(body[i].x, body[i].y, cellSize, cellSize);
  }
}

// Draw the apple on the canvas
function drawApple() {
  ctx.fillStyle = 'red';
  ctx.fillRect(appleX, appleY, cellSize, cellSize);
}

// Move the snake and check for collision with the walls or itself
function moveSnake() {
  // Update the position of the snake
  x += dx * cellSize;
  y += dy * cellSize;

  // Check if the snake has collided with a wall
  if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
    deathSound.play();
    alert('You died! Your score was: ' + score);
    return;
  }

  // Check if the snake has collided with itself
  for (let i = 0; i < body.length - 1; i++) {
    if (x === body[i].x && y === body[i].y) {
      deathSound.play();
      alert('You died! Your score was: ' + score);
      return;
    }
  }

如果有人能帮助我,我将非常感激。

brgchamk

brgchamk1#

好的。检查一下,我猜你的声音找不到了。检查一下浏览器控制台记录了什么。用另一个网站的声音,它工作了。我还添加了一个setInterval来调用所有的函数

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

      // Set the dimensions of the canvas
      canvas.width = 500;
      canvas.height = 500;

      // Set the size of each cell in the grid
      const cellSize = 20;

      // Set the initial position and direction of the snake
      let x = 0;
      let y = 0;
      let dx = 1;
      let dy = 0;

      // Set the initial length of the snake
      let length = 5;

      // Set the initial position of the apple
      let appleX = 10;
      let appleY = 10;

      // Set the score to 0
      let score = 0;

      // Create an array to store the positions of the snake's body
      const body = [];

      // Create the audio elements for the death and eating sounds
      const deathSound = new Audio('death.mp3');
      const eatSound = new Audio('eat.mp3');

      const pepsi = new Audio(
        'https://www.freesoundslibrary.com/wp-content/uploads/2021/06/ding-ding-sound-effect.mp3'
      );

      // Draw the grid lines on the canvas
      function drawGrid() {
        for (let i = 0; i <= canvas.width; i += cellSize) {
          ctx.moveTo(i, 0);
          ctx.lineTo(i, canvas.height);
        }
        for (let i = 0; i <= canvas.height; i += cellSize) {
          ctx.moveTo(0, i);
          ctx.lineTo(canvas.width, i);
        }
        ctx.strokeStyle = '#ccc';
        ctx.stroke();
      }

      // Draw the snake on the canvas
      function drawSnake() {
        // Shift the first element off the array and add the new position to the end
        body.shift();
        body.push({ x, y });

        // Draw each cell of the snake's body
        for (let i = 0; i < body.length; i++) {
          ctx.fillStyle = i === body.length - 1 ? 'green' : 'white';
          ctx.fillRect(body[i].x, body[i].y, cellSize, cellSize);
        }
      }

      // Draw the apple on the canvas
      function drawApple() {
        ctx.fillStyle = 'red';
        ctx.fillRect(appleX, appleY, cellSize, cellSize);
      }

      // Move the snake and check for collision with the walls or itself
      function moveSnake() {
        // Update the position of the snake
        x += dx * cellSize;
        y += dy * cellSize;

        // Check if the snake has collided with a wall
        if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
          deathSound.play();
          // alert('You died! Your score was: ' + score);
          canvas.style.backgroundColor = '#ff0000';
          pepsi.play();
          return;
          swda;
        }

        // Check if the snake has collided with itself
        for (let i = 0; i < body.length - 1; i++) {
          if (x === body[i].x && y === body[i].y) {
            deathSound.play();
            // alert('You died! Your score was: ' + score);
            canvas.style.backgroundColor = '#ff0000';
            pepsi.play();
            return;
          }
        }
      }

      function draw() {
        drawGrid();

        drawSnake();
        moveSnake();
        drawApple();
      }

      setInterval(function () {
        draw();
      }, 500);
canvas {
        border: 1px solid green;
      }
<canvas id="canvas" height="100" width="100"></canvas>

相关问题