Froggy Jump! (개구리 점프!)

🐸 Froggy Jump! (개구리 점프!)

Control the cute frog to cross the dangerous road and river safely.
Land on all 4 lily pads to clear the stage!

귀여운 개구리를 조작해 위험한 도로와 강을 건너 안전하게 이동하세요.
4개의 연꽃잎에 모두 올라가면 스테이지 클리어!

🐸 Froggy Jump!

Score: 0 Lv: 1

🐸 Froggy Jump!

⬆️
⬅️
⬇️
➡️

🎮 How to Play

  • Goal: Guide the frog across the road and river to safely reach one of the 4 lily pads at the top.
  • Controls: Use keyboard arrow keys (⬆️⬇️⬅️➡️) on PC, or the on-screen buttons on mobile devices.
  • Rules:
    • 🚗 You lose a life if you hit a car or fall into the 💧 river.
    • 🪵 You must ride on logs to cross the river.
    • Land on all 4 lily pads to clear the stage! The level will then increase.

🎮 게임 방법

  • 목표: 개구리를 조작하여 도로와 강을 건너, 상단에 있는 4개의 연꽃잎에 안전하게 도착시키세요.
  • 조작법: PC는 키보드 방향키(⬆️⬇️⬅️➡️), 모바일은 화면 하단의 버튼을 사용합니다.
  • 규칙:
    • 🚗 자동차에 부딪히거나 💧 강물에 빠지면 라이프가 줄어듭니다.
    • 🪵 강에서는 통나무 위에 올라타서 이동해야 합니다.
    • 4개의 연꽃잎에 모두 올라가면 스테이지 클리어! 레벨이 올라갑니다.

🏗️ Architecture & Core Logic

This game is a web-based arcade game adopting a single canvas rendering approach. It is implemented using only pure JavaScript and the HTML5 Canvas API without any external game engines.

  • Game Loop: Utilizes a continuous rendering loop mechanism to clear the screen, update object states, and redraw the scene frame by frame. Updates are based on Delta Time to ensure consistent gameplay speed across different devices and frame rates.
  • Entity Component: Defines entities like the frog and obstacles (cars, logs) as Classes, encapsulating independent properties (position, speed, skin) and behaviors (movement, drawing).
  • Responsive Scaling: Calculates the ratio between logical pixels and physical pixels (DPR) to maintain rendering quality on high-resolution (Retina) displays.

🏗️ 아키텍처 및 핵심 로직

이 게임은 단일 캔버스 렌더링 방식을 채택한 웹 기반 아케이드 게임입니다. 별도의 게임 엔진 없이 순수 JavaScript와 HTML5 Canvas API만을 사용하여 구현되었습니다.

  • Game Loop (게임 루프): 연속적인 렌더링 루프 메커니즘을 사용하여 화면을 지우고, 객체 상태를 업데이트하고, 프레임을 다시 그리는 과정을 반복합니다. 델타 타임(Delta Time)을 사용하여 기기 성능이나 프레임 속도와 관계없이 일정한 게임 속도를 보장합니다.
  • Entity Component (객체 관리): 개구리, 장애물(차량, 통나무) 등을 클래스(Class)로 정의하여 독립적인 속성(위치, 속도, 스킨)과 행동(이동, 그리기)을 캡슐화했습니다.
  • Responsive Scaling (반응형): 고해상도(Retina) 디스플레이 지원을 위해 논리적 픽셀과 물리적 픽셀 비율(DPR)을 계산하여 렌더링 품질을 유지합니다.

💡 Algorithm Development Guide

Here are key points to consider when developing a 2D grid-based movement game similar to this one.

1. Grid System and Coordinate Transformation

The game world is logically composed of a grid. However, for smooth movement, visual coordinates (Pixel) and logical coordinates (Grid Index) must be separated. When a movement command is input, the grid coordinates are updated immediately, while the visual pixel coordinates follow smoothly using Linear Interpolation (LERP).

2. Collision Detection

Uses the efficient AABB (Axis-Aligned Bounding Box) algorithm. It checks every frame if the frog's hitbox overlaps with any obstacle's hitbox. A key point in the 'river' area is inverting the logic: the default state is "drowning," and survival is only possible when "colliding with a log (safe)."

3. Object Pooling & Reuse

Creating and deleting cars and logs constantly with `new` causes memory inefficiency. This game optimizes performance by using a 'circular queue' approach where objects moving off-screen are not deleted but moved to the opposite starting point for reuse.

4. State-Based Game Flow Control

The game has states such as `Playing`, `LevelClear`, `GameOver`, and `Dying` (during death animation). Input and update logic behave differently based on the current state. For example, in the `Dying` state, key inputs are ignored, and only the death animation is played.

💡 알고리즘 개발 가이드

이 게임과 유사한 2D 격자 이동 게임을 개발할 때 고려해야 할 핵심 포인트입니다.

1. 격자(Grid) 시스템과 좌표 변환

게임 월드는 논리적으로 바둑판 같은 격자(Grid)로 구성됩니다. 하지만 부드러운 이동을 위해 시각적 좌표(Pixel)와 논리적 좌표(Grid Index)를 분리해야 합니다. 이동 명령이 입력되면 즉시 격자 좌표를 갱신하고, 화면상의 픽셀 좌표는 선형 보간(LERP)을 통해 부드럽게 따라가도록 구현합니다.

2. 충돌 감지 (Collision Detection)

가장 효율적인 AABB (Axis-Aligned Bounding Box) 알고리즘을 사용합니다. 개구리의 히트박스와 장애물의 히트박스가 겹치는지 매 프레임 확인합니다. 특히 '강' 영역에서는 "물에 빠짐(기본값)" 상태에서 "통나무와 충돌(안전)" 상태일 때만 생존하도록 로직을 반전시키는 것이 핵심입니다.

3. 객체 풀링(Pooling) 및 재사용

끊임없이 생성되는 자동차와 통나무를 매번 `new` 키워드로 생성하고 삭제하면 메모리 비효율이 발생합니다. 이 게임에서는 화면 밖으로 나간 객체를 삭제하지 않고, 위치만 반대편 시작점으로 이동시켜 재사용하는 '순환 큐' 방식을 사용하여 성능을 최적화했습니다.

4. 상태 기반 게임 흐름 제어

게임은 `Playing`, `LevelClear`, `GameOver`, `Dying`(사망 연출 중) 등의 상태(State)를 가집니다. 입력이나 업데이트 로직은 현재 상태에 따라 다르게 동작해야 합니다. 예를 들어, `Dying` 상태일 때는 키 입력을 무시하고 사망 애니메이션만 재생합니다.

Preview Image

댓글

댓글 쓰기