jstilemap - How can i fix my Tilemap? Why can,t i get the full map? ONLY JAVASCRIPT

Question

I'm doing a 2d simple shooter platformer, and for that i need a tile map. I'm pretty rusty on javascript, but i'm trying my best to do the game. I have a tile map done already this is the outcome that i want for the first lvl:

Tiled image of the first lvl, the wanted result:

And this is what I'm getting:

my code for the tile map is this one:

window.onload = function () {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');

    var cols = 25;
    var rows = 18;
    var tileWidth = 32;
    var tileHeight = 32;
    canvas.width = cols * tileWidth;
    canvas.height = rows * tileHeight;
    var map = [
        467,468,468,468,468,468,468,467,468,468,468,468,468,468,468,468,467,468,468,468,468,468,467,468,468,
        499,500,501,468,468,468,468,499,500,501,468,468,468,468,468,468,499,500,501,468,468,468,499,500,501,
        468,468,468,468,468,467,468,468,468,468,468,499,500,501,468,468,468,468,468,467,468,468,468,468,468,
        468,468,468,468,468,499,500,501,468,468,468,468,468,468,468,468,468,468,468,499,500,501,468,468,468,
        468,467,468,468,468,468,468,468,468,467,468,468,468,468,467,468,468,468,468,468,468,468,467,468,468,
        468,499,500,501,468,468,468,468,468,499,500,501,468,468,499,500,501,468,468,468,468,468,499,500,501,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,282,282,282,282,282,282,282,282,282,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,
        258,258,258,258,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,468,258,258,258,258,
        528,528,528,528,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,258,528,528,528,528,
        528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,

528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528,528
    ];
    
   

    var map467 = new Image();
    map467.src = "467_tile.png"
    var map468 = new Image();
    map468.src = "468_tile.png"
    //var map469 = new Image();
    //map469.src = "469.png"
    //var map470 = new Image();
    //map470.src = "470.png"
    var map499 = new Image();
    map499.src = "499_tile.png"
    var map500 = new Image();
    map500.src = "500_tile.png"
    var map501 = new Image();
    map501.src = "501_tile.png"
    //var map502 = new Image();
    //map502.src = "502_tile.png"
    var map528 = new Image();
    map528.src = "528_tile.png"
    var map258 = new Image();
    map258.src = "258_tile.png"
    var map282 = new Image();
    map282.src = "282_tile.png"


function drawMap() {


        for (var y = 0; y < rows; y++){
        for (var x = 0; x<cols; x++) {
            switch (map[((y*rows)+x)]){
                case 467:
                    ctx.drawImage(map467, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 468:
                    ctx.drawImage(map468, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;

                case 499:
                    ctx.drawImage(map499, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 500:
                    ctx.drawImage(map500, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 501:
                    ctx.drawImage(map501, x*tileWidth,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 528:
                    ctx.drawImage(map528, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 282:
                    ctx.drawImage(map282, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
                case 258:
                    ctx.drawImage(map258, x*tileWidth ,y*tileHeight, tileWidth, tileHeight);
                    break;
            }
        }

    }

}

I have one more function (animate), for drawing the map and the other assets and animations.

I just wanted to know what i have to do to get the expected result. I'm overheating on this for 2 days now, i tried severall ways to do it, but none works :(

question from:https://stackoverflow.com/questions/66067164/how-can-i-fix-my-tilemap-why-can-t-i-get-the-full-map-only-javascript

Answer 1

Waitting for answers