JavaScript - Gravity setInterval（） - プラットフォームの衝突

bodyのsetInterval（fall、1000）関数によってトリガされるparseInt（its.style.top）を使用してウィンドウを「落ちる」ようにimg要素をプログラミングしました。JavaScript - Gravity setInterval（） - プラットフォームの衝突

Moves（）関数がトリガされ、fall（）関数が呼び出されなくなるとエラーが発生します。 img s.style.left> = r.style.width ??の後にsetInterval（fall、1000）を再度呼び出すMoves（）関数のif文がありますか？

ありがとうございます！ :-)

<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>

出典

2016-10-29 ctaylorgraphics

fall'が働くので '関数、あなたがMove''にしようとしていない場合は？通常、 'Element.getBoundingClientRect（）'のようなものを使用して 'top'プロパティと' left'プロパティを取得します。これは 'style'プロパティが多くのブラウザで取得できないためです。 – PHPglue

私は、これはあなたがやろうとしていたものであると信じて：

<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>

出典

2016-10-29 01:25:10

作品:-)「ありがとう、Chupo_cro !!」 – ctaylorgraphics

JavaScript - Gravity setInterval（） - プラットフォームの衝突

答えて

関連する問題