Question

每当我收集一个苹果时，我就会有一个Snake游戏。苹果将在碰撞时消失，一个新的苹果在一个新的位置产生，但由于某种原因，第一个苹果然后在其原始位置重新生成。然后，当我收集新产生的第二个苹果时，前两个苹果消失，第三个苹果在新的位置产生，但第一个和第二个苹果然后在原始位置重生，这个过程继续......

只有最新生的苹果能够检测到与蛇的碰撞并产生新的苹果。

我有一个Apple类来跟踪它的x和y坐标以及一个由苹果和蛇组成的SnakeGame类。收集苹果时，我将SnakeGame.apple属性设置为null，然后创建一个具有新x，y坐标的新Apple对象，并将其设置为新的SnakeGame.apple对象。

任何解决这个问题的想法都会受到赞赏！

如果你想玩我的代码，那就是小提琴：https://jsfiddle.net/gabewest1/knuxsa5t/1/

Apple Class：

class Apple {
  constructor(x, y) {
    this.xPos = x;
    this.yPos = y;
    this.radius = 10;
  }

  draw(ctx) {
    ctx.fillStyle = "black";
    ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI);
    ctx.fill();
  }

  position(x, y) {
    if (x > -100 && y > -100) {
      this.xPos = x;
      this.yPos = y;
    } else {
      return {
        x: this.xPos,
        y: this.yPos
      };
    }
  }
}

SnakeGame课程：

class SnakeGame {
    constructor(snake) {
        this.ctx = $("#myCanvas")[0].getContext("2d");
        this.canvas = $("#myCanvas")[0];
        this.init();

        this.frameLength = 500;
        this.apple = this.createApple();
        this.snake = snake;

        this.score = 0;
        this.gameloop();
    }

    createApple() {
        var xPos = Math.floor(Math.random() * this.canvas.width);
        var yPos = Math.floor(Math.random() * this.canvas.height);
        var apple = new Apple(xPos, yPos);
        return apple;
    }

    gameloop() {
        var ctx = this.ctx;

        this.snake.move();

        if (this.collision()) {
            console.log("There was a collision!");
            this.score++;
            this.increaseSnake();
            this.apple = null;
        }

        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.snake.draw(ctx);

        if (this.apple) {
        this.apple.draw(ctx);
        } else {
            this.apple = this.createApple();
        }

        setTimeout($.proxy(this.gameloop, this), this.frameLength);
     }
}

Answer 1

在创建弧之前，只需添加ctx.beginPath();。

ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radius, 0, 2 * Math.PI);
ctx.fill();

ctx会跟踪创建的每个弧线，并将fill应用于所有这些形状。

苹果在Snake游戏中没有正确产卵

1 个答案: