Question

我正在使用Javascript制作游戏。我有左，右，重力和向下移动的功能。重力功能使玩家的位置一旦离开平台（div）就会到达屏幕的底部。当你向右移动时调用gravity（）函数（OnButtonDownr（））它会停止向上移动。我的意思是，当我离开平台然后尝试上升它不起作用但我可以在我离开平台之前上升。当我试图上升（并且它不起作用）时，它有一个奇怪的效果，看起来它的位置被设置为0但同时向上移动。我的代码：

HTML（index.htm）：

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>


<div id='level' class='level'>
    <div class='start_platform' id='plat1'></div>
    <div class='platform' style='

                                 '></div>
</div>


    <img id='player' src='img/player.png' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button>
        <button id='moveup' onmousedown="OnButtonDownu (this)" onmouseup="OnButtonUpu (this)">^</button>
        <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button>
    </div>
</body>

<script type='text/javascript' src='scripts/move.js'></script>
<script type='text/javascript' src='scripts/gravity.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</html>

JS（move.js）：

//move left
var elem = document.getElementById("player");
function OnButtonDownl (button) {
  var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
window.idl = setInterval(framel, 5);
function framel() {
    posl--;
    elem.style.left = posl + 'px';
    gravityCheck();
}}
function OnButtonUpl (button) {
    clearInterval(idl);
}

//move right
var elem = document.getElementById("player");
function OnButtonDownr (button) {
var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
window.idr = setInterval(framer, 5);
function framer() {
    posr++;
    elem.style.left = posr + 'px';
    gravityCheck();
}}
function OnButtonUpr (button) {
    clearInterval(idr);
}

//move up
var elem = document.getElementById("player");
function OnButtonDownu () {
var posu = parseInt(document.getElementById("player").style.bottom, 10) || 0;
window.idu = setInterval(frameu, 5);
elem.style.bottom = 0;
function frameu() {
    gravity = false;
    posu++;
    elem.style.bottom = posu + 'px';
}}
function OnButtonUpu (button) {
    clearInterval(idu);
}

JS（gravity.js）：

var gravity = true;
function gravityCheck() {
var player = parseInt(document.getElementById("player").style.left, 10) || 0;
var plat1 = parseInt(document.getElementById("plat1").style.left, 10) || 0;

var width = player - plat1;

    var elem = document.getElementById("player");
    var pos = parseInt(document.getElementById("player").style.bottom, 10) || 0;
    window.id = setInterval(frame, 5);
    function frame() {
    if(width > 100 && width < 164) {
    if(gravity = true) {
        pos--;
        elem.style.bottom = pos + 'px';
        if(elem.style.bottom = 0) {
            clear();
        }
    }
    }
    }
function clear() {
clearInterval(id);
}}

我该如何解决这个问题。提前谢谢。

Answer 1

您可能无法正常清理。在设置间隔之前，请清除之前设置的间隔。

if(window.idl) clearInterval(window.idl);
window.idl = setInterval(framel, 5);

Javascript - setInterval（）仍然在clearInterval（）调用

1 个答案: