我的HTML5画布游戏总是在画面之间闪烁
我的HTML5画布游戏总是在画面之间闪烁
提问于 2018-08-09 05:17:14
我最近开始开发一个HTML5 RPG canvas游戏，并决定做一个类似于“文本框”的东西，但是当我编写它的时候，它开始在蓝色和文本框之间每隔一帧闪烁。是什么导致了这种情况呢？
代码：https://github.com/Codezters/RPG-Game-1
重要代码(我认为大多数球员移动的东西都是不相关的)：
function update() {
if (realm == 'overworld') {
cc.fillStyle='blue';
cc.fillRect(0,0,c.width,c.height);
cc.drawImage(bob, x, y);
// Player Walk Animations
if (direction == 'up' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveUP1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleUP.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveUP2.png"
}
}
else if (direction == 'right' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveRIGHT1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleRIGHT.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveRIGHT2.png"
}
}
else if (direction == 'left' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveLEFT1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleLEFT.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveLEFT2.png"
}
}
else if (direction == 'down' && idleness == false) {
if (walkstage > 0 && walkstage <4) {
document.getElementById("source").src = "IdleMoveDOWN1.png"
}
else if (walkstage > 3 && walkstage < 7) {
document.getElementById("source").src = "IdleDOWN.png"
}
else if (walkstage > 6 && walkstage < 10) {
document.getElementById("source").src = "IdleMoveDOWN2.png"
}
}
if (idleframe == 8) {
if (direction == 'down') {
document.getElementById("source").src = "IdleDOWN.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'up') {
document.getElementById("source").src = "IdleUP.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'right') {
document.getElementById("source").src = "IdleRIGHT.png"
idleframe = 0;
idleness = true;
}
else if (direction == 'left') {
document.getElementById("source").src = "IdleLEFT.png"
idleframe = 0;
idleness = true;
}
if (talking == true) {
if (wordcount != textBoxTest.length) {
cc.drawImage(textBox, 0, 400);
cc.fillStyle = "white";
console.log("this is working")
cc.fillText(counted, 0, 100);
counted += textBoxTest[wordcount]
wordcount++;
}
else if (EnterToggle == true) {
EnterToggle = false;
talking = false;
}目前为止的游戏：https://codezters.github.io/RPG-Game-1/
解决方案：
当没有发生任何事情时，我不需要清理画布，所以我不太频繁地表明这一点，问题也就解决了。
回答 1
Stack Overflow用户
发布于 2018-08-09 07:25:09
HTML从一开始就是完全错误的，标签放在错误的位置和过时的元素。我的意思是无意冒犯，我们都必须从某个地方开始，但在尝试这项操作之前，您应该先完成HTML和JavaScript的基础课程。MDN是一个很好的起点。
您正在更改img标记的src属性，您根本不应该这样做。为每个文件使用不同的Image对象，并让您的代码选择要绘制的图像。这样可以确保所有图像在游戏开始前加载一次，而不是每次更改时都加载。加载可能以异步方式进行，并且会在您尝试绘制图像时出现尚未准备好绘制的错误。
您还可以使用以下代码：
window.onload= function() {
c=document.getElementById('gc');
document.addEventListener("keydown",keyPush)
cc=c.getContext('2d');
setInterval(update,1000/30);
};由于您通过setInterval运行更新，因此您每秒更新和绘制游戏33次。你应该有一个独立的函数来处理绘图，这个函数是用requestAnimationFrame(draw)调用的。这将确保浏览器只在可能的情况下绘制框架，并在计算机遇到问题时跳过绘制。有关更多信息，请阅读requestAnimationFrame上的文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51755765
复制相关文章
相似问题