Jump to content

Recommended Posts

Hey

 

 

I been dissecting a tutorial script i found on the net for my script, i tried doing the similar code structure yet i get undefined error and their's does not.

 

 

I am hoping some one here can explain what is different to mine that makes mine not work =/

 

 

This is the script i learnt from:

http://glacialflame.com/tutorials/tiles/02/ (see page source)

 

 

 

 

This is my script:

 

var tiles = Array("1.png","0.png"); 
var loaded = 0; 
var loadTimer; 


function loadimg(){
var tileImg = new Array();
for(var i=0;i<tiles.length;i++){
    tileImg[i] = new Image();
    tileImg[i].src = tiles[i]; 
    tileImg[i].onload = function(){ 
        loaded++;
    }
  }
}

function loadall(){ 
if(loaded == tiles.length){
    clearInterval(loadTimer);
    loadTimer = setInterval(gameUpdate,100); 
}
} 

function gameUpdate(){ 
ctx.clearRect(0,0,canvas.width,canvas.height); //line 32
draw();
}

function init(){
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d"); 
loadimg(); 
loadTimer = setInterval(loadall,100);
}

 

 

This is called with a :

<body onLoad="init();">    <canvas id="canvas" width="1200px" height="600px" class="canvas">Your browser does not support HTML5 canvas.</canvas>

 

But i get the error:

Uncaught ReferenceError: ctx is not defined on line 32 (i commented line 32)

Any one know why? :S

Link to comment
https://forums.phpfreaks.com/topic/257788-undefined-variable-confused/
Share on other sites

Their code relies on ctx being in the global scope, but in your case it is not.  The reason it is in their code is because they did not preceed it with the word var when they assigned it, which causes it to be assigned as a global variable.  Since you used var in your code, you have limited it in scope to only that function.

 

Quick fix would be to remove the var from where you assign the variable, and add a var ctx; line toward the top of the script to declare it as a global.

 

It's preferable to keep your variables tied to the functions that need them.  In the case when a value is needed in multiple functions you should pass it as a parameter.

 

If you are going to just create the variables in a top scope so that all the functions can access it, you should, at the very least, isolate them in their own scope rather than use the global scope.  This prevents any conflicts when you start dealing with multiple scripts.  You can create your own scope by wrapping all your code in a large anonymous function, such as:


(function(window,undefined){
    //declare all your top scope variables here
  

    //put the code here


})(this);

 

What that does is create an anonymous function and then immediately execute it.  So long as you declare your variables with the var keyword they will be isolated to that function and you will not pollute the global namespace.

 

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.