Javascript, game, javascript의 부모 div에 상대적인 div 요소의 위치 (x, y)를 어떻게 결정합니까?

Question

나는 바보 같은 '게임'을 만들었습니다. 캐릭터가 오른쪽에서 왼쪽으로 무한 루프 (반복)되는 블록 위로 뛰어 넘을 수있게함으로써이 바보 같은 게임을 개선하고 싶습니다. 문자 div의 위치와 스크롤 블록 div의 위치를 ​​결정하는 방법을 알아 내려고 노력 중입니다.

문자 위치 (x) == 블록 위치 (x)를 확인하는 조건문을 설정할 수 있도록 알고 싶습니다. 그러면 게임이 끝납니다. 그렇지 않으면 문자 위치 (x) == 블록 위치 (x) & & 문자 위치 (y) ==! 블록 위치 (y)는 포인트가 부여됩니다 (블록을 ​​건너 뛰기).

지금까지 positon()을 사용하여 캐릭터를 움직이는 keydown 이벤트가 발생할 때마다 콘솔에 로깅을 시도했습니다. 그렇게하면 캐릭터의 위치를 ​​추적 할 수 있습니다. 나는 내 배경 (div id = 'bg')의 범위를 수동으로 결정하고 바운드를 사용하여 캐릭터가 바깥쪽으로 움직이는 것을 제한해야했습니다. 그러나 맵 중간에 정적 블록을 도입하면 위치에 상관없이 항상 position() = 0이라고 표시됩니다. 이것은 블럭을 나타내는 배경 div에 넣은 단순한 사각형입니다.

나는 정말로 무엇을하고 있는지 알지 못한다. 나는 단지 재미있는 것을 만들려고 노력했고, 지금은 매우 혼란 스럽다. 나는 일주일 동안 코딩을하고 있었고 내가 무엇을하고 있는지 전혀 모른다. 나는 충돌 탐지 문서의 토끼 구멍에 내려 갔지만 지금까지는 머리 위를 넘었다. 이것은 단순한 작업처럼 보일지도 모르겠다. 여기

내가 비교 지금

$(document).ready(function() { 

// movement functions 
$(document).keydown(function(key) { 
    switch(parseInt(key.which,10)) { 
     // Left arrow key pressed - move left 
     case 37: 
      if($('#character').position().left > 0){ 
       $('#character').animate({left: "-=10px"}, 'fast'); 
       console.log($('#character').position()); 
      } 

      else{ 
       $('#character').clearQueue(); 
      } 
      break; 
     // Right Arrow Pressed - move right 
     case 39: 

      // condition to keep in bounds of bg div 

      if($('#character').position().left < 720){ 
       $('#character').animate({left: '+=10px'}, 'fast'); 
      console.log($('#character').position()); 
      } 

      // clear animate request if cndtn fails 
      else{ 
       $('#character').clearQueue(); 
      } 
      break; 

     // Space key pressed - (jump animation) 
     case 32: 
      if($('#character').position().left < 720){ 
      $('#character').animate({top: '-=50px'}, 'fast').animate({left: '+=10px'}, 'fast').animate({top: '+=50px'}, 'fast'); 
      console.log($('#character').position()); 
      } 
      else{ 
       $('#character').clearQueue(); 
      } 
      break; 
    } 
}); 

// hide rules once keys are pressed 
$(document).on('keydown', function(){ 
    $('#rules').fadeOut(1000); 
    $('#res').fadeOut(100); 
    }); 

// character select button 
$('#charSelect').click(function(){ 

    var input = prompt("paste image link here"); 
    $('#character').css('background-image','url('+input+')'); 
    $('#res').show(); 



}); 

// background select button 
$('#bgSelect').click(function(){ 
var input = prompt("paste image link here"); 
    $('#bg').css('background-image', 'url('+input+')'); 
    $('#res').show(); 

}); 

//reset button 
$('#reset').click(function(){ 
    $('#character').css('background-image','url(Character.jpg)'); 
    $('#character').css('left','0px'); 
    $('#bg').css('background-image','url("Background.jpg")'); 
$('#rules').show(); 
$('#res').show();  

}); 

}); 

Answer 1

당신은 오프셋 사용할 수있는 기능을 가지고 코드 여기 내 stupid game

입니다 위치 : VAR 차이 = $ ('# 문자') (오프셋.) .left - $ ('# another-div'). 오프셋(). 왼쪽;