EchoFool Posted February 25, 2012 Share Posted February 25, 2012 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 Quote Link to comment Share on other sites More sharing options...
kicken Posted February 25, 2012 Share Posted February 25, 2012 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. Quote Link to comment Share on other sites More sharing options...
EchoFool Posted February 25, 2012 Author Share Posted February 25, 2012 Oh okay - thanks ! Is it better practice to put them up the top of the script ? Which is usually the preferred way? Quote Link to comment Share on other sites More sharing options...
kicken Posted February 26, 2012 Share Posted February 26, 2012 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. Quote Link to comment Share on other sites More sharing options...
EchoFool Posted February 26, 2012 Author Share Posted February 26, 2012 Okay thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.