如何修复我的 Tilemap？为什么我不能得到完整的地图？只有 JAVASCRIPT

问题描述

我正在做一个简单的 2d 射击平台游戏，为此我需要一个平铺地图。我对 javascript 非常生疏，但我正在尽我最大的努力来做游戏。我已经完成了一个平铺地图，这是我想要的第一个 lvl 的结果：

第一个lvl的平铺图像，想要的结果：

Tiled image of the first lvl,the wanted result

这就是我得到的：

And this is what i'm getting

我的瓦片地图代码是这样的：

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,467,499,500,501,282,258,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,tileHeight);
                    break;

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

    }

}

我还有一个功能（动画），用于绘制地图以及其他资产和动画。

我只是想知道我必须做什么才能获得预期的结果。我现在已经过热了 2 天，我尝试了几种方法来做到这一点，但都没有效果:(

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript jstilemap