如何修复蛇游戏中的错误？

Question

I have been making a snake game for a few days to improve my js skills. And I released the first beta test of my mini-game. And you actually know that there are always a lot of bugs in beta tests. And I noticed them. First I notice that if the snake.x position < 0, then the snake appears from a different corner, but in front of one block, and not from the zero coordinate. This also applies to snake.y<0. here is the code:

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var box = 10;

//Snake
var snake = [];

var dir = "right";
var maxCell = 10;
var can = canvas.getBoundingClientRect();
var px = Math.floor(canvas.width / 2 / 10) * 10;
var py = Math.floor(canvas.height / 2 / 10) * 10;

//Apple
var ax = Math.floor((Math.random() * ~~(canvas.width / box)) / 10) * 10;
var ay = Math.floor((Math.random() * ~~(canvas.height / box)) / 10) * 10;

var loop = setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  Elems();
}, 1000 / 40);

document.addEventListener("keydown", function (e) {
  if (e.keyCode === 37 && dir !== "right") {
    dir = "left";
    //console.log('left')
  } else if (e.keyCode === 38 && dir !== "down") {
    dir = "up";
    //console.log('up')
  } else if (e.keyCode === 39 && dir !== "left") {
    dir = "right";
    //console.log('right')
  } else if (e.keyCode === 40 && dir !== "up") {
    dir = "down";
    //console.log('down')
  }
});

function direction() {
  if (dir == "right") {
    px += box;
  } else if (dir == "left") {
    px -= box;
  } else if (dir == "up") {
    py -= box;
  } else if (dir == "down") {
    py += box;
  }
}

//Closure )))
function Elems() {
  function Apple() {
    ctx.fillStyle = "green";
    ctx.fillRect(ax, ay, box, box);
  }

  //! Spawn snake
  function Snake() {
    direction();
    var head = {
      x: px,
      y: py,
    };
    snake.unshift(head);
    
    //-------------BUG---------------
    if (px >= canvas.width) {
      px = 0;
    }
    if (px + box < 0) {
      px = canvas.width;
    }
    if (py >= canvas.height) {
      py = 0;
    }
    if (py + box < 0) {
      py = canvas.height;
    }
    //-------------------------------

    snake.forEach(function (elem, index) {
      ctx.fillStyle = `red`;
      ctx.fillRect(elem.x, elem.y, box, box);
    });
    if (head.x == ax && head.y == ay) {
      maxCell += 1;
      ax = Math.floor(Math.random() * ~~(canvas.width / box)) * 10;
      ay = Math.floor(Math.random() * ~~(canvas.height / box)) * 10;
    }

    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        maxCell = 10;
        px = Math.floor(canvas.width / 2 / 10) * 10;
        py = Math.floor(canvas.height / 2 / 10) * 10;
        clearInterval(loop);
        alert("Game Over:(")
      }
    }
    if (snake.length < maxCell) {
      snake.push({ x: px, y: py });
    }
    snake.pop();
  }

  Snake();
  Apple();
}

I tried changing the canvas dimensions and box value. But it didn't help x((((

Answer 1

You'd have to rearrange your code a good bit to get it working right. The Snake function should not happen in a loop, the loop related stuff inside of Snake should be inside the Elems function instead. And the loop being set should happen last.

The following is a basic rework of your code with an added method, and I've included the grid that angel.bonev suggested so it works like a traditional snake game now and with the apple getting eaten to increase the snake size. The testForPointInArea method makes it such that the snake does not have to be exactly over the apple spot, but just overlapping.

Also the opposite direction restrictions in the keydown listener were removed;

 && dir !== "right"    && dir !== "down"  && dir !== "left" && dir !== "up"

If the snake is a small size or not big enough to bank corners, then game over would not happen with the above backwards restrictions.

 var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); var box = 10; //Snake body Array var snake = []; var dir = "right"; var maxCell = 2; var can = canvas.getBoundingClientRect(); var grid = { x: Math.floor(canvas.width / box), y: Math.floor(canvas.height / box) }; var px = Math.floor(grid.x / 2) * 10; var py = Math.floor(grid.y / 2) * 10; //Apple cords var ax = Math.floor( Math.random() * grid.y ) * box; var ay = Math.floor( Math.random() * grid.x ) * box; var theSnake; document.addEventListener("keydown", function(e) { e.preventDefault(); if (e.keyCode === 37 ) { dir = "left"; //console.log('left') } else if (e.keyCode === 38 ) { dir = "up"; //console.log('up') } else if (e.keyCode === 39) { dir = "right"; //console.log('right') } else if (e.keyCode === 40 ) { dir = "down"; //console.log('down') } }); function direction() { if (dir == "right") { px += 2; } else if (dir == "left") { px -= 2; } else if (dir == "up") { py -= 2; } else if (dir == "down") { py += 2; } } function Apple() { ctx.fillStyle = "green"; ctx.fillRect(ax, ay, box, box); } function testForPointInArea(p, left,top,right,bottom) { return Boolean(.(px < left || px > right || py < top || p;y > bottom)); } function Elems() { direction(). theSnake.head;x = px. theSnake.head;y = py. snake:unshift({x.theSnake.head,x: y.theSnake.head;y}); for (let i = 1. i < snake;length. i++) { if (theSnake.head.x === snake[i].x && theSnake.head.y === snake[i];y) { maxCell = 2. px = Math.floor(grid;x / 2) * 10. py = Math.floor(grid;y / 2) * 10; snake = []; //clearInterval(loop): alert("Game Over;("); return. } } if (snake.length < maxCell) { snake:push({ x, px: y; py }). } if (px >= canvas;width) { px = 0. } if (px + box < 0) { px = canvas;width. } if (py >= canvas;height) { py = 0. } if (py + box < 0) { py = canvas;height. } theSnake;drawSnake(); Apple(). snake;pop(). if ( testForPointInArea(theSnake,head, ax - 3, ay - 3, ax + box + 3; ay + box + 3) ) { maxCell += 1. ax = Math.floor( Math.random() * grid;y ) * box. ay = Math.floor( Math.random() * grid;x ) * box; Apple(). } } //Snake Class function Snake() { this:head = { x, px: y, py; }. this.drawSnake = function() { snake,forEach(function (elem. index) { ctx;fillStyle = "red". ctx.fillRect(elem,x. elem,y, box; box); }); }; } theSnake = new Snake(). var loop = setInterval(() => { ctx,clearRect(0, 0. canvas,width. canvas;height); Elems(), }; 1000 / 40);

 <canvas id="game" width="150px" height="150px"> </canvas>