我正在尝试在js中制作蛇游戏,我有这个移动代码,其中sq正在移动div:
window.onkeyup = function move(e)
{
switch(e.keyCode)
{
case 37:
function moveLeft()
{
sq.style.left = parseInt(sq.style.left) - 20 + 'px';
checkGameOver();
}
setInterval(moveLeft, 500);
break;
case 38:
function moveUp()
{
sq.style.top = parseInt(sq.style.top) - 20 + 'px';
checkGameOver();
}
setInterval(moveUp, 500);
break;
case 39:
function moveRight()
{
sq.style.left = parseInt(sq.style.left) + 20 + 'px';
checkGameOver();
clearTimeout(timeLeft);
}
setInterval(moveRight, 500);
break;
case 40:
function moveDown()
{
sq.style.top = parseInt(sq.style.top) + 20 + 'px';
checkGameOver();
}
setInterval(moveDown, 500);
break;
}
}
但是任何时候我改变移动方向,最后一个方向保持不变,移动是不正确的。问题是我如何才能做出正确的运动,以及如何停止一个div?
将interval
分配给variable
,并在设置新间隔之前将其清除:
var movementInterval;
window.onkeyup = function move(e)
{
if(movementInterval) {
clearInterval(movementInterval);
}
switch(e.keyCode)
{
case 37:
function moveLeft()
{
sq.style.left = parseInt(sq.style.left) - 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveLeft, 500);
break;
case 38:
function moveUp()
{
sq.style.top = parseInt(sq.style.top) - 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveUp, 500);
break;
case 39:
function moveRight()
{
sq.style.left = parseInt(sq.style.left) + 20 + 'px';
checkGameOver();
clearTimeout(timeLeft);
}
movementInterval = setInterval(moveRight, 500);
break;
case 40:
function moveDown()
{
sq.style.top = parseInt(sq.style.top) + 20 + 'px';
checkGameOver();
}
movementInterval = setInterval(moveDown, 500);
break;
}
}
否则你将继续创建新的intervals
与每个按键。