JavaScript - Gravity setInterval() - Platform Kollision

Ich programmierte ein img-Element, um das Fenster mit parseInt (its.style.top) durch eine setInterval (Fall, 1000) -Funktion im Körper ausgelöst "fallen".JavaScript - Gravity setInterval() - Platform Kollision

Ein Fehler tritt auf, nachdem die Funktion Moves() ausgelöst wurde und die Funktion fall() nicht mehr aufgerufen wird. Gibt es eine if-Anweisung für die Funktion Moves(), um setInterval (fall, 1000) nach der img s.style.left> = r.style.width erneut aufzurufen?

Danke! :-)

<html> 
<body onload="setInterval(fall,1000)" onkeydown="Moves()"> 

<img id="square" style="position:absolute; left:10px; top:0px;  
width:50px; height:50px; background-color:red;" /> 

<img id="rectangle" style="position:absolute; left:10px; top:130px; 
width:150px; height:10px; background-color:blue;" /> 

<script> 

function fall(){ 
var s = document.getElementById("square"); 
s.style.top = parseInt(s.style.top) + 25 + 'px'; 


var r = document.getElementById("rectangle"); 
r.style.top=130 + 'px'; 

if(s.style.top>=r.style.top){s.style.top=r.style.top;} 
} 

function Moves(){ 
var s = document.getElementById("square"); 
if (event.keyCode==39) { 
s.style.left = parseInt(s.style.left)+10+'px';} 

var r = document.getElementById("rectangle"); 
r.style.width=150 + 'px'; 

if(s.style.left>=r.style.width){setInterval(fall,1000);} 
} 

</script> 

</body> </html>

Quelle

2016-10-29 ctaylorgraphics

So 'Funktion fall' funktioniert, wenn Sie' Move' nicht versuchen? Normalerweise verwenden Sie etwas wie 'Element.getBoundingClientRect()', um 'top'- und' left'-Eigenschaften zu erhalten, da 'style'-Eigenschaften in vielen Browsern nicht abgerufen werden können. – PHPglue

Ich glaube, das ist, was Sie zu tun haben versucht:

<html> 
<body onload="setTimeout(fall,1000)" onkeydown="Moves()"> 

    <img id="square" style="position:absolute; left:10px; top:0px;  
    width:50px; height:50px; background-color:red;" /> 

    <img id="rectangle" style="position:absolute; left:10px; top:130px; 
    width:150px; height:10px; background-color:blue;" /> 

    <script> 
     var over_edge = false; 
     var can_fall = true; 

     function fall(){ 
      var s = document.getElementById("square"); 
      s.style.top = parseInt(s.style.top) + 25 + 'px'; 


      var r = document.getElementById("rectangle"); 
      //r.style.top=130 + 'px'; 

      if(!over_edge) { 
       if(parseInt(s.style.top) >= parseInt(r.style.top) - parseInt(s.style.height)) { 
        s.style.top = parseInt(r.style.top) - parseInt(s.style.height); 
        can_fall = false; 
       } 
      } 
      if(can_fall || over_edge) 
       setTimeout(fall, 1000); 
     } 

     function Moves(){ 
      var s = document.getElementById("square"); 
      if (event.keyCode==39) { 
       s.style.left = parseInt(s.style.left)+10+'px';} 

       var r = document.getElementById("rectangle"); 
       //r.style.width=150 + 'px'; 

       if(parseInt(s.style.left) >= parseInt(r.style.left) + parseInt(r.style.width)) { 
        if(!over_edge) { 
         over_edge = true; 
         fall();    // trigger falling over the edge but only once 
        } 
       } 
      } 

    </script> 
</body> 
</html>

Quelle

2016-10-29 01:25:10

Es funktioniert :-) "Danke, Chupo_cro !!" – ctaylorgraphics

JavaScript - Gravity setInterval() - Platform Kollision

Antwort

Verwandte Themen