Javascript 得到一个；无法读取属性'；getFoodX'；“未定义”的定义；错误

因此，我试图编写一个基本的Snake游戏，并得到一个未定义的错误，尽管我在查看代码后没有发现任何错误。当删除导致getFood错误的if条件时，我得到了与this.apple.getFoodX相同的错误

class Game {

    constructor(canvas, extent) {
        this.canvas = canvas;
        this.extent = extent;
        this.cellSize = canvas.width / extent;
        this.context = canvas.getContext('2d'); 
        this.initGame();
        this.gameOver = false;
        setInterval(x => {
            this.loop()
        }, 350);
    }

    drawLine(x1, y1, x2, y2) {
        this.context.beginPath();
        this.context.moveTo(x1, y1);
        this.context.lineTo(x2, y2);
        this.context.stroke();

    }

    drawGrid() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        for (let i = 1; i <= this.extent; i++) {
            this.drawLine(i * this.cellSize, 0, i * this.cellSize, this.canvas.height);
            this.drawLine(0, i * this.cellSize, this.canvas.width, i * this.cellSize);
        }
    }

    newApple() {
        this.apple.create(this.extent);
    }

    getAppleX() {
        return this.apple.getFoodX();
    }
    getAppleY() {
        return this.apple.getFoodY();
    }
    getExtent() {
        return this.extent;
    }
    genFood() {
        this.apple.create(extent);
    }

    loop() {
        if(this.gameOver === false) {
            this.snake.update();
        }
        if(this.gameOver === false) {
            this.drawGrid();
            this.snake.draw();
            this.apple.draw();
        }

    }
    draw() {
        this.drawGrid();
        this.snake.draw();
        this.apple.draw();

    }

    initGame() {
        this.snake = new Snake([{x:7,y:8},{x:8,y:8},{x:9,y:8,}],this.cellSize, this.context, this.extent, 'ArrowRight');
        this.apple = new Apple(5,10,this.cellSize,this.context);
    }
    gameEnds() {
        this.gameOver = true;
    }
}

class Apple{
    constructor(x,y,cellSize,context) {
        this.x = x;
        this.y = y;
        this.cellSize = cellSize;
        this.context = context;
        this.newApple = {x:0,y:0};
    }

    draw() {
        this.context.fillStyle = 'green';
        this.context.fillRect(this.x * this.cellSize, this.y * this.cellSize, this.cellSize, this.cellSize);
    }

    create(extent) {
        this.newApple = {x: Math.floor(Math.random() * extent),y: Math.floor(Math.random() * extent)};
        this.x = this.newApple.x;
        this.y = this.newApple.y;

        for(let i = 0; i < this.snake.snakeArray.length; i++) {
            if (this.newApple.x == this.snake.snakeArray[i].x && this.newApple.y == this.snake.snakeArray[i].y) {
                this.newApple = {x: Math.floor(Math.random() * extent),y: Math.floor(Math.random() * extent)};
                this.x = this.newApple.x;
                this.y = this.newApple.y;
            }
        }
    }
    getFoodX() {
        return this.x;
    }
    getFoodY(){
        return this.y;
    }
}

class Snake {
    constructor(snakeArray, cellSize,context,extent,pressedKey) {
        this.cellSize = cellSize;
        this.context = context;
        this.extent = extent;
        this.pressedKey = pressedKey;
        this.snakeArray = snakeArray;
        //this.snakeArray.push(startingPos);
        this.snakeHead = {x: this.snakeArray[this.snakeArray.length-1].x, y:this.snakeArray[this.snakeArray.length-1].y}; 
        document.addEventListener('keyup', event => {
            this.handleKeyUp(event);
        });
    }

    handleKeyUp(event) {
        if (event.code === 'ArrowUp' || event.code === 'ArrowDown' || event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
            this.pressedKey = event.code;
        }
    }

    update() {
        let newSnakeHead = {x:0,y:0};
        if (this.pressedKey === 'ArrowUp') {
            newSnakeHead = {x: this.snakeHead.x, y: this.snakeHead.y-1};
        } else if (this.pressedKey === 'ArrowRight') {
            newSnakeHead = {x: this.snakeHead.x+1, y: this.snakeHead.y};
        } else if (this.pressedKey === 'ArrowDown') {
            newSnakeHead = {x: this.snakeHead.x, y: this.snakeHead.y+1};
        } else if (this.pressedKey === 'ArrowLeft') {
            newSnakeHead = {x: this.snakeHead.x-1, y: this.snakeHead.y};
        }
        if(newSnakeHead.x === this.game.getFoodX() && newSnakeHead.y === this.game.getFoodY()) {
            this.snakeArray.push(newSnakeHead);
            this.game.genFood(); 
        }
        else {
            this.snakeArray.shift();
            if(this.outOfBounds(newSnakeHead, this.extent) === true || this.snakeHit(newSnakeHead, this.extent) === true) {
                this.game.gameEnds();
            }
            else{
                this.snakeArray.push(newSnakeHead);
            }
            }
    }
    draw() {
        for(let i = 0; i< this.snakeArray.length-1; i++) {
            this.drawSquare(this.snakeArray[i].x, this.snakeArray[i].y, 'red');
        }
        this.drawSquare(this.snakeHead.x,this.snakeHead.y,'yellow');
    }

    outOfBounds(newSnakeHead,extent) {
        if(newSnakeHead.x > extent || newSnakeHead.x < 0 || newSnakeHead.y > extent || newSnakeHead.y < 0 ) {
            this.game.gameEnds();
            return true;
        }
    }

