我正在创造一个“抓住物品”。游戏，并已成功绘制了捕手＆＃39;图像和掉落物品＆＃39;图像到画布上。但是当我没有抓住掉落的图像并且击中我的html5画布的底部时，我还要显示一个图像（x.png）。从动画函数调用generateX函数，当下降的图像到达画布的底部时。 sound.play（）正在运行。 generateX函数中的console.logs记录以下内容 - 2,3 | 1,3 | 1,3 - 所以我知道这个函数第一次运行时图像没有完全加载。除了实际的图像显示外，一切似乎都有效。我尝试以其他线程建议的方式构建它，但没有任何工作。非常感谢任何帮助！
generateX: function() {
console.log('inside generateX func');
var imgX = new Image();
imgX.src = 'assets/x.png';
function drawX() {
console.log(3);
counter+=20;
context.drawImage(imgX, xIcon.x + counter, xIcon.y, xIcon.width, xIcon.height);
xArr.push(imgX);
console.log('xArr', xArr);
}
if (imgX.complete) {
console.log(1);
drawX();
} else {
console.log(2);
imgX.onload = drawX;
}
helper.checkMisses();
}
animate: function() {
var sound;
if (continueAnimating) {
requestAnimationFrame(helper.animate);
}
for (var i = 0; i < surveys.length; i++) {
var survey = surveys[i];
if (helper.isColliding(survey, dinoSaurus)) {
sound = new Audio("audio/coinSound.mp3");
sound.play();
score += 5;
helper.resetSurvey(survey);
}
survey.y += survey.speed;
// if the survey is below the canvas,
if (survey.y > canvas.height) {
sound = new Audio("audio/buzzerSound.mp3");
sound.play();
helper.generateX();
helper.resetSurvey(survey);
}
}
// redraw everything
helper.drawAll();
}
-
resetSurvey: function(survey) {
// randomly position survey near the top of canvas
survey.x = Math.random() * (canvas.width - surveyWidth);
survey.y = 40 + Math.random() * 30;
survey.speed = (0.55 + Math.random()) * 0.9;
}
答案 0 :(得分：0)
请先尝试加载您的图片
如果我理解你的情况，我认为问题是你需要提前加载图像，以便在你想要绘制它时很容易就绪，而不是等待只在{{1}内加载它}。您当前编码的方式是，您正在加载图像（generateX），然后立即尝试绘制它。没错，您正在检查加载是否完成，如果没有，请稍后再次尝试。但是，更好的策略是更早地加载图像，例如在游戏初始化期间。
<强>演示
下面的代码片段展示了它的不同之处。它加载2个不同的图像。两者之间的唯一区别是一个（在左侧）提前加载而另一个（在右侧）仅加载在imgX.src = ...内。前一个图像在游戏周期中第一次正确显示，而后一个图像第一次丢失，仅在第二次正确显示。
generateXfunction loadLeftImageWellBeforeRunningGenerateX() { // correct timing
imgs[0] = new Image();
imgs[0].src = 'http://placehold.it/200x100.png';
}
function loadRightImageInsideGenerateX() { // incorrect timing
imgs[1] = new Image();
imgs[1].src = 'http://placehold.it/100x50.png';
}
function generateX() {
loadRightImageInsideGenerateX();
log('--inside generateX func');
imgs.forEach(function(imgX, num) { // same as your original code, just done for 2 different images
if (imgX.complete) {
log("----image #" + num + " (" + side[num] + "); " + 1 + ", i.e. image complete");
drawX(imgX, num);
} else {
log("----image #" + num + " (" + side[num] + "); " + 2 + ", i.e. image not complete");
imgX.onload = drawX(imgX, num);
}
});
}
function drawX(imgX, num) { // same as your original code, just allows placement of 2 images side-by-side
log("----image #" + num + " (" + side[num] + "); " + 3 + ", i.e. drawing image (" + prefix[num] + "successfully)");
context.drawImage(imgX, num * 150 + 10, 10, 100, 50);
if (num === 1) {prefix[1] = "";}
}
var
imgs = [],
numClicks = 0,
side = ["left", "right"],
prefix = ["", "un"],
button = document.querySelector("button"),
canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
context.fillStyle = "yellow";
context.fillRect(0, 0, 300, 150);
// as far as game logic goes, the only important lines below are marked with arrows
// the rest is just "fluff" to make the demo more understandable to the user
button.addEventListener("click", function() {
numClicks += 1;
if (numClicks === 1) {
log("You must clear your browser's recent cache every time you run this snippet " +
"in order for it to demonstrate the problems and solutions " +
"associated with loading images in this code.");
button.innerHTML = "Clear browser cache and click here again to start game initialization";
} else if (numClicks === 2) {
loadLeftImageWellBeforeRunningGenerateX(); // <----- ***
log("Game initializes. No images should yet be visible, " +
"but image #0 (left) should be loading/loaded now, i.e. ahead of time. " +
"Image #1 (right) is not yet loading/loaded. Click again to 'play game'.");
button.innerHTML = "Do NOT clear the browser cache and click here again to start playing game";
} else {
button.innerHTML = "Do NOT clear the browser cache and click here again to continue playing game";
if (numClicks === 3) {
log("Game begins. Images are required for the first time. Only the pre-loaded left image shows " +
"even though loading both is attempted.");
} else {
log("Game continues. On second and subsequent re-draws, both images are now available and visible.");
}
generateX(); // <----- ***
}
});
function log(msg) {
document.body.appendChild(document.createElement("p")).innerHTML = msg;
}p {
margin: 0.2em;
}
您的浏览器缓存可以隐藏此错误
顺便说一句，如果您尝试调试此类事物，请注意许多/大多数/所有浏览器都会缓存图像，如果您不了解此类错误，则可能很难复制此类错误发生了什么事。例如，您可能会运行您的错误代码，并且在游戏周期中第一次丢失图像。您研究代码，进行更改以尝试修复错误并再次运行代码。瞧，看起来问题是固定的，因为图像现在是第一次出现在游戏周期中。然而，实际上，它可能只出现在第一个周期中，不是因为错误是固定的，而是因为浏览器即使在第一个游戏周期中也能够使用缓存的图像，因此无需从源头加载它。简而言之，如果你试图调试这样的问题，你怀疑文件加载的时间很重要，但有时只会出现错误，请尝试清除浏览器的最新缓存以查看是否存在错误更明显。
清除浏览器的缓存：