자료실로 돌아가기
프로그램 개발

우리 모두의 게임 TETRIS

조회수: 13

🕹️ TETRIS ARCADE — Classic & 2P Battle Edition

Dr.Ahn Works: Decasage 제작
클래식 오락실 감성을 브라우저로 그대로 옮긴 정통 아케이드 테트리스

🎯 게임 소개

1980년대 오락실의 그 감성, 기억하시나요?

TETRIS ARCADE는 CRT 모니터의 스캔라인, 네온 글로우, 8bit 사운드까지 — 클래식 아케이드 캐비넷의 분위기를 그대로 재현한 웹 기반 테트리스 게임입니다. 설치 없이 브라우저만 열면 바로 플레이할 수 있으며, 1인용 솔로 모드2인용 대전 모드를 모두 지원합니다.

한 대의 키보드로 두 사람이 나란히 앉아 대전하는, 오락실 그 시절의 경험을 다시 만나보세요.


🔥 핵심 특징

🎮 정통 테트리스 메카닉

현대 테트리스 가이드라인(SRS)을 충실히 구현하여, 숙련된 플레이어도 만족할 수 있는 깊이 있는 게임플레이를 제공합니다.

  • SRS 회전 시스템 — Super Rotation System + Wall Kick으로 정밀한 블록 배치
  • 7-Bag 랜덤 시스템 — 7종 블록이 공정하게 순환, 운이 아닌 실력 대결
  • 고스트 피스 — 블록이 착지할 위치를 미리 표시
  • 홀드 시스템 — 블록을 저장해두고 전략적으로 교체
  • 하드 드롭 / 소프트 드롭 — 즉시 낙하 또는 빠른 낙하
  • 락 딜레이 + 무브 리셋 — 착지 후에도 이동·회전으로 미세 조정 가능
  • 다음 블록 3개 미리보기 — 선행 입력 전략 수립

⚔️ 2인용 대전 모드

같은 키보드에서 두 명이 동시에 플레이하는 로컬 대전!

시스템설명
동일 블록 시퀀스양 플레이어에게 완전히 같은 순서의 블록이 배분 → 100% 실력 대결
가비지 라인 공격줄 클리어 시 상대방 하단에 회색 방해 줄 추가
공격 인디케이터공격 발동 시 시각 효과 + 상대 화면 흔들림
양측 모두 종료까지 진행한 쪽이 죽어도 상대는 계속 플레이 → 최종 점수로 승패 결정
K.O. 표시탈락한 플레이어의 보드에 "K.O." 배너 + 반투명 처리
💡 공정한 규칙: 먼저 탈락하더라도 더 높은 점수를 쌓았으면 승리할 수 있습니다!

🏆 점수 시스템

액션기본 점수 (× 레벨 × 난이도 배율)
Single (1줄)100
Double (2줄)300
Triple (3줄)500
Tetris (4줄)800
T-Spin400 × 줄 수
Perfect Clear3,000
Combo+50 × 연속 콤보 수
Back-to-Back1.5× 보너스

🎚️ 난이도 선택

게임 시작 전 4단계 난이도를 선택할 수 있습니다. 초보자부터 숙련자까지 모두를 위한 균형 잡힌 설계입니다.

난이도시작 레벨낙하 속도락 딜레이초기 가비지점수 배율
🟢 EASYLv.1느림600ms없음×0.8
🔵 NORMALLv.3표준500ms없음×1.0
🟠 HARDLv.6빠름350ms3줄×1.3
🔴 EXTREMELv.10매우 빠름250ms6줄×1.8
  • EASY: 처음 접하는 분도 편안하게 즐길 수 있는 속도
  • NORMAL: 클래식 테트리스에 익숙한 플레이어를 위한 표준 난이도
  • HARD: 빠른 레벨업, 초기 가비지 3줄로 시작부터 긴장감
  • EXTREME: Lv.10 속도 + 가비지 6줄 — 순간 판단력과 손놀림의 한계에 도전
2P 대전에서는 난이도에 따라 가비지 수신 배율도 달라져 (EASY ×0.5 ~ EXTREME ×2.0), 선택한 난이도가 전략에 직접적인 영향을 미칩니다.

🎮 조작법

Player 1 — 화면 우측 (화살표 키)

동작
← →좌우 이동
소프트 드롭 (빠른 낙하)
시계방향 회전
Z반시계방향 회전
Space하드 드롭 (즉시 착지)
C홀드 (블록 저장/교체)

Player 2 — 화면 좌측 (WASD 키)

동작
A / D좌우 이동
S소프트 드롭
W시계방향 회전
Q반시계방향 회전
E하드 드롭
R홀드

공통 조작

동작
P / ESC일시정지 → Pause 메뉴
☰ MENU 버튼화면 좌측 상단 클릭으로 일시정지
키보드 배치 최적화: 노트북 키보드 기준으로 WASD(좌측)와 화살표(우측)가 각각 화면 좌/우 플레이어에 대응하여, 두 사람이 자연스럽게 나란히 플레이할 수 있습니다.

🕹️ 게임 흐름

🏠 타이틀 화면
 │
 ├─ 1 PLAYER / 2 PLAYERS 선택
 │      │
 │      ▼
 │  🎚️ 난이도 선택 (EASY / NORMAL / HARD / EXTREME)
 │      │
 │      ▼
 │  ⏱️ 카운트다운 (3... 2... 1... GO!)
 │      │
 │      ▼
 │  🎮 게임 플레이
 │      │
 │      ├─ P / ESC → ⏸️ Pause 메뉴
 │      │              ├─ RESUME (게임 계속)
 │      │              └─ BACK TO MENU (타이틀로 복귀)
 │      │
 │      └─ 게임 종료 → 🏆 결과 화면 (점수/레벨/줄)
 │                         │
 │                         ▼
 │                      🏠 타이틀로 복귀
 │
 └─ CONTROLS → 📋 조작법 안내 (ESC로 복귀)


🎨 비주얼 & 사운드

요소설명
CRT 스캔라인레트로 모니터 감성의 반투명 라인 오버레이
네온 글로우시안(Cyan), 핑크, 골드 네온 발광 효과
아케이드 폰트Press Start 2P — 정통 8bit 픽셀 폰트
8bit BGM코로베이니키(Korobeiniki) 테트리스 테마 멜로디
효과음이동, 회전, 착지, 줄 클리어, 테트리스, K.O. 등 전용 사운드
콤보 텍스트T-SPIN!, TETRIS!, COMBO, B2B 등 화면 중앙에 실시간 표시
공격 이펙트가비지 전송 시 화살표 애니메이션 + 화면 흔들림

📱 호환성

환경지원
🖥️ 데스크톱 브라우저Chrome, Firefox, Safari, Edge (최신 버전)
💻 노트북키보드 지원, 2인 동시 플레이 가능
📱 모바일/태블릿1P 모드 터치 컨트롤 자동 활성화
🔈 사운드Web Audio API 기반, 토글 ON/OFF 가능
설치 불필요, 인터넷 브라우저만 있으면 바로 플레이 가능합니다.

🛠 기술 스택

기술용도
HTML5 Canvas게임 보드 실시간 렌더링
CSS3CRT 효과, 네온 글로우, 반응형 레이아웃
Vanilla JavaScript게임 엔진, 입력 처리, 상태 관리
Web Audio API8bit 사운드 합성 (설치 없이 브라우저에서 직접 생성)
Seeded RNG (Mulberry32)2P 동일 블록 시퀀스를 위한 시드 기반 난수
  • 외부 라이브러리 의존성: 없음 (100% 순수 구현)
  • 서버 통신: 없음 (완전 오프라인 플레이 가능)

📂 프로젝트 구조

index.html              메인 HTML (타이틀, 게임, 컨트롤, Pause 화면)
css/
  └── style.css         클래식 아케이드 테마 스타일 (CRT, 네온, 반응형)
js/
  ├── audio.js          Web Audio API 사운드 매니저 (BGM + 효과음)
  ├── tetris.js         테트리스 게임 엔진 (SRS, 난이도, 점수, PieceBag)
  └── main.js           메인 컨트롤러 (메뉴, 입력, 게임루프, 2P 관리)


<div align="center">

🕹️ INSERT COIN — PRESS START 🕹️

© 2026 Dr.Ahn Works: Decasage

</div>

링크 열기