>

코드에 문제가 있습니다. 화살표 키를 사용하여 움직이는 객체를 만들었습니다. 내가 달성하려는 것은 객체가 특정 위치, 특히 500px 아래로 1100px 오른쪽에 도달하면 버튼을 클릭하지 않고도 창 경고를 트리거한다는 것입니다.

여기까지 내 코드가있다.

도움을 주셔서 감사합니다.

<h2>Use arrow keys to move the train and reach the destination</h2>
<div>
<img id="trainpic" 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Icon_train. 
svg/2000px-Icon_train.svg.png" style="width:150px; height=120px;">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<div>
<img id="destination" 
src="https://upload.wikimedia.org/wikipedia/commons/0/03/Kosovo_stub.svg" 
style="float: right; width:220px; height=190px;">
</div>

<script>
var train = $("#trainpic");
space = 0;
function checkSpace() {
if (space === 12)
{
$(train).animate({left: "0px"}, 'fast');
}
}
$(document).keydown(function(e) {
$(train).keydown;
switch(e.which) {
case 37:
$(train).animate({left: "-=100px"}, 'fast');
break;
case 38:
$(train).animate({top: "-=100px"}, 'fast');
break;
case 39:
$(train).animate({left: "+=100px"}, 'fast');
space++;
checkSpace();
break;
case 40:
$(train).animate({top: "+=100px"}, 'fast');
break;
};
});
</script>
<script>
var train = $("#trainpic");
if(($(train).css('left') == '-1100px')&& ($(train).css('top') == '-500px'))
{
   window.alert("You have reached your destination!");
}
</script>

  • 답변 # 1

    알림을 트리거하려면 점검 로직을 함수로 랩핑하고 키 다운 이벤트 내에서 호출해야합니다.

    function CheckPosition(){
        var train = $("#trainpic");
        if(($(train).css('left') == '-1100px')&& ($(train).css('top') == '-500px'))
        {
           window.alert("You have reached your destination!");
        }
    }
    
    

    그럼

    $(document).keydown(function(e) {
         ...
         CheckPosition();
    });
    
    

  • 답변 # 2

    내가하는 것은 트리거링 오브젝트에 대한 충돌 감지입니다. 그렇게하면 다른 물체가 어디에 있는지 정확히 걱정할 필요가 없습니다. 그러면 애니메이션의 콜백에서 전화를 걸 수 있습니다.

    function getPositions(box) {
      var $box = $(box);
      var pos = $box.position();
      var width = $box.width();
      var height = $box.height();
      return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }
    function comparePositions(p1, p2) {
      var x1 = p1[0] < p2[0] ? p1 : p2;
      var x2 = p1[0] < p2[0] ? p2 : p1;
      return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
    }
    function checkCollisions(){
      var box = $("#destination")[0];
      var pos = getPositions(box);
      var pos2 = getPositions(this);
      var horizontalMatch = comparePositions(pos[0], pos2[0]);
      var verticalMatch = comparePositions(pos[1], pos2[1]);            
      var match = horizontalMatch && verticalMatch;
      if (match) { window.alert("You have reached your destination!");}
    }
    
    

    그런 다음 "checkCollisions"를 모든 애니메이션 인스턴스의 콜백으로 추가합니다.

    case 37:
    $(train).animate({left: "-=100px"}, 'fast', checkCollisions);
    break;
    
    

  • 이전 circleci - 서클 20 - 캐시가 활성화 된 경우에만 각도 5 빌드 실패
  • 다음 linux - r 반짝임 - 반짝이는 앱은 로컬 및 다른 반짝이는 서버에서 잘 작동하지만 내 서버에서는 작동하지 않습니다 오류 메시지가 없습니다