javascript - タイルマップを修正するにはどうすればよいですか? なぜ、完全な地図を手に入れることができるのですか? ジャバスクリプトのみ

Question

私は 2D のシンプルなシューティング プラットフォーマーをやっています。そのためにはタイル マップが必要です。私は JavaScript にはかなり慣れていませんが、ゲームをできるように最善を尽くしています。私はすでにタイル マップを作成しています。これは、最初のレベルに必要な結果です。

最初のレベルのタイル画像、必要な結果:

そして、これは私が得ているものです:

タイル マップの私のコードは次のとおりです。

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;
            }
        }

    }

}

マップとその他のアセットとアニメーションを描画するための関数 (アニメーション) がもう 1 つあります。

期待される結果を得るために何をしなければならないかを知りたかっただけです。これで2日間過熱しています。いくつかの方法を試しましたが、どれも機能しません:(