Question

周末的作业是使用canvas和javascript制作一个pac-man风格的游戏。根据我正在观看的教程，当我运行时，我应该看到地图的第一行，但我只是得到了地图边框。

这是我的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
    }

}

任何有助于展示其中一些内容的帮助都会很棒!!

Answer 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++这是错误的，其次是你的for循环结束时你正在posX+=32但是没有但是，你可以做的只是使用你的i和j（我已将其重命名为x和y来帮助您理解我的代码）新的Xposition和Yposition。只是抬头我正在使用谷歌的一些图像，你可能需要刷新页面才能看到显示的图像。

Answer 2

您在if

中缺少空格

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

Answer 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++，并且我觉得你在内心的尽头错过了一个posY+=32。

为什么我的游戏中没有任何盒子出现？

3 个答案: