Stop Javascript "Animation" onclick div

Ich bin ein Anfänger in Javascript und ich versuche, ein sehr einfaches Spiel zu machen. Ich weiß, dass mein Code nicht der beste ist, aber ich möchte es zum Laufen bringen. Ich möchte die Funktion nahoru() anhalten oder sie in die andere Richtung bewegen und nachdem sie den unteren Rand der Seite berührt/100%, wiederhole es.Stop Javascript "Animation" onclick div

<html> 
 

 
<head> 
 
    <script> 
 
     function naloud() { 
 
      var elem = document.getElementById("krtek"); 
 
      elem.style.top = '100%'; 
 
      var eleme = document.getElementById("krtek2"); 
 
      eleme.style.top = '100%'; 
 
      var elemen = document.getElementById("krtek3"); 
 
      elemen.style.top = '100%'; 
 
     } 
 
     var pos = 100; 
 
     var los = 0; 
 

 
     function nahoru() { 
 
      var elemend = document.getElementById("batn"); 
 
      elemend.style.opacity = '0'; 
 

 
      var elem = document.getElementById("krtek"); 
 
      var id = setInterval(frame, 30); 
 

 
      function frame() { 
 
       if (pos == 0) { 
 
        clearInterval(id); 
 
        document.write('<center>GAME OVER<br>YOUR SCORE: ' + skore + 
 
         '<br>Press F5 for restart.') 
 

 
       } else { 
 
        pos = pos - 1; 
 
        elem.style.top = pos + '%'; 
 
       } 
 
      } 
 
     } 
 
     var skore = 0; 
 

 
     function pric() { 
 
      skore++; 
 
      document.getElementById("skore").innerHTML = "Skore: " + skore; 
 
      elem.style.top = '+100%'; 
 
     } 
 
    </script> 
 
    <style> 
 
     .prvni { 
 
      position: absolute; 
 
      width: 10%; 
 
      height: 110%; 
 
      left: 10%; 
 
      background-color: brown; 
 
     } 
 
     
 
     .druhy { 
 
      position: absolute; 
 
      width: 10%; 
 
      height: 110%; 
 
      left: 45%; 
 
      background-color: brown; 
 
     } 
 
     
 
     .treti { 
 
      position: absolute; 
 
      width: 10%; 
 
      height: 110%; 
 
      left: 80%; 
 
      background-color: brown; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body onload="naloud()"> 
 
    <button onclick="nahoru()" id="batn">START</button> 
 
    <div id="skore">Skore: 0</div> 
 
    <div id="krtek" class="prvni" onclick="pric()"></div> 
 
    <div id="krtek2" class="druhy" onclick="pric()"></div> 
 
    <div id="krtek3" class="treti" onclick="pric()"></div> 
 
</body> 
 

 
</html>

Quelle

2017-01-31 Tomáš Hobza

Bitte überprüfen Sie http: // Stackoverflow Sehen Sie sich an, wie Sie ein minimales, vollständiges und überprüfbares Beispiel erstellen können: – pringi

Declare id außerhalb nahoru Funktion, wie hier

var pos = 100; 
var los = 0; 
var id = null;

Set Intervall in nahoru Funktion, wie folgt aus (wichtig, entfernen var von hier)

id = setInterval(frame, 30);

Nun klare Intervall in pric Funktion wie diese

function pric(elem) { 
     skore++; 
     clearInterval(id); 
     document.getElementById("skore").innerHTML = "Skore: " + skore; 
     elem.style.top = '+100%'; 
    }

Arbeiten https://jsfiddle.net/ee1bdL5k/

Quelle

2017-01-31 14:12:02 Kenny

Vielen Dank. Ich habe erwartet, dass ich lange auf eine Antwort warten würde, aber Sie haben mich anders überzeugt. –

Sie erklären müssen diese var außerhalb von Funktion, für die pric Funktion:

var elem, eleme, elemen; 
function naloud() { 
    elem = document.getElementById("krtek"); 
    elem.style.top = '100%'; 
    eleme = document.getElementById("krtek2"); 
    eleme.style.top = '100%'; 
    elemen = document.getElementById("krtek3"); 
    elemen.style.top = '100%'; 
}

Quelle

2017-02-03 08:51:38

Stop Javascript "Animation" onclick div

Antwort

Verwandte Themen