[jQuery] 캐릭터 이동 이벤트

jQuery의 키 이벤트 기능을 사용하면

캐릭터 이동을 쉽게 구현할 수 있습니다.

우선 방향키를 눌렀을 때마다 보여질 4개의 이미지를 준비합니다.

저같은 경우는 이렇게 4가지를 준비했습니다.

 

이미지가 많으면 많을수록

ex) 오른쪽으로 걷는 동작 매 키프레임마다 이미지 4개

동작은 자연스러워 지지만 저는 DALLE3로 만들었기 때문에

이미지 4개로 간단하게 구현했습니다.

코드를 살펴볼까요?

 

$(document).keydown(function(e) {

  switch (e.keyCode) {

      case 37:

          leftPosition -= 15;

          $("#down-img").attr("src", "resources/img/left.png");

          break;

      case 38:

          topPosition -= 15;

          $("#down-img").attr("src", "resources/img/up.png");

          break;

      case 39:

          leftPosition += 15;

          $("#down-img").attr("src", "resources/img/right.png");

          break;

      case 40:

          topPosition += 15;

          $("#down-img").attr("src", "resources/img/down.png");

          break;

  }    $("#down-img").stop().animate({

    top: topPosition + "px",

    left: leftPosition + "px"

}, 100);

 

각각 방향키를 눌렀을 때

top과 left의 위치를 증감시켜서

캐릭터가 이동하는 것 처럼 보이게

이미지를 이동시켰습니다.

이떄 stop.animate라는 기능을 써서

캐릭터가 부드럽게 이동하도록 효과를 주었습니다.

 

이동 모습입니다.