我最近开始开发一个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/
解决方案:
当没有发生任何事情时,我不需要清理画布,所以我不太频繁地表明这一点,问题也就解决了。
发布于 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上的文档。
https://stackoverflow.com/questions/51755765
复制相似问题