javascript - iterating over bidimensional arrays

Question

I am trying to write a javascript program that renders an 8x8 grid of dirt tiles on an HTML5 canvas. However, when I run this code it throws up error messages when running the draw_terrain() function and it appears to be a problem with the blockArray.length component. Can someone explain to me how to fix this problem? Thanks in advance.

//Define initial canvas variables and images

var canvas;
var ctx;
var WIDTH = 800;
var HEIGHT = 800;
var dirt = new Image();
dirt.src = 'dirt.png';

//Function called to initialise canvas variables and run draw on interval

function init(){
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    return setInterval(draw, 15);
}

//Function that generates an 8x8 Array called blockArray

function gen_terrain(){

var blockArray = new Array(8);

for(var i=0; i<blockArray.length; i++) {
    blockArray[i] = new Array(8);
    for(var j=0; j<blockArray[i].length; j++){
        blockArray[i][j] = 0;
    };
};
}

//Function that returns a random number between a min and max

function randomRange (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function draw_terrain(){
    for(var i=0; i<blockArray.length; i++) {
        for(var j=0; j<blockArray[i].length; j++){
            ctx.drawImage(dirt,(n-1)*32,(j-1)*32);
        };
    };
}

function draw(){
    draw_terrain();
}

gen_terrain();
init();

//Function that generates an 8x8 Array called blockArray ...and then throws it away. Variables are function scoped. — Esailija
– Esailija, Commented Oct 31, 2012 at 22:29
blockArray is declared as a variable inside of the scope of gen_terrain. It is not accessible from the draw_terrain method. — Shmiddty
– Shmiddty, Commented Oct 31, 2012 at 22:32
I don't understand the question... You already have global variables declared. Surely... Oh I see, copypasta strikes again! — Shmiddty
– Shmiddty, Commented Oct 31, 2012 at 22:35
Like you made the others global, you don't even need the function in the first place, you can just create the array at the top — Esailija
– Esailija, Commented Oct 31, 2012 at 22:35

Christoph · Accepted Answer · 2012-11-01 14:07:21Z

1

Your problem, as other people have explained is that the variable you are using the build the array will not exist by the time the draw occurs. Just place your array declaration outside of the function and your issue will go away.

See comment below:

function init(){
    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');
    return setInterval(draw, 15);
}

//Function that generates an 8x8 Array called blockArray
var blockArray = []; // <== has to be global (outside function).

function gen_terrain(){
    // Not here -> var blockArray = [];
    for(var i=8; i--;) {
        blockArray[i] = [0,0,0,0,0,0,0,0];
    };
}

Example

edited Nov 1, 2012 at 14:07

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Oct 31, 2012 at 22:33

nycynik

7,5718 gold badges66 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christoph Over a year ago

Any kind of Explanation would greatly improve the use of this "answer". Also you don't need to copy the weep limes of code which absolutely have nothing to do with the problem.

nycynik Over a year ago

OK, well. The real answer is that you have to learn about scope, specifically, variable scope in order to program in javascript. A link: coding.smashingmagazine.com/2009/08/01/…

Christoph Over a year ago

Just fyi, I'm not the OP and I know very well how js works. I just dislike answers which throw in some random lines of code without explanation.

nycynik Over a year ago

I was trying to improve my answer as you suggested, thought that link and explanation might help. I have a big comment in the code pointing out the new and old location of the problem, thought that was helpful also.

Collectives™ on Stack Overflow

javascript - iterating over bidimensional arrays

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related