1

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

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

这就是我得到的： 这就是我得到的

我的瓷砖地图代码是这样的：

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

    }

}

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

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

4

0 回答 0