    snakeHit(newSnakeHead) {
            for(let i = 0; i< this.snakeArray.length; i++) {
                if (newSnakeHead.x == this.snakeArray[i].x && newSnakeHead.y == this.snakeArray[i].y) {
                    this.game.gameEnds();
                    return true;
                }
            }
    }

    drawSquare(x,y,color) {
        this.context.fillStyle = color;
        this.context.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize);
    }
}

const canvas = document.getElementById('myCanvas');
const game = new Game(canvas, '16');

类游戏{
构造函数（画布、范围）{
this.canvas=画布；
这个范围=范围；
this.cellSize=canvas.width/extent；
this.context=canvas.getContext（'2d'）；
这个.initGame（）；
this.gameOver=false；
设置间隔（x=>{
this.loop（）
}, 350);
}
抽绳（x1、y1、x2、y2）{
this.context.beginPath（）；
这个.context.moveTo（x1，y1）；
this.context.lineTo（x2，y2）；
this.context.stroke（）；
}
drawGrid（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
for（设i=1；i{
本.handleKeyUp（事件）；
});
}
handleKeyUp（事件）{
如果（event.code==='ArrowUp'| | event.code==='ArrowDown'| | event.code=='ArrowLeft'| | event.code=='ArrowRight'）{
this.pressedKey=event.code；
}
}
更新（）{
让newSnakeHead={x:0，y:0}；
如果（this.pressedKey==='ArrowUp'）{
newSnakeHead={x:this.snakeHead.x，y:this.snakeHead.y-1}；
}否则如果（this.pressedKey==='ArrowRight'）{
newSnakeHead={x:this.snakeHead.x+1，y:this.snakeHead.y}；
}否则如果（this.pressedKey==='ArrowDown'）{
newSnakeHead={x:this.snakeHead.x，y:this.snakeHead.y+1}；
}否则如果（this.pressedKey==='ArrowLeft'）{
newSnakeHead={x:this.snakeHead.x-1，y:this.snakeHead.y}；
}
if（newSnakeHead.x==this.game.getFoodX（）&&newSnakeHead.y==this.game.getFoodY（））{
this.snakeArray.push（newSnakeHead）；
这个.game.genFood（）；
}
否则{
这个.snakeArray.shift（）；
if（this.outOfBounds（newSnakeHead，this.extent）==true | | this.snakehead（newSnakeHead，this.extent）==true）{
this.game.gameEnds（）；
}
否则{
this.snakeArray.push（newSnakeHead）；
}
}
}
画（）{
for（设i=0；iextent | | newSnakeHead.x<0 | | newSnakeHead.y>extent | | newSnakeHead.y<0）{
this.game.gameEnds（）；
返回true；
}
}
蛇头（新闻头目）{
for（设i=0；i

---

感谢您的帮助

您正试图使用

此

访问Snake类中的

游戏

对象，但它不是Snake类的一部分。因此我认为，在

Snake

类中的

update（）

方法中，以下语句是罪魁祸首：-

if(newSnakeHead.x === this.game.getFoodX() && newSnakeHead.y === this.game.getFoodY()) {
            this.snakeArray.push(newSnakeHead);
            this.game.genFood(); 
        }

您可以在Snake构造函数中创建对游戏的引用，如：-

constructor(snakeArray, cellSize,context,extent,pressedKey,game) {
        this.cellSize = cellSize;
        this.context = context;
        this.extent = extent;
        this.pressedKey = pressedKey;
        this.snakeArray = snakeArray;
        this.game = game;
        //this.snakeArray.push(startingPos);
        this.snakeHead = {x: this.snakeArray[this.snakeArray.length-1].x, y:this.snakeArray[this.snakeArray.length-1].y}; 
        document.addEventListener('keyup', event => {
            this.handleKeyUp(event);
        });
    }

在游戏课上：-

initGame() {
        this.snake = new Snake([{x:7,y:8},{x:8,y:8},{x:9,y:8,}],this.cellSize, this.context, this.extent, 'ArrowRight',this);
        this.apple = new Apple(5,10,this.cellSize,this.context);
    }

---

传递附加的

此

参数。这将帮助您在

Snake

类中设置对

game

属性的正确引用。

您正试图使用

this

访问Snake类中的

game

对象，但它不是Snake类的一部分。因此我认为，在

Snake

类中的

update（）

方法中，以下语句是罪魁祸首：-

if(newSnakeHead.x === this.game.getFoodX() && newSnakeHead.y === this.game.getFoodY()) {
            this.snakeArray.push(newSnakeHead);
            this.game.genFood(); 
        }

您可以在Snake构造函数中创建对游戏的引用，如：-

constructor(snakeArray, cellSize,context,extent,pressedKey,game) {
        this.cellSize = cellSize;
        this.context = context;
        this.extent = extent;
        this.pressedKey = pressedKey;
        this.snakeArray = snakeArray;
        this.game = game;
        //this.snakeArray.push(startingPos);
        this.snakeHead = {x: this.snakeArray[this.snakeArray.length-1].x, y:this.snakeArray[this.snakeArray.length-1].y}; 
        document.addEventListener('keyup', event => {
            this.handleKeyUp(event);
        });
    }

在游戏课上：-

initGame() {
        this.snake = new Snake([{x:7,y:8},{x:8,y:8},{x:9,y:8,}],this.cellSize, this.context, this.extent, 'ArrowRight',this);
        this.apple = new Apple(5,10,this.cellSize,this.context);
    }

---

传递附加的

此

参数。这将帮助您在

Snake

类中设置对

game

属性的正确引用。

非常感谢。这修复了所有错误。现在我的蛇对按键没有反应，也不动了。非常感谢。这修复了所有错误。现在我的蛇对按键没有反应，也不动了。。