Jump to content

Uncaught TypeError


Joost_Kivits
 Share

Recommended Posts

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");
};
Link to comment
Share on other sites

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 by AzraelTycka
Link to comment
Share on other sites

  • 2 weeks later...

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...