0

I'm trying to make a simple game (move a block for now) on my own. One of my class functions, that updates the game context has a method, update(), that calls on to other methods of the same class, displBackground() and displCharacters(). When I see the console on my browser, I see the following message: TypeError: this.displBackground is not a function

I've seen through:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function
Not able to call method within another method of the same class JS
(And some others, including quite some SO questions, I'm running out of time, so I will list them later) I've not tried declaring the object directly instead of from a class, but I will save that for last resort.

const gameContext = class {
constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval(this.update, 20);
};
addCharacter(char) {
    this.characters.push(char)
}
displBackground() {
    this.ctx.fillStyle = '#eeeeff';
    this.ctx.fillRect(0, 0, this.c.width, this.c.height);
}
displCharacters() {
    if (this.characters == 0) return
    for (var i = 0; i < this.characters.length; i++) {
        var character = this.characters[i];
        this.ctx.fillStyle = character.color;
        this.ctx.fillRect((character.pos[0]-character.size),
                          (character.pos[1]-character.size),
                          (character.pos[0]+character.size),
                          (character.pos[1]+character.size));
    }
}
update() {
    this.displBackground();
    this.displCharacters();
    console.log(KEYMAP); // This is a function that tells me what keys are currently pressed, and works well isolated.
}
}

I would like to see the canvas updating 50 times a second as time goes, and later on make sure that the block can move (displBackground draws the background while dsplCharacters draws the characters, on top)

Kiroto
  • 3
  • 1

1 Answers1

0

bind the methods in your constructor and you are good to go.

constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval(this.update, 20);


    this.update = this.update.bind(this);
    this.displBackground = this.displBackground.bind(this);
    this.displCharacters = this.displCharacters.bind(this);
};

what is happening is that

this.interval = setInterval(this.update, 20);

is not binding this to the this.update function.

another way to solve it is:

constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.characters = [];
    this.interval = setInterval( ()=> this.update(), 20);

};
Prince Hernandez
  • 3,623
  • 1
  • 10
  • 19