먼저, Hammer.js를 웹 페이지에 추가합니다. 다음과 같이 <script> 태그를 통해 Hammer.js를 로드합니다.

<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>

이제 Hammer.js를 초기화하고 터치 이벤트를 처리할 요소를 선택합니다. 예를 들어, 게임 캔버스를 선택하고 이벤트 리스너를 추가합니다.

// 게임 캔버스 선택
var canvas = document.getElementById('game-canvas');

// Hammer.js 초기화
var hammer = new Hammer(canvas);

// 터치 이벤트 리스너 추가
hammer.on('pan', function(event) {
  // 터치 이벤트 처리 로직 작성
  // 예: 게임 캐릭터 이동
  var deltaX = event.deltaX;
  var deltaY = event.deltaY;
  // ... 추가 로직 작성
});

위의 코드에서 canvas 변수는 게임 캔버스 요소를 선택합니다. 이후 Hammer.js를 canvas 요소에 초기화하고, pan 이벤트에 대한 리스너를 추가합니다. pan 이벤트는 터치 드래그 이벤트를 의미하며, 이벤트 핸들러 함수 내에서 해당 터치 이벤트에 대한 로직을 작성하면 됩니다.

위의 코드에서는 터치 드래그로 인한 X축 및 Y축의 변위(deltaX 및 deltaY)를 계산하고, 이를 게임 캐릭터의 이동 로직에 사용하는 예제를 보여줍니다. 여기서는 이동 로직을 추가로 구현해야 합니다.

이와 같이 Hammer.js를 사용하여 터치 이벤트를 웹 게임에 적용할 수 있습니다. Hammer.js는 다양한 터치 및 제스처 이벤트를 지원하므로, 필요에 따라 다른 이벤트를 사용할 수도 있습니다. 자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.