Question

I use this constructor to make objects for a game.
Right now, the series of images gets overwritten everytime, such that all the objects look the same on screen.

Here’s the object in question:

function Box() {
    this.ready = false;
    this.pics = pictures;//[];
    this.state = 0;
    this.x = 0;
    this.y = 0;
    this.w = 1;
    this.h = 1;
    this.fill = "#444";
    this.load = function(array){
        var foo = [];
        pictures = [];
        for(var i = 0; i < array.length; i++){
            pictures.push(loadPic(array[i]));
            foo.push(loadPic(array[i]));
        }
        //this.pics = pictures;
        this.pics = foo;
    }
}

The line

this.pics = foo;

seems to do nothing at all.

Also, if I change the initial value of pics to anything but “pictures” (which is a global variable) the game does not start.

Contex: https://github.com/kaninepete/Javascript-Games/blob/images/MVP.js

Answer 1

Initially, you are creating your player and target objects and load their pictures by calling load. Because you are using the object-dot-method syntax, for example player.load to call the functions all references to this should be set as required/expected.

However to start the game, you are calling reset (for example from myDown). Within reset the objects in player and target are replaced with new instances (notice the calls to addRect). The method load is never called on the new instances and thus both are left with the identical pictures (the global pictures as initially set in Box). Because both are sharing the same array, pictures, they end up being painted the same.

General advice: I suggest to get rid of the global variables because their dependencies on each other are not obvious. Then you should call the reset function for initialization instead of doubling the implementation on the global level. Try painting a static picture first before introducing event handlers.