0

I am making a game but having some troubles. I create three classes: Player, Block and gameManager. I am having problem with mouse_listener because every time when I try calling loop, instruction or credit, it gives me an Uncaught error saying that undefined is not a function. How do I bypass it?

    function gameManager() {
                this.clear = function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }

                this.update = function () {
                    ctx.drawImage(game_background, 0, game_background.vy);
                    ctx.drawImage(game_background, 0, 800-Math.abs(game_background.vy));

                    if (Math.abs(game_background.vy) > 800) {
                        game_background.vy = 0;
                    }

                    ctx.font = "bold 20px Arial";
                    ctx.fillText("Score: " + score, 0, 20);
                    ctx.fillText("Highscore: "+ high_score, 420, 20);
                    for (var i=0; i<blocks.length; i++) {
                        player.update(blocks[i]);
                        blocks[i].update();
                    }
                }

                this.draw = function () {
                    player.draw();
                    for (var i=0; i<blocks.length; i++) {
                        blocks[i].draw();
                    }
                }

                this.loop = function () {
                    (function loop() {
                        this.clear();
                        this.update();
                        this.draw();
                        setTimeout(loop, 60)})();
                    }

                this.setup = function () {
                    this.clear();
                    ctx.drawImage(menu_background, 0, 0);
                    ctx.drawImage(play_button, 150, 170);
                    ctx.drawImage(instruction_button, 150, 290);
                    ctx.drawImage(credit_button, 150, 410);
                }

                this.instruction = function () {
                    this.clear();
                    //ctx.drawImage(instruction_background, 0, 0);
                }

                this.gameover = function () {
                    this.clear();
                    ctx.drawImage(gameover_retry, 0, 0);
                }

                this.mouse_listener = function (e) {
                    console.log("x: " + e.clientX);
                    console.log("y: " + e.clientY);
                    if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 180 && e.clientY <= 220) {
                        this.loop();
                    } else if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 300 && e.clientY <= 340) {
                        this.instruction();
                    } else if (e.clientX >= 164 && e.clientX <= 460 && e.clientY >= 410 && e.clientY <= 460) {
                        this.credit();
                    }
                }

                this.keyboard_listener = function (e) {
                    console.log(e.keyCode);
                    switch (e.keyCode) {
                    case 39:
                        player.x += player.vx;
                        break;
                    case 37:
                        player.x -= player.vx;
                        break;
                    case 82:
                        location.reload();
                    }
                }
                return this;
            }
gm = new gameManager();
    document.addEventListener("mousedown", gm.mouse_listener, false);
ovrwngtvity
  • 3,865
  • 2
  • 13
  • 19

1 Answers1

0

Try

document.addEventListener("mousedown", gm.mouse_listener.bind(gm), false);
Yury Tarabanko
  • 39,619
  • 8
  • 73
  • 90