JavaScript - Гравитационный наборInterval() - Столкновение с платформой

Я запрограммировал элемент img, чтобы «упасть» вниз по окну с помощью parseInt (its.style.top), вызванного функцией setInterval (падение, 1000) в теле.JavaScript - Гравитационный наборInterval() - Столкновение с платформой

Ошибка, возникшая после срабатывания функции Moves(), и функция fall() перестает вызываться. Есть ли инструкция if для функции Moves() для вызова setInterval (fall, 1000) снова после img s.style.left> = r.style.width ??

Спасибо! :-)

<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 - Гравитационный наборInterval() - Столкновение с платформой

ответ

Смежные вопросы