0

I'm designing a game in JavaScript and have encountered the following issue wich despite research I cannot fix.

I have a Map class (shown below) that has the attribure tiles. During the contructor, I assign tiles to a new array and fill the array with objects.

When I then come to render, I get the error "this.tiles is undefined". If I log the value to this.tiles to the console, at the end of the constructor it is full of values: [object Object],[object Object]... yet when it reaches the render function, it prints this.tiles: undefined.

Does anyone know why this is and can explain it to me? Thanks!

Code

class Map {

    tiles = [];

    constructor(x, y, tileNumX) {
        this.x = x;
        this.y = y;
        let tileNumY = tileNumX * 3;

        for (let y = 0; y < tileNumY; y++) {
            for (let x = 0; x < tileNumX; x++) {
                this.tiles.push(new GameObject("images/game/map/tile" + getRandomValue(0, 6) + ".jpg",
                    this.x + (x * 1500), this.y + (y * 300)));
            }
        }
        console.log("tiles:" + this.tiles);
    }

    update() {

    }

    render() {
        console.log("Rendering map");

        let context = CANVAS.getContext("2d");
        context.clearRect(0, 0, CANVAS.width, CANVAS.height);
        console.log("Tiles:" + this.tiles);
    }

}

let Game = {

    start : function() {
        console.log("Game initiated!");

        this.run(new Map(0, 0, 5));
    },

    run : function (map) {
        let now,
            dt = 0,
            last = time_stamp(),
            step = 1 / 60,
            update = map.update,
            render = map.render;

        function loop() {
            now = time_stamp();
            dt = dt + Math.min(1, (now - last) / 1000);
            while (dt > step) {
                dt = dt - step;
                update(step);
            }
            render(dt);
            last = now;
            requestAnimationFrame(loop);
        }
        requestAnimationFrame(loop);
    }
}

...

Game.start();
Kris Rice
  • 559
  • 1
  • 5
  • 23
  • By doing `render = map.render` and then `render()`, you're calling `render` with the default value for `this` instead of with `this` set to `map`. See the linked question's answers for details. I'd just use `map.update()` and `map.render()` rather than grabbing them to locals, but if you really want to use locals, use `render = () => map.render()`or `render = map.render.bind(map)`. – T.J. Crowder Feb 28 '21 at 17:20
  • @T.J.Crowder thanks! – Kris Rice Feb 28 '21 at 17:21

0 Answers0