[javascript] 자바스크립트로 피쉬이야기 게임 개발하기

14 Dec 2023

javascript

피쉬이야기 게임은 HTML, CSS, 그리고 JavaScript를 사용하여 웹 브라우저 상에서 동작하는 간단한 게임입니다. 이 게임을 만들기 위해서는 다음과 같은 단계를 따라야 합니다.

HTML/CSS로 기본 구조 잡기
JavaScript로 게임 로직 구현하기
애니메이션 추가하기

1. HTML/CSS로 기본 구조 잡기

게임의 레이아웃과 디자인을 만들기 위해 HTML과 CSS를 사용합니다. 다양한 크기의 물고기 이미지나 바다 배경 이미지 등을 사용하여 게임 화면을 꾸밉니다.

예시:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>피쉬이야기 게임</title>
</head>
<body>
  <div class="fish-container">
    <img src="fish1.png" class="fish">
    <!-- 다른 물고기 이미지들 -->
  </div>
</body>
</html>

2. JavaScript로 게임 로직 구현하기

게임의 상호작용 및 동작을 처리하기 위해 JavaScript를 사용합니다. 마우스 움직임에 따라 물고기가 움직이거나, 클릭 시 물고기가 멈추는 등의 기능을 추가합니다.

예시:

// 물고기 이미지 선택
const fish = document.querySelector('.fish');

// 마우스 이벤트 처리
fish.addEventListener('mousemove', (e) => {
  // 마우스 위치에 따라 물고기 위치 변경
  fish.style.left = e.pageX + 'px';
  fish.style.top = e.pageY + 'px';
});

// 클릭 이벤트 처리
fish.addEventListener('click', () => {
  // 물고기 멈추는 동작 추가
  // 예: fish.style.animation = 'none';
});

3. 애니메이션 추가하기

애니메이션을 사용하여 물고기가 수영하는 것처럼 보이도록 만들어줍니다. CSS의 @keyframes나 JavaScript의 requestAnimationFrame을 사용하여 애니메이션을 추가할 수 있습니다.

예시:

@keyframes swim {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.fish {
  position: absolute;
  animation: swim 4s infinite linear;
}

이와 같은 단계로 자바스크립트로 피쉬이야기 게임을 만들 수 있습니다.

[참고 자료]