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 :(

My guess is that `cols` (and probably also `cols`) doesn't have the value you expect in the `drawMap` method. Try adding a `console.log(cols)` there to verify it has the expected method. You have only 9 `262` instances in your `map`, but somehow draw 16 in the result. — Joachim Sauer, Feb 05 '21 at 18:44
I did the console.log(cols) and it gives me the value of 25, the same value i declared inicially and on tiled. I'm not understanding how it's giving me 2 platforms when there is only one platform of the 9 blocks (282). I have no position declared for the tiles (X and Y) can it be because of that? It almost feels it is doing a duplicate tile map — synco, Feb 05 '21 at 19:00
What is `rows`? (I accidentally mentioned `cols` twice in my original comment). I don't think you need the coordinates in the map, as that's implicit. **Edit:** come to think of it: your calculation of the index into `map` is wrong: you multiply `y` with `rows`, when you should be multiplying it with `cols`: `map[(y*cols) +x]`. Because for each `y` after `0` you want to skip as many tiles as there are columns ... — Joachim Sauer, Feb 05 '21 at 19:01
the value of rows is 18. Same as i declared. It's so strange this reaction, maybe i'm missing something on the cycle. Will try it! Let me see :) — synco, Feb 05 '21 at 19:04
IT WORKED!!!! OMG i can't believe it it was so simple solution, but it makes sense. The code was running only on y, with y*rows. y*cols runs the entire array right? TY SO MUCH! :))) — synco, Feb 05 '21 at 19:08
try to run the code "manually" on paper (with a much smaller map, but make sure it's not a square one, or you'll miss the bug) to see how the indexing breaks like this. Basically instead of jumping forward a full row, you only jumped halfway into the next one and repeated already-drawn elements. — Joachim Sauer, Feb 05 '21 at 19:10
Clarified! Thank you so much @JoachimSauer for the explanation and the solution, and of course for the time! :) — synco, Feb 05 '21 at 19:12

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

0 Answers0