Candle Run

완료·2025-03·frontend

JavaScriptHTML5 CanvasCSS3

Overview

3분 제한 시간 안에 BTC를 매매하여 최대 수익을 내는 아케이드 트레이딩 게임입니다. 5초마다 새로운 캔들스틱이 생성되며, 고래 경보와 뉴스 이벤트가 시세에 실시간으로 영향을 줍니다. 라이브러리 없이 순수 HTML5 Canvas와 Vanilla JavaScript로 캔들 차트 렌더링 엔진을 직접 구현했습니다.

Key Features

01커스텀 캔들차트 엔진: Canvas API로 OHLC 캔들스틱을 실시간 렌더링, 줌/스크롤 지원

02가격 엔진: 실제 BTC 히스토리 데이터 기반 + 랜덤 변동 알고리즘으로 자연스러운 시세 생성

03이벤트 시스템: 고래 매수/매도 경보, 뉴스 이벤트가 가격에 즉각 영향

04매매 시스템: BUY/SELL 버튼으로 포지션 진입/청산, 실시간 손익 계산

05레트로 UI: Press Start 2P 폰트 + 네온 컬러 아케이드 테마

Challenges & Solutions

Problem

Canvas에서 캔들스틱 차트를 실시간으로 그리면서 성능을 유지하기 어려웠음

Solution

더블 버퍼링과 필요한 영역만 다시 그리는 부분 렌더링으로 60fps 유지. 캔들 데이터를 링 버퍼로 관리하여 메모리 효율 확보

Problem

가격 변동이 너무 랜덤하면 게임성이 없고, 너무 예측 가능하면 재미없음

Solution

실제 BTC 샘플 데이터에서 변동성 패턴을 추출하고, 거기에 노이즈를 더하는 하이브리드 방식으로 '실제 같으면서도 게임적인' 가격 움직임 구현