#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    74
    Rep Power
    18

    Problem with this reference


    Consider the following code:

    Game.js:
    Code:
    if ( !window.requestAnimationFrame ) {
     
    	window.requestAnimationFrame =  function() {
    	 
    	return window.webkitRequestAnimationFrame ||
    	window.mozRequestAnimationFrame ||
    	window.oRequestAnimationFrame ||
    	window.msRequestAnimationFrame ||
    	function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
    	 
    		window.setTimeout( callback, 1000 / 60 );
    	 
    	};
    	 
    	} ;
    	 
    }
    
    function Game(){
    	this.canvas = document.getElementById('canvas');
    	this.context = this.canvas.getContext('2d');
    	this.objects=[];
    	this.tiles = [];
    	this.map = [[0,1,1,0],[0,0,1,2],[3,3,4,2],[0,0,0,1]];
    	this.imageLocations = ["S5G0I801.bmp"];
    
    }
    
    
    Game.prototype.loadTiles = function()
    {
    	var index, im;
    	for(index=0 ; index < this.imageLocations.length ; index += 1){
    		im = new DrawableObject("images/"+this.imageLocations[index], this.canvas);
    		
    		this.tiles.push(im);
    		 
    		this.context.font = "normal 10px Verdana";
    		this.context.fillStyle = "#FFFFFF"; 
    			console.log("image loaded");
    	
    	}
    
    };
     
    
    Game.prototype.render = function() {
    
    	var indexX, indexY, l, m;
    	window.requestAnimationFrame(this.render, this.canvas);
    	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    	
    	for(indexX = 0, l = this.map.length; indexX !== l; indexX += 1)
    	{
    		for(indexY = 0, m = this.map[indexX].length; indexY !== m; indexY += 1)
    		{
    			var t = this.tiles[this.map[indexX][indexY]];
    				if(t !== undefined){
    					t.render();
    				}
    			
    			}
    		
    	}
    	
    };
    
    Game.prototype.gameStep = function() {
    	var index, l, o;
    	
    	for(index = 0, l = this.objects.length; index !== l; index += 1) {
    			o = this.objects[index];
    			o.update();
    		}
    	
    	setTimeout(this.gameStep, 1000 / 60);
    };
    
    Game.prototype.start = function() {
    	this.loadTiles();
    	this.render();
    	this.gameStep();
    };
    
    
    
    function init()
    {
    
    	var game = new Game();
    	game.start();
    }
    
    window.onload = init;
    index.html:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8"/>
    <title>
    </title>
    <link rel="stylesheet" href="game.css">
    <script src="game.js"></script>
    <script src="DrawableObject.js"></script>
    </head>
    <body>
    <canvas id="canvas" width=800 height=600></canvas>
    </body>
    </html>
    The issue relies in, again a common pitfall of JavaScript: the reference of this. As I understood, when this is not defined, it refers to the global object (or window). But: the code halts in the function Game.prototype.gameStep, where it claims that this is not defined. But why don't I get that message in, for example, Game.prototype.start?

    I suspect this has something to do with the window.onload, but what...?

    Any help will be appreciated!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    74
    Rep Power
    18
    Looks like the problem was in the line 'setTimeout'(this.....). The this refers to the owner of setTimeOut --> the global object.
    Using setTimeout(this.function.bind(this), x) resolved the issue.

IMN logo majestic logo threadwatch logo seochat tools logo