Question

I was playing around with making game in JS. And hit a brick wall which is inability to change a variable from an event in the main html file. Namely speaking offSetX. Why it doesn’t change?

var game = new Game();
window.addEventListener("keyup", game.input);
game.start('myCanvas');

The game object looks like this:

function Game() {
    
    this.offSetX = 0;

    this.init = function (id) {

        this.canvas = document.getElementById(id);
        this.context = this.canvas.getContext('2d');
        this.blocks = [];
        this.blocks.push(new block());

    };

    this.logic = function () {
        for (var i in this.blocks) {
            this.blocks[i].update(this.offSetX);
        }
    };

    this.draw = function () {
        for (var i in this.blocks) {
            this.blocks[i].draw(this.context);
        }
    };

    this.main = function () {
        this.logic();
        this.draw();
        console.log(this.offSetX);
    };
    this.input = function (key) {

        if (key.keyCode == 37) {
            this.offSetX--;
            console.log(this.offSetX);
        }
        if (key.keyCode == 39) {
            this.offSetX++;
            console.log(this.offSetX);
        }


    };


    this.start = function (id) {
        var _this = this;

        this.init(id);
        this.interval = setInterval(function () {
            _this.canvas.width = _this.canvas.width;
            _this.main();
        }, 30);
    }
};

Answer 1

Try this:

window.addEventListener("keyup", function(key){
   game.input.apply(game,[key]);
});

The problem was by window.addEventListener("keyup", game.input) line , you are adding handler for window object, that’s why in input method , "this" is window object(which does not have any "offSetX" method), not the game object.