CODEWITHSUNDEEP
javascriptfor-loopcanvas
KeddoXZ
KeddoXZ

Reputation: 13

Javascript Worm Game canvas problems

I am making a worm game in canvas but I cant get my code to draw the out lines. I am using few for loops to make it to check every variable from that 2D array. This is what I have for now. W is walls which the code "should" draw as boxes around the edges of my canvas. A is air or blank where it should not make anything. I think ctx.fillRect is where it doesn't do anything so I would like to know how to fix it.

    var W = 9001;
    A = 9000;

var level = [
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W], //21*13 Grid
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W]  // Comments for easy counting
]

function drawLevel(){

    var canvas = document.createElement('canvas');
        canvas.id = "WormGame";
        canvas.width = 420;
        canvas.height =260;
        canvas.style.border = "1px solid";

    var ctx = canvas.getContext('2d');

    var body = document.getElementsByTagName("body")[0];
        body.appendChild(canvas);

    ctx.fillRect(0,0,20,20);

    for(i=0;i>20;i++){
        for(j=0;j>12;j++){
            if(level[i][j] = 9001){
            var x = 20*i;
                y = 20*j;
            ctx.fillRect(x,y,20,20);
            }
        }
    }

}

Upvotes: 0

Views: 264

Answers (3)

Preston S
Preston S

Reputation: 2771

As Jonas indicates you're condition for the loops is incorrect but you also have some other issues. You're if statement is incorrect '=' instead of '==' and your loops are backwards first loop should be 12 and second should be 20. This is how it should look:

var W = 9001;
var A = 9000;
var SIZE = 20;

var level = [
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W], //21*13 Grid
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W], //
    [W,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,A,W],
    [W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W,W]  // Comments for easy counting
];

function drawLevel(){

    var canvas = document.createElement('canvas');
        canvas.id = "WormGame";
        canvas.width = SIZE * level[0].length;
        canvas.height =SIZE * level.length;
        canvas.style.border = "1px solid";

    var ctx = canvas.getContext('2d');

    document.body.appendChild(canvas);

    ctx.fillRect(0,0,SIZE,SIZE);

    for(var i = 0; i < level.length; i++){
        for(var j = 0; j < level[i].length; j++){
            if(level[i][j] == W){
                var x = SIZE*i;
                var y = SIZE*j;
                ctx.fillRect(y,x,SIZE, SIZE);
            }
        }
    }
}

drawLevel();

Upvotes: 1

Kami
Kami

Reputation: 19407

You have a couple of issues with the loop.

Try the following

for(i=0;i<21;i++){
    for(j=0;j<13;j++){
        if(level[j][i] == 9001){
        var x = 20*i;
        var y = 20*j;
        ctx.fillRect(x,y,20,20);
        }
    }
}

Firstly, indexes are 0 based so you need them to go upto 13/21 to iterate over all the elements.

Secondly, the if should have == to compare otherwise, it's just assignment.

Finally, given the array initialisation, the first index is width, so the check needs to be written level[j][i] or the array redeclared.

Fiddle - http://jsfiddle.net/Lpa92b10/

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

The problems are in your for loops: 

for(i=0;i>20;i++){
    for(j=0;j>12;j++){
    }
}

You're saying start counting from 0 and loop over until i is bigger than 20 but this will never be the case, because you set i (and j) to 0 so it immediately jumps out of the loop.

This should work:

for(i=0;i<20;i++){
    for(j=0;j<12;j++){
    }
}

Upvotes: 1

Related Questions