낚시게임 코딩

 

HTML, CSS, JS만으로 만드는 간단한 낚시 게임 예제를 만들어볼게.
이건 브라우저에서 바로 실행 가능하고, 기본적인 낚시 메커니즘을 갖추고 있어.

🎮 기능 설명

  • 물고기들이 화면 아래서 위로 올라옴

  • 플레이어는 타이밍 맞춰 "낚시 버튼" 클릭

  • 타이밍이 맞으면 "물고기 잡힘!", 아니면 놓침!

📦 구성

  • index.html

  • style.css

  • script.js

✅ 1. index.html

html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>🎣 낚시 게임</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>🎣 낚시 게임</h1>
  <div id="game">
    <div id="water">
      <div id="fish"></div>
    </div>
    <button id="fishBtn">낚시!</button>
    <p id="message">물고기를 기다리세요...</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

✅ 2. style.css

css
body {
  font-family: sans-serif;
  text-align: center;
  background: #d4f1f9;
  margin: 0;
  padding: 20px;
}

#game {
  margin: 0 auto;
  width: 300px;
  position: relative;
}

#water {
  background: #4cc9f0;
  height: 400px;
  border: 4px solid #168aad;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

#fish {
  width: 40px;
  height: 40px;
  background: url('https://emojicdn.elk.sh/🐟') center/contain no-repeat;
  position: absolute;
  bottom: 0;
  left: 130px;
  transition: bottom 0.5s ease-in-out;
}

#fishBtn {
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  background: #48cae4;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
}

#message {
  margin-top: 15px;
  font-size: 18px;
}

✅ 3. script.js

javascript
const fish = document.getElementById("fish");
const message = document.getElementById("message");
const fishBtn = document.getElementById("fishBtn");

let fishY = 0;
let interval;
let isCatchZone = false;

function moveFish() {
  fishY = Math.floor(Math.random() * 250) + 50;
  fish.style.bottom = fishY + "px";
  isCatchZone = true;

  setTimeout(() => {
    fish.style.bottom = "0px";
    isCatchZone = false;
  }, 1500);
}

function loopFish() {
  interval = setInterval(() => {
    moveFish();
  }, 3000);
}

fishBtn.addEventListener("click", () => {
  if (isCatchZone) {
    message.textContent = "🐠 물고기를 잡았어요!";
  } else {
    message.textContent = "❌ 놓쳤어요! 다시 시도하세요!";
  }
});

loopFish();

▶ 실행 방법

  1. 위 코드 세 개를 각각 index.html, style.css, script.js로 저장

  2. index.html을 브라우저에서 실행

  3. 게임을 즐겨봐! 🎮

🎨 확장 아이디어

  • 잡은 물고기 개수 카운트

  • 다양한 물고기 이미지 랜덤 등장

  • 시간 제한, 점수 시스템 추가

  • 배경음/효과음 추가

댓글

댓글 쓰기

가장 많이 본 글