Uncaught TypeError

[Joost_Kivits]

Hey everyone! For college I am required to make a Javascript game with an MVC setup (Model, View, Controller). I am pretty new to this so please don't be too harsh. I am trying to set up the MVC stuff and get my played model to be drawn on canvas but I am getting the following error: "Uncaught TypeError: Cannot read property 'getData' of undefined". Can someone help me identify the problem? I'm sure there are all kinds of problems with my code. Any and all help would be appreciated!

 

Code: 

 

// NAMESPACE

 

var GOBLINS = GOBLINS || {};

 

//The VIEW

 

GOBLINS.View = function() {};

 

GOBLINS.View.prototype.draw = function(objects) {

    

    for(i=0; i < objects.length; i++) {

          ctx.drawImage(objects,0,0);

    };

};

 

GOBLINS.View.prototype.update = function(data){

    this.draw(data); 

};

 

// DE MODEL

 

GOBLINS.Model = function() {

    this.data = [];

};

 

GOBLINS.Model.prototype.player = {

    hitPoints: 25,

    x: 15,

    y: 20,

    img: new Image(),

    push: function() {

    data.push(GOBLINS.Model.player.img);

    }

};

 

GOBLINS.Model.prototype.getData = function(recall){

      recall(this.data);

};

 

// THE CONTROLLER

 

GOBLINS.Controller = function() {

    var M = new GOBLINS.Model();

    var V = new GOBLINS.View();

    

    this.mainLoop();

};

 

// THE MAIN LOOP

 

GOBLINS.Controller.prototype.mainLoop = function() {

    var self = this;   

    

this.M.getData(function(data){

self.V.update(data);

});

    

    window.requestAnimationFrame(function(){

        self.mainLoop();

    });

};

 

 

window.onload = function() {

    var game = new GOBLINS.Controller();

    

    GOBLINS.Model.player.img.src = "Image/Player.png";

    var c=document.getElementById("gameCanvas");

    var ctx=c.getContext("2d");

};

[AzraelTycka]

Hello,

 

first of all there is CODE button, use it for your code, example here:

some codeblah blah blah

Second thing, always set your code in jsfiddle (or similar tool) - make sure you use it properly (!), otherwise we can't find where the probelm is - rarely anyone is gonna go through your code all the time and if needed trying to set up themselves.

 

Third note, always specify entire error message, it gives more details than just what you gave us, there should be at least line wher the error occurred.

 

Well that's all I guess until the live working fiddle is set up :-).

 

EDIT:

Btw

GOBLINS.Controller.prototype.mainLoop = function() {    var self = this;       this.M.getData(function(data){self.V.update(data);});

this.M.getData - this.M is not defined anywhere in your code, so this.M.getData won't work either. Unless I missed some line :-).

Edited September 28, 2015 by AzraelTycka

[mattstyles]

It was good of @AzraelTycka to go through your code, learning to use jsfiddle, plunker, codepen or something else is a useful way of sharing code for review/critique etc as well as trying things out.

 

To solve the `this.M` problem add 

this.M = new GOBLINS.Model()

to the controller constructor. This appends the property onto the object whereas the current `var M` line adds the variable `M` to the constructor closure only, once the constructor has executed that `M` goes out of scope. As your tutor for clarification on adding properties to newly constructed objects, variable scope in JS and about closure. These are not the simplest of concepts and maybe that will come later in the course.

 

Also, and feel free to ignore this advice as what you've written is perfectly good JS (barring the error), `var self = this` or `var that = this` is a bit of an anti-pattern. `.bind` is supported in all modern browsers, as is `.call` and `.apply` which are fundamental things to learn and can get you away from falling into some potentially harmless coding habits.

 

On another note (again, nothing you can do about the scope of the assignment), please dont think that MVC is the *best* way (or even worse, the only way) to write complex applications. In many use cases it is poorly suited to gaming applications for a raft of reasons, although you will learn many lessons from using it. At this stage in your development just keep an open mind about how you do things (after you ace this assignment of course!), as you've probably heard, it takes 10 years to become a good coder, its a long (and rewarding) journey that will contain many twists and turns!