我正在尝试使用我在互联网上找到的教程创建一个简单的游戏。链接就在这里,以防您想要引用它。 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文件的顶部添加了一个警告,但只有在出于某种原因没有代码的情况下它才有效。如果我删除了所有其他代码,只需输入警报(“测试”);它可以工作,但如果我把所有代码都放回警报,那么就没有代码了。我知道这是一篇很长的帖子,所以如果您有任何疑问,请询问,我会为您澄清。感谢您抽出宝贵时间阅读本文。
答案 0 :(得分: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是否有文件夹结构
答案 1 :(得分:0)
对不起,我没有回复。我感谢你的所有帮助。我终于开始工作了。如果你想知道,我做的是用html而不是javascript创建画布并且它有效。我觉得我现在正在云九。感谢您的帮助,我真的很感激。