Question

我正在尝试使用我在互联网上找到的教程创建一个简单的游戏。链接就在这里，以防您想要引用它。 http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/。需要将3张图片加载到画布上。一个是背景图片。第二个是游戏中玩家的形象（英雄）。第三张图片是您将角色移动到的怪物图像。我有一个名为'main'的文件夹，其中包含一个图像文件夹，其中所有3个图像都保存为png。我的js文件中有一个名为'games.js'的js文件夹。还有一个名为simple_canvas_game.html的html文件。再次，我问这个问题，因为我无法将图像加载到我的浏览器中，这是google chrome。请帮忙。我的代码如下。

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
    monsterReady = true;
};
monsterImage.src = "images/monster.png";

// Game objects
var hero = {
    speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

//New game 
var reset = function() {
    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;

    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));
}

//Moving the character
var update = function(modifier) {
    if(38 in keysDown) {
        hero.y -= hero.speed * modifier;
    }

    if(40 in keysDown) {
        hero.y += hero.speed * modifier;
    }

    if(37 in keysDown) {
        hero.x -= hero.speed * modifier;
    }

    if(39 in keysDown) {
        hero.x += hero.speed * modifier;
    }
}

if (
    hero.x <= (monster.x + 32);
    && monster.x <= (hero.x + 32);
    && hero.y <= (monster.y + 32);
    && monster.y <= (hero.y + 32);
    ) {
        ++monsters.caught;
        reset();
    };

var render = function() {
    if(bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if(heroReady) {
        ctx.drawImage(heroImage, hero.x, hero.y);
    }

    if(monsterReady) {
        ctx.drawImage(monsterImage, monster.x, monster.y);
    }

    ctx.fillStyle = "black";
    ctx.font = "12pt Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseLine = "top";
    ctx.fillText = "Monsters Caught: " + monstersCaught, 32, 32)
};

var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta/1000);
    render();

    requestAnimationFrame(main);
}

var then = Date.now();
reset();
main();

P.S。我在js文件的顶部添加了一个警告，但只有在出于某种原因没有代码的情况下它才有效。如果我删除了所有其他代码，只需输入警报（“测试”）;它可以工作，但如果我把所有代码都放回警报，那么就没有代码了。我知道这是一篇很长的帖子，所以如果您有任何疑问，请询问，我会为您澄清。感谢您抽出宝贵时间阅读本文。

Answer 1

如果条件（你在那里使用分号，第90行）和filltext方法（第105行）中有一些错误
更新的脚本

<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="data" ></div>
<script type="text/javascript">
    (function(){
        // Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
    monsterReady = true;
};
monsterImage.src = "images/monster.png";

// Game objects
var hero = {
    speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

//New game 
var reset = function() {
    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;

    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));
}

//Moving the character
var update = function(modifier) {
    if(38 in keysDown) {
        hero.y -= hero.speed * modifier;
    }

    if(40 in keysDown) {
        hero.y += hero.speed * modifier;
    }

    if(37 in keysDown) {
        hero.x -= hero.speed * modifier;
    }

    if(39 in keysDown) {
        hero.x += hero.speed * modifier;
    }
}

if ( hero.x <= (monster.x + 32)
    && monster.x <= (hero.x + 32)
    && hero.y <= (monster.y + 32)
    && monster.y <= (hero.y + 32)
    ) {
        ++monsters.caught;
        reset();
    };

var render = function() {
    if(bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if(heroReady) {
        ctx.drawImage(heroImage, hero.x, hero.y);
    }

    if(monsterReady) {
        ctx.drawImage(monsterImage, monster.x, monster.y);
    }

    ctx.fillStyle = "black";
    ctx.font = "12pt Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseLine = "top";
    //ctx.fillText = "Monsters Caught: " + monstersCaught, 32, 32)
    ctx.fillText("Monsters Caught:",32,32);
};

var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta/1000);
    render();

    requestAnimationFrame(main);
}

var then = Date.now();
reset();
main(); 
    }())


</script>
</body>
</html>

更新1

你的文件结构应该如下所示

-index.html
-jquery
-images
--background.png
--monster.png
--hero.png

更新2 检查this是否有文件夹结构

Answer 2

对不起，我没有回复。我感谢你的所有帮助。我终于开始工作了。如果你想知道，我做的是用html而不是javascript创建画布并且它有效。我觉得我现在正在云九。感谢您的帮助，我真的很感激。

图像不会出现在我的画布上

2 个答案: