Question

EDIT
I’d still like to know why this happened but after reading some stuff on prototypes my solution was to not let the 2 objects override the base prototype as according to this http://freshbrewedcode.com/derekgreer/2011/12/31/solid-javascript-the-liskov-substitution-principle/

I have 3 objects

the base object is called the object control

object moneyBag and object movementPad both inherit controls’ prototypes.

both money bag and movementPad have 2 different draw Functions so the code looks like this

Money.prototype.Draw = function (context) {
    console.log("foo2");
}

MovementPad.prototype.Draw = function (context) {
    console.log("foo1");
}

in my HUD.js both these objects are initalized, Hud then calls these 2 objects draw like so

var movementControl = new MovementPad(screenManager, 1,1,1,1);

var money = new Money(screenManager, 10, 10, 37, 36);

   // .... code skipped
this.Draw = function (context) {
    movementControl.Draw(context);
    money.Draw(context);
}

my issue is both of these objects are not calling their draw method. If I initialize movementPad first then that draw method will be called, if I initialize money first only that draw method will be called.

What am I miss understanding/doing wrong with prototypes for both of their draw methods to not be called.

(more code below)

function control(x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    var defaultImg = new Image();
    defaultImg.src = "blank.png";
}


    //.... code skipped

control.prototype.Draw = function (context) {
    context.drawImage(defaultImg, this.x, this.y, this.width, this.height);
}

movementPad.js

MovementPad.prototype = control.prototype;
MovementPad.prototype.constructor = MovementPad;

function MovementPad(screenManager, x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    //.... code skipped

    MovementPad.prototype.Draw = function (context) {
        context.drawImage(movementPad, x, y , width ,height);

    }

}

Money.js

Money.prototype = control.prototype;
Money.prototype.constructor = Money;

function Money(screenManager, x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

  //.... code skipped

    Money.prototype.Draw = function (context) {
        context.drawImage(moneyBag, x, y, width, height);
    }
}

Answer 1

You’ve assigned the same instance of control.prototype to both Money and MovementPad‘s prototypes, so your Draw method declarations are clobbering eachother.

Make the prototypes separate instances:

Money.prototype = new control();
// ...
MovementPad.prototype = new control();

and your Draw assignments should work.