0

I'm attempting to make a game with a player character. After making the class with the player's height, width, and spawn location, I decided I wanted to implement movement with the keyboard. I made properties that indicate whether a player is supposed to move in a direction with boolean values but when I want to grab those values with the event listener somehow they become undefined and when I try renderanimationframe of the update method I created, there's an error because the values are undefined. Can anyone explain how these boolean values in my constructor magically became undefined?

const gameWindow = document.querySelector('canvas');
const ctx = gameWindow.getContext('2d');

class Character{
    constructor(width,height,x,y,color){
        this.height= height;
        this.width = width;
        this.x = x;
        this.y = y;
        this.color = color;
        this.rightInput = false;
        this.leftInput = false;
        this.upInput = false;

        console.log(this.leftInput,this.upInput,this.rightInput)
    }


    charMovements(e){
        if(e.type=='keydown'){
            if(e.key =='d'){
                this.rightInput = true;
            }
            if(e.key == 'a'){
                this.leftInput = true;
            }

            if(e.key =='w'){
                this.upInput = true;
            }
            console.log(this.leftInput,this.upInput,this.rightInput);
        }
        if(e.type =='keyup'){
            if(e.key=='d'){
                this.rightInput = false;
            }
            if(e.key == 'a'){
                this.leftInput = false;
            }
            if(e.key =='w'){
                this.upInput = false;
            }
        }

   update(){
    // if(this.rightInput == true){
    //     this.x +=1; 
    // }
    // if(this.leftInput == true){
    //     this.x-=1;
    // }
    // if(this.upInput == true){
    //     this.y += 1;
    // }
   }  

    }
let player = new Character(30,30,50,groundLevel,'lightblue');

requestAnimationFrame(player.update);
window.addEventListener('keydown',player.charMovements);
window.addEventListener('keyup',player.charMovements);
Marctherealtwin
  • 1
  • 1
  • 1
    Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – ASDFGerte Mar 18 '21 at 23:58
  • I think you miss a part of code, so far nothing anormal here ! `rightInput` for example cannot be undefined, is it always false maybe but no undefined – KolaCaine Mar 18 '21 at 23:58
  • @ASDFGerte Is not a scoping problem.. – KolaCaine Mar 18 '21 at 23:58
  • @KolaCaine If you think it's not exactly what i linked as dupe target, please explain why. Passing an unbound non-arrow-function that accesses `this` into an event handler looks like precisely, what's happening here. PS: here is some more material to read, when wanted. It's the more broad version, above is more tailored to the specific issue. [how-does-the-this-keyword-work](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – ASDFGerte Mar 19 '21 at 00:04
  • @ASDFGerte Slap me if u want ! My eyes search to find other problems than scoping variables, sorry ! – KolaCaine Mar 19 '21 at 00:09

0 Answers0