我正在用javascript编写一个简单的益智游戏。 You can play it here和source code is here。它使用音符作为游戏片段,您可以按“播放”按钮使其播放音符。音符在播放时也会亮起。问题是声音和不断变化的图形之间似乎存在滞后。
对于音频播放方法this.playToneRow()
,我使用全局变量迭代所有音符,然后在显示片段this.drawNotes()
的方法中,我抓住了它的值全局变量,以确定哪个游戏块应该点亮。但我猜这不是最好的方法,因为.play()调用和实际声音之间似乎存在延迟。
所以我认为控制变化图形的更好方法是某种方法可以告诉哪个音频对象正在播放(如果有的话)然后我可以更改相应的图像。
this.playToneRow = function()
{
var x = 0,
length = (this.notes.length + 2),
myArray = this.notes;
j = 0;
currentSound = this.player;
function runIteration () {
x = myArray[j];
setTimeout(function()
{
if (typeof x === 'number')
{
noteSound[x].play();
}
}, 500);
if (j === length)
{
j = -1;
currentSound = 0;
return;
}
j++;
setTimeout(runIteration, 500);
}
runIteration();
};
this.drawNotes = function()
{
this.noteText = "";
for (var i = 0; i < 12; i++)
{
this.noteText += noteNames[this.notes[i]];
this.noteText += ", ";
if (((j - 3) === i) && (currentSound === this.player))
{
ctx.drawImage(this.gamePieceHi, (i * 52) + 85, 275 - (this.notes[i] * 17.7));
}
else
{
ctx.drawImage(this.gamePiece, (i * 52) + 95, 285 - (this.notes[i] * 17.7));
}
}
};
答案 0 :(得分:0)
似乎this.playToneRow()
从现在开始通过setTimeout()
将声音排队500毫秒,但绘制音符的部分会立即运行。