my question is that the I am accessing an array from another class but continuously this error is showing after making so many changes this error is still showing. Array is updating but not accessible from another class

window.addEventListener('load',function(){
    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    canvas.width = 1500;
    canvas.height= 500;



    class InputHandler{
        constructor(game){
            this.game = game;
            window.addEventListener('keydown', e =>{

                if((( e.key === 'ArrowUp') || (e.key == 'ArrowDown'))  && this.game.keys.indexOf(e.key) === -1  ){
                    this.game.keys.push(e.key);
                }
                console.log(this.game.keys);
            });

            window.addEventListener('keyup',e=> {
                if(this.game.keys.indexOf(e.key) > -1){
                    this.game.keys.splice(this.game.keys.indexOf(e.key),1);
                }
            });
        }

    }

    class player{
        constructor(game){
            this.game = game;
            this.width = 120;
            this.height = 190;
            this.x = 20;
            this.y = 100;
            this.speedY = 0;
            this.maxspeed = 2;
        }

        update(){
            this.y  = this.speedY;
            if(this.game.keys.includes('ArrowUp')) this.speedY = -1; 
                  // error on this line while executing 
            

        }

        draw(context){
            context.fillRect(this.x,this.y,this.width,this.height);
        }

    }

    class Game{
        
        constructor(width,height){
            this.width = width;
            this.height = height;
            this.player = new player(Game);
            this. Input = new InputHandler(this);
            this.keys = [];
        }

        update(){
            this.player.update();
        }

        draw(context){
            this.player.draw(context);
        }
    }

    const game = new Game(canvas.width,canvas.height);

    // animation loop

    function animat(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        game.update();
        game.draw(ctx);
        requestAnimationFrame(animat);
    }

    animat();
});

i tried to implement eventhandler class in player.Update() method but still showing the error.

CodePudding user response：

It looks like the problem is with the line if(this.game.keys.includes('ArrowUp')) this.speedY = -1;. It seems like this.game.keys is undefined when you try to access it.

One possible reason for this is that this.game.keys is not defined in the player class, but you are trying to access it in the player.update() method. To fix this, you could define this.game.keys in the player class and pass it in as an argument to the player.update() method.

Here's an example of how you could do this:

class player {
  constructor(game, keys) {
    this.game = game;
    this.width = 120;
    this.height = 190;
    this.x = 20;
    this.y = 100;
    this.speedY = 0;
    this.maxspeed = 2;
    this.keys = keys;  // add this line to save the keys
  }

  update() {
    this.y  = this.speedY;
    if (this.keys.includes('ArrowUp')) this.speedY = -1;  // access this.keys instead of this.game.keys

    // ... other code
  }

  // ... other code
}

Then, in the Game class, you would need to pass the keys array to the player class when you create a new player object:

class Game {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.keys = [];
    this.player = new player(this, this.keys);  // pass in this.keys as an argument to the player class
    this.Input = new InputHandler(this);
  }

  // ... other code
}

This should fix the error you are seeing and allow you to access the keys array in the player.update() method.

CodePudding user response：

The error you're getting is because this.game.keys is undefined in the update method of the player class. This is because you're trying to access the game property of this directly, but this refers to the player instance, not the Game instance.

To fix this, you can pass the game instance as an argument to the update method, and then use that argument to access the keys property. Here is an example of how you can do this:

class player {
  // ...

  update(game) {
    this.y  = this.speedY;
    if (game.keys.includes('ArrowUp')) this.speedY = -1;
  }

  // ...
}

You would need to make a similar change in the draw method of the player class, where you would also need to pass the game instance as an argument and use it to access the keys property.

You would also need to update the update method of the Game class to pass the game instance as an argument to the update methods of the player and InputHandler classes:

class Game {
  // ...

  update() {
    this.player.update(this);
    this.Input.update(this);
  }

  // ...
}