[Javascript] Tekenen op HTML5 Canvas

[Verwijderd]

Hey!

Ik ben nog redelijk beginner in programmeren met Javascript, vroeg me af waarom deze code niet werkt om een raster te tekenen op een HTML5 <canvas> element. Zie ik iets over het hoofd? Canvas is gewoon leeg.

code:

                    var cv = document.getElementById('gamecanvas');
                    var cvctx = cv.getContext('2d');

                    var world = [
                    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
                    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
                    ];

                    function drawTile(type, xco, yco){
                        switch(type){
                            case "wall": 
                                cvctx.fillStyle = '#aaaaaa';
                                cvctx.fillRect(xco, yco, 50, 50);
                            case "floor":
                                cvctx.fillStyle = '#eeeeee';
                                cvctx.fillRect(xco, yco, 50, 50);
                            case "box":
                                cvctx.fillStyle = '#ffa500';
                                cvctx.fillRect(xco, yco, 50, 50);
                            case "player"
                                cvctx.fillStyle = '#000000';
                                cvctx.fillRect(xco, yco, 50, 50);
                        }
                        return;
                    }

                    for(var x = 0; x < 16; x++){
                        for(var y = 0; y < 12; y++){
                            if (world[x][y] === 0) {
                                cvctx.fillStyle = '#aaaaaa';
                                cvctx.fillRect(xco, yco, 50, 50);
                                drawTile("wall", x*50, y*50);
                            } else if (world[x][y] === 1) {
                                drawTile("floor", x*50, y*50);
                            } else if (world[x][y] === 2) {
                                drawTile("box", x*50, y*50);
                            } else if (world[x][y] === 3) {
                                drawTile("player", x*50, y*50);
                            }
                        }
                    }

[ Voor 6% gewijzigd door Verwijderd op 15-10-2013 17:04 ]

[kaesve]

syntax errors. op regel 30: case "player": (dus met dubbele punt), op regel 41: cvctx.fillRect(x, y, 50, 50); (in plaats van 'xco' en 'yco').

Bovendien wil je waarschijnlijk ook een break; in al je cases.

De meeste browsers hebben onderhand een javascript console waar je dit soort dingen heel makkelijk mee kunt opsporen. Bovendien zouden de meeste code editors dit ook moeten highlighten of anders aangeven. Als laatste zijn er tools als JSHint, die dit heel mooi kunnen weergeven

http://www.jshint.com/

[Verwijderd]

kaesve schreef op dinsdag 15 oktober 2013 @ 17:17:
syntax errors. op regel 30: case "player": (dus met dubbele punt), op regel 41: cvctx.fillRect(x, y, 50, 50); (in plaats van 'xco' en 'yco').

Bovendien wil je waarschijnlijk ook een break; in al je cases.

De meeste browsers hebben onderhand een javascript console waar je dit soort dingen heel makkelijk mee kunt opsporen. Bovendien zouden de meeste code editors dit ook moeten highlighten of anders aangeven. Als laatste zijn er tools als JSHint, die dit heel mooi kunnen weergeven

http://www.jshint.com/

Ok, geen idee wat regel 40 en 41 daar deden... breaks had ik ondertussen nog toegevoegd, stom foutje.
Regel 30 had ik volledig over het hoofd gezien, daar zit dus de fout. Heb het nu werkend gekregen! Bedankt!

[kaesve]

overigens zou ik het mooier vinden om een mapping bij te houden van nummer naar tile type. Zoiets als dit dus:

JavaScript:

var tileTypes = {
  0: "wall",
  1: "floor",
  2: "box",
  3: "player"
} 

Op die manier kan je je loop reduceren tot

JavaScript:

for(var x = 0; x < 16; x++){
  for(var y = 0; y < 12; y++){
    var tile = tileTypes[world[x][y]];
    drawTile(tile, x * 50, y * 50);
  }
}