所以我正在制作一个html 5游戏，而我正试图让“怪物”移动它自己。 “英雄”移动得很好，但“怪物”不会。问题可能出在更新或渲染方法中，但我对于我所缺少的东西感到茫然。
////////////////////////////////////Canvases////////////////////////////////////
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 988;
canvas.height = 480;
document.body.appendChild(canvas);
////////////////////////////////////Map Fields//////////////////////////////////
var mapCordsX = 0;
var mapCordsY = 0;
//to save the area code when the player is in a building
var oldMapCordsX = 0;
var oldMapCordsY = 0;
//////////////////////////////////Images////////////////////////////////////////
// Background image
var bgReady = false;
var bgImage1 = new Image();
bgImage1.onload = function() {
bgReady = true;
};
//images for backgorunds.
bgImage1.src = "images/background.png"; // Background images
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function() {
heroReady = true;
};
heroImage.src = "images/sprite01south.png"; //Hero Images
// Enemyimage
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function() {
monsterReady = true;
};
monsterImage.src = "images/monster.png"; //Enemy images\
//////////////////////////////////Images////////////////////////////////////////
////////////////////////////////Global Objects//////////////////////////////////
// Game objects
var hero = {
speed: 256, // movement in pixels per second
x: canvas.width / 2,
y: canvas.height / 2
};
var monster = {
speed: 256,
x: canvas.width / 2,
y: canvas.height / 2
};
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);
///////////////////////////////Map Methods//////////////////////////////////////
var resetNorth = function() {
hero.y = 440;
mapCordsY += 1;
};
var resetEast = function() {
hero.x = 0;
mapCordsX += 1;
};
var resetWest = function() {
hero.x = canvas.width;
mapCordsX += 1;
};
var resetSouth = function() {
hero.y = 0;
mapCordsY -= 1;
};
// resetCenter the game when the player catches a monster
var resetCenter = function() {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
//////////////////////////////////Update Method/////////////////////////////////
var update = function(modifier) {
//key events
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
heroImage.src = "images/sprite01north.PNG";
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
heroImage.src = "images/sprite01south.PNG";
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
heroImage.src = "images/sprite01west.PNG";
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
heroImage.src = "images/sprite01east.PNG";
}
var goblin1 = 0;
if (goblin1 < 10){
monster.x -= monster.speed * modifier;
}
else if (goblin1 <20 ){
monster.x += monster.speed * modifier;
}
else if (goblin1 < 30){
monster.y -= monster.speed * modifier;
}
else {
monster.y += monster.speed * modifier;
}
goblin1++;
if(goblin1 > 40){
goblin1=0;
}
//Map change event triggers
if (hero.y >= 440) {
resetSouth();
} else if (hero.y <= 0) {
resetNorth();
}
if (hero.x <= 0) {
resetWest();
} else if (hero.x >= 988) {
resetEast();
}
//map change events
if (mapCordsX === -1 && mapCordsY === 0) {
bgImage1.src = "images/background(-1,0).png";
}
//a lot more to come as I get backgrounds
// Are they touching?
if (
hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)) {
++monstersCaught;
resetCenter();
}
};
////////////////////// Update game objects graphics/////////////////////////////
// Draw everything
var render = function() {
if (bgReady) {
ctx.drawImage(bgImage1, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Enemies Slayed : " + monstersCaught, 32, 32);
};
//////////////////////////////////The main game loop////////////////////////////
var main = function() {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
resetCenter();
main();
答案 0 :(得分：0)
如果删除此if / else语句会发生什么？
//if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
// }
您是否正在改变代码中其他部分的var monsterReady？