为什么我的游戏中没有显示任何框？答案

【问题标题】：Why aren't any boxes in my game showing up?为什么我的游戏中没有显示任何框？
【发布时间】：2016-02-16 06:51:32
【问题描述】：

周末的任务是使用canvas和javascript制作一个吃豆人风格的游戏。根据我正在观看的教程，当我运行它时，我应该看到地图的第一行，但我只是得到地图边框。

这是我的 HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
</head>
<body>
    <canvas id="myCanvas" width="800" height="500" style="border: 1px solid gray"></canvas>
     <script src="file1.js"> </script>
</body>
</html>

这是我的打字稿

let canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
let context = canvas.getContext("2d");
let img = new Image();
img.onload = function () {
    context.drawImage(img, 0, 0);
}
img.src = "zombie.png";

let mapArray =
   ["############################",
    "#      #    #      o      ##",
    "#                          #",
    "#   ####   #####    ##     #",
    "##         #   #    ##     #",
    "###           ##     #     #",
    "#           ###      #     #",
    "#   ####          ###      #",
    "#   ##    #  o             #",
    "# o  #    #    o ###   ### #",
    "#    #    #                #",
    "############################"];

//need to add wall.scource =  and grass.source =
let wall = new Image();
let grass = new Image();
grass.src = "C:\Users\Scott\Desktop\grassimg.jpg";
wall.src = "http://www.tecmobowl-vs-rbi.com/uploads/3/5/3/8/3538178/_2943519.jpg";

let posX = 0;
let posY = 0;

//for loops set images at given coordinates according to position on mapArray
for (let i = 0; i < mapArray.length; i++) {
    for (let j = 0; j < mapArray.length; i++) {

        if (mapArray[i][j] == "") {
            context.drawImage(grass, posX, posY, 32, 32)//last two are size of image )
        }
        if (mapArray[i][j] == "#") {
            context.drawImage(wall, posX, posY, 32, 32)//last two are size of image )
        }
        posX+=32
    }

}

任何帮助显示其中的一些都很棒！

【问题讨论】：

你能给个更好的标题吗？描述真正的问题，而不是你如何解释它。
当然！对它的标题有什么建议吗？
你在哪里测试你的打字稿代码？
你的控制台有错误吗？

标签： javascript html canvas typescript

【解决方案1】：

jsFiddle：https://jsfiddle.net/kvxx73f7/

javascript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
    context.drawImage(img, 0, 0);
}
img.src = "zombie.png";

var mapArray =
   ["############################",
    "#      #    #      o      ##",
    "#                          #",
    "#   ####   #####    ##     #",
    "##         #   #    ##     #",
    "###           ##     #     #",
    "#           ###      #     #",
    "#   ####          ###      #",
    "#   ##    #  o             #",
    "# o  #    #    o ###   ### #",
    "#    #    #                #",
    "############################"];

//need to add wall.scource =  and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";

var posX = 0;
var posY = 0;

//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
    for (var x = 0; x < mapArray[0].length; x++) {

        if (mapArray[y][x] == "") {
            context.drawImage(grass, (32 * x) , (32 * y), 32, 32)//last two are size of image )
        }
        if (mapArray[y][x] == "#") {
            context.drawImage(wall, (32 * x) , (32 * y), 32, 32)//last two are size of image )
        }

    }

}

当您执行循环时，您在两个 for 循环中重复使用 i++，这是错误的，其次是在 j 中的 for 循环结束时您正在执行 posX+=32 但不是 posY，但是什么您可以做的只是使用您的i 和j（我已将其重命名为x 和y 以帮助您理解我的代码）来计算新的Xposition 和Yposition。请注意，我正在使用一些来自 google 的图片，您可能需要刷新页面才能看到显示的图片。

【讨论】：

【解决方案2】：

您的if 中缺少一个空格

if (mapArray[i][j] == " ") {

【讨论】：

哦，谢谢！很好的收获，但不幸的是仍然没有渲染。

【解决方案3】：

您正在尝试在图像加载之前绘制它们。

如果你使用这个非常简单的预加载器，并将你的绘图代码放在一个函数中，它应该可以工作。

...
let wall = new Image();
let grass = new Image();

var preloader = new Preloader(); // Create new preloader
preloader.add(wall); // Add images you want to preload
preloader.add(grass);
preloader.onready = draw; // Call draw function when its ready

grass.src = "C:\Users\Scott\Desktop\grassimg.jpg";
wall.src = "http://www.tecmobowl-vs-rbi.com/uploads/3/5/3/8/3538178/_2943519.jpg";

function draw() { //Wrap your draw code in a function
    let posY = 0;
    for (let i = 0; i < mapArray.length; i++) {
        let posX = 0;
        for (let j = 0; j < mapArray[i].length; j++) {
            if (mapArray[i][j] == " ") {
                context.drawImage(grass, posX, posY, 32, 32)//last two are size of image )
            }
            if (mapArray[i][j] == "#") {
                context.drawImage(wall, posX, posY, 32, 32)//last two are size of image )
            }
            posX+=32
        }
        posY+=32
    }
}

function Preloader(){ // Preloader code
    var self = this;
    var images = [];
    self.onready = function(){};
    self.add = function(img){
        images.push(img);
        img.onload = function(){
            images.splice(images.indexOf(img), 1);
            if(images.length == 0)
                self.onready();
        }
    }
    return self;
}

注意：我稍微修改了你的绘图函数，因为每次外循环开始时你都必须重置 posX，而且，你在两个循环中都有i++，第二个应该是j++，我认为你是在内部 for 的末尾缺少 posY+=32。

【讨论】：