括号p5.js“未捕获的TypeError：无法读取未定义的属性'offscreen'”

Question

I am learning about Neural Networks(and learning JS at the same time) at the moment and wanted to start with a little game in Javascript to implement my learned stuff. So first things first, create a game, shouldn't be too hard right? Well.. Looks like I am too blind to find the mistake, so I would be really glad if someone could help me.

I am getting the following error message: "Uncaught TypeError: Cannot read property 'offscreen' of undefined".

It occurs when the player dies. I guess it has to do with the array being cleared when "resetting" and maybe the for-loop then still tries to delete the offscreen pipe, but it cant, as the array is empty or something like this. Dont know how to fix that tho..

https://thumbs.gfycat.com/WanDifficultAnaconda-size_restricted.gif

The Game is just an easy "objects come flying to you and you gotta jump over them".

Here's the whole code, it really isnt much:

sketch.js

let obstacle;
let player;
let obstacles = [];

let score = 0;
let highscore = 0;

function setup() {
    createCanvas(600, 600);
    obstacle = new Obstacle();
    player = new Player();
}

function draw() {
    background(0, 128, 128);

    for(let i = obstacles.length-1; i >= 0; i--) {

        if(obstacles[i].hits(player)) {
            reset();
        }

        if(obstacles[i].offscreen()) {
            obstacles.splice(i, 1);
        }
        obstacles[i].show();
        obstacles[i].update();

    }

    player.show();
    player.update();
    score++;
    currentScore();
    newhighscore();

    if(frameCount % 100 == 0) {
        obstacles.push(new Obstacle());
    }



}


function keyPressed() {
    if(keyCode == 87 && player.y + player.h == height) {
        player.jump();
    }
}

function reset() {
    if(score > highscore) {
        highscore = score;
    }
    obstacles = [];
    score = 0;
    player = new Player();

}

function currentScore() {
    strokeWeight(0);
    stroke(102,205,170);
    fill(14,47,68);
    textSize(24);
    text(score, 10, 30);
}

function newhighscore() {
    strokeWeight(0);
    stroke(102,205,170);
    fill(14,47,68);
    textSize(16);
    text(highscore, 11, 48);
}

player.js

class Player {
    constructor() {
        this.x = 100;
        this.h = 30;
        this.w = this.h;
        this.y = height - this.h;
        this.gravity = 0.5;  
        this.lift = -9; 
        this.velocity = 0;
    }

    show() {
        fill(0);
        rect(this.x, this.y, this.w, this.h);
    }

    update() {
        this.velocity += this.gravity;
        this.y += this.velocity;

        if(this.y + this.h > height) {
            this.y = height - this.h;
            this.velocity = 0;
        }

    }

    jump() {
        this.velocity += this.lift;
    }

}

obstacle.js

class Obstacle {
    constructor() {
        this.x = width;
        this.h = random(30, 50);
        this.w = this.h; 
        this.y = height-this.h;
        this.speed = 5;
    }

    show() {
        noStroke();
        fill(255, 115, 115);
        rect(this.x, this.y, this.w, this.h); 
    }

    update() {
        this.x -= this.speed;
    }

    offscreen() {
        if(this.x < -width) {
            return true;
        } else {
            false;
        }
    } 

    hits(player) {
        if(player.x <= this.x + this.w && player.x + player.w >= this.x) {
            if(player.y + player.h >= this.y) {
                return true;
            } else {
                return false;
            }
        }
    }
}

Answer 1

My Solution

Explanation

Yeah you had the reason correct, when reset() is called, it changes to obstacles = [] but the

    for(let i = obstacles.length-1; i >= 0; i--) {
        if(obstacles[i].hits(player)) {
        reset();
        ...*Continued*
    }

in your draw function still continues. So you just had to add break; in the hit condition after reset. See in the link I've uploaded it works completely fine.

    for(let i = obstacles.length-1; i >= 0; i--) {
        if(obstacles[i].hits(player)) {
        reset();
        break;
        ...*Continued*
    }

When you add break, the for loop terminates and moves down to the functions that follow. Since obstacles = [] is empty, undefined error is not shown as empty indexes are not accessed.