Question

我有一个关于班级的蛇游戏：BodyPart，Snake和SnakeGame。 BodyPart类充当组成Snake类的节点，Snake类本质上是BodyParts的链接列表，其方法使用递归来绘制和检索/设置在吃苹果时创建的每个BodyPart的位置。

我正在通过点击鼠标模拟此事件来测试通过吃苹果为Snake添加身体部位。我的问题在于窗口加载时引起的奇怪行为，因为默认情况下<canvas>元素没有焦点所以我必须单击它才能听到<canvas>上的键盘事件。初始点击以提供<canvas>焦点会导致身体部位被创建并添加到蛇中。 我的问题是，当蛇开始移动时，新创建的身体部位不会跟随头部。 仅在几秒钟之后，新创建的身体部位的功能才开始起作用并跟随头部。创建正文部分的额外点击不会产生任何错误，只有第一次点击。

我一直试图找出原因，但不能。我确定当我没有用鼠标点击创建新的身体部位时会解决这个问题，但在这个特定的环境中我真的想知道这种行为的原因！

工作中的主要代码：

gameloop() {
    var ctx = this.ctx;

    this.snake.move();

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

    this.snake.draw(ctx);

    setTimeout($.proxy(this.gameloop, this), this.frameLength);
}
move() {
    var head = this.head;

    //recursively pass back new position for each BodyPart node to be drawn
    head.passBackPosition();

    //get new position for the root node
    switch(this.direction) {
        case "up": 
            head.yPosition -= this.velocity;
            break;

        case "down": 
            head.yPosition += this.velocity;
            break;

        case "left":
            head.xPosition -= this.velocity;
            break;

        case "right":
            head.xPosition += this.velocity;
            break;
    }
}
position(x, y) {
    if(x && y) {
        this.xPosition = x;
        this.yPosition = y; 
    }else {
        return {x:this.xPosition,y:this.yPosition};
    }
}

这是游戏中的一个方面：https://jsfiddle.net/gabewest1/hq8wqwt4/7/

Answer 1

我和你的小提琴一起玩，不跟随头部的身体发生在x == 0或y == 0的边界附近。

阅读你的代码，我发现：

position(x, y) {
    if(x && y) {
        this.xPosition = x;
        this.yPosition = y; 
    }else {
        return {x:this.xPosition,y:this.yPosition};
    }
}

这意味着无论何时处于任何边界，都不会执行以下行：

    this.xPosition = x;
    this.yPosition = y;

解决方案：

position(x, y) {
   this.xPosition = x;
   this.yPosition = y; 
   return {x:this.xPosition,y:this.yPosition};
}

请参阅小提琴：https://jsfiddle.net/vzsf2nee/1/

确定蛇游戏中蛇运动的错误行为

1 个答案: