Javascript - setInterval() läuft immer noch nach clearInterval() namens

Ich mache ein Spiel mit Javascript. Ich habe Funktionen zum Bewegen nach links, rechts, Schwerkraft und nach unten. Die Gravitationsfunktion bewirkt, dass die Position des Spielers nach dem Verlassen der Plattform (div) an den unteren Bildschirmrand verschoben wird. Wenn die Funktion gravity() aufgerufen wird, wenn Sie sich nach rechts bewegen (OnButtonDownr()), wird die Aufwärtsbewegung gestoppt. Was ich meine ist, dass, wenn ich rechts und von der Plattform gehe und dann versuche, nach oben zu gehen, es nicht funktioniert, aber ich kann gehen, bevor ich von der Plattform gehe. Wenn ich versuche, nach oben zu gehen (und es funktioniert nicht), hat es einen seltsamen Effekt, der aussieht, als ob seine Position auf 0 gesetzt wird, aber gleichzeitig nach oben geht. Mein Code:Javascript - setInterval() läuft immer noch nach clearInterval() namens

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); 
}}

Wie behebe ich das? Danke im Voraus.

Quelle

2016-07-16 Ben Welch

Möglicherweise werden Sie nicht richtig gelöscht. Vor dem Einstellen des Intervalls löschen Sie alle vorher eingestellten.

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

Quelle

2016-07-16 15:31:19

Javascript - setInterval() läuft immer noch nach clearInterval() namens

Antwort

Verwandte Themen