이동 div 중력 효과 javascript/jquery

Question

자바 스크립트/jquery로 게임을 만들고 중력 효과를 만들기 위해 노력 중입니다. 나는 <div id="block"><img src="block/block1.png"/><div>을 가지고 있으며, 계속해서 아래로 움직이기를 원합니다. 그러나 나는 그것들을 바로 지나가는 대신에 다른 div의 꼭대기에 앉아 있기를 바랍니다.

var obj = $('#block'); 
function down() 
{ 
obj.animate({top:'-=20'}, 1000, down); 
} 
down(); 

Answer 1

This (fiddle) 우아하지 않고 많이 향상 될 수 있지만, 그것은 작동 : 지금까지 나는 노력했다. 그것은 매우 간단한 충돌 모델과 간격 타이머를 사용합니다. 일부 파트를 수정해야합니다 (그리고 개선하기를 바랍니다).

HTML :

<div class="gravity" style="width: 90px; height: 15px; background-color: red; position: absolute; top: 10px; left: 20px;"></div> 
<div class="gravity" style="width: 90px; height: 25px; background-color: green; position: absolute; top: 60px; left: 30px;"></div> 
<div class="gravity" style="width: 90px; height: 25px; background-color: gray; position: absolute; top: 30px; right: 45px;"></div> 
<div class="obstacle" style="width: 230px; height: 40px; background-color: blue; position: absolute; top: 240px; right: 19px;"></div> 
<div class="obstacle" style="width: 180px; height: 40px; background-color: blue; position: absolute; top: 90px; left: 30px;"></div> 

자바 스크립트 : 부정적인 의견과 같은 물건을 방지하기 위해

(function() { 
    // All falling objects 
    var gravity = $('.gravity'), 
    // All static objects 
     obstacle = $('.obstacle'); 
    var all = gravity.add(obstacle); 
    setInterval(function() { 
     // Calculate positions of all falling objects 
     gravity.each(function() { 
      var e = this, 
       g = $(this), 
       ypos = g.offset().top, 
       xpos = g.offset().left, 
       h = g.height(), 
       w = g.width(); 
      // Check whether something is in our way 
      var conflicts = false; 
      all.each(function() { 
       if(this === e) return; 
       var a = $(this); 
       if(xpos < a.offset().left + a.width() && xpos + w > a.offset().left) { 
        if(ypos + h > a.offset().top && ypos + h < a.offset().top + a.height()) { 
         conflicts = true; 
        } 
       } 
      }); 
      if(!conflicts) { 
       // Move down (real gravitation would be v = a * t) 
       g.css('top', g.offset().top + 3); 
      } 
     }); 
    }, 50); 
})(); 

: 예, 당신은 문서가로드 된 한 번이를 호출해야합니다. 예,이 코드는 더러 우며 프로덕션 환경에서는 사용하지 않아야합니다. 그것은 바로 그것이 주장하는 것입니다 - 실제적인 예입니다.