Web Game · SSR · Pixel Art

단어 배틀
Power of Word

짜장면 vs 짬뽕, 고양이 vs 강아지.
두 단어를 넣으면 도트 캐릭터가 대신 싸워
더 강한 단어를 가려 줍니다.

게임 하러 가기 메인으로

> POWER OF WORD

$ submit 짜장면 vs 짬뽕

// server: sha256 → stats → rounds

Server Logic → SSR → #hash1 #hash2 #round

$ fnPlay()

PALADIN짜장면 vs ROGUE짬뽕

$ tail -f battle.log

ROUND 7 · GUARD!
ROUND 8 · CRITICAL x2
LAST COLLISION · K.O.

online · pow.proj.pe.kr

[enter] start · [2x] speed · [log] battle log

[+]Overview

// 단어 배틀이란?

단어 배틀(Power of Word)은 두 단어를 넣으면 각 단어가 판타지 캐릭터가 되어 1:1로 전투하는 웹 게임입니다. 캐릭터 위에는 입력한 단어 명이 떠 있고, 라운드마다 공격·방어·크리티컬히트를 주고받다가 마지막 Last Collision에서 승부가 납니다.

결과는 운이 아니라 단어의 힘으로 정해집니다. 단어마다 고유한 지문인 SHA-256 해시를 기반으로 서버에서 계산된 배틀 로직으로 체력과 공격력이 정해지기 때문에, 같은 단어끼리는 언제 붙여도 결과가 같습니다. 전투에 출전하는 직업과 공격 순서 같은 연출만 랜덤으로 보여집니다.

[stats]

같은 단어 = 같은 능력치

SHA-256 해시기반 배틀로직으로
HP · 공격력 결정

[jobs]

직업 6종

매 경기 랜덤 출전
같은 직업끼리도 배틀 가능

[render]

SSR + Canvas

서버는 라운드 결과 계산
브라우저는 연출 처리

[time]

한 경기 약 40~50초

2X 배속 지원

[+]Characters

// 출전 캐릭터

두 단어에는 매 경기 아래 6개 직업 중 하나가 랜덤으로 배정됩니다. 직업은 승패에 영향을 주지 않고 공격 모션과 이펙트만 달라집니다. 모든 캐릭터는 이동·공격·방어·크리티컬히트·승리·패배 모션을 갖고 있습니다.

전사 WARRIOR 근접

상대에게 돌진해 대형 철퇴를 휘두릅니다. 뒤로 젖혀 멈칫했다가 순간적으로 내려치고, 초승달 궤적이 남습니다.

필살기 · 분쇄 일격

마법사 MAGE 원거리

주문을 외워 마력구를 날립니다. 크리티컬이 터지면 하늘에서 낙뢰가 떨어집니다.

필살기 · 천벌의 낙뢰

사제 PRIEST 원거리

금빛 빛의 창인 홀리볼트를 발사합니다. 크리티컬은 거대한 홀리볼트가 착탄한 뒤 빛의 기둥이 솟습니다.

필살기 · 신성한 심판

궁수 ARCHER 원거리

거리를 두고 화살을 쏩니다. 크리티컬이 터지면 화살 3발을 연달아 쏩니다.

필살기 · 관통 연사

도적 ROGUE 근접

상대 앞까지 빠르게 파고들어 X자로 공격합니다. 근접 직업 중 공격 모션이 가장 빠릅니다.

필살기 · 그림자 난도

성기사 PALADIN 근접

방패를 든 채 돌진해 장검을 크게 휘두르고, 타격 지점에 성광이 터집니다.

필살기 · 성광 심판

[+]How it works

// 작동 방식 · SSR

실제 페이지는 SSR(Server-Side Rendering) 모드로 동작합니다. 전투 결과는 서버가 모두 계산해서 페이지 HTML 안에 담아 보내고, 브라우저는 받은 데이터를 그대로 재생합니다.

두 단어 입력

2~16자 단어 두 개를 넣고 START를 누르면 서버로 전송됩니다.
서버에서 전투 계산

각 단어의 SHA-256 해시로 체력과 공격력을 정하고, 마지막 라운드까지 HP·공격력·크리티컬 결과를 미리 모두 계산합니다.
SSR로 값 세팅된 페이지

계산 결과가 경기 데이터가 페이지와 함께 도착하므로 추가 요청 없이 바로 시작합니다.
브라우저에서 연출 재생

round 데이터를 파싱하고 캐릭터가 랜덤 선택된 뒤, Canvas 배틀 엔진이 라운드를 차례로 재생합니다.

[+]Battle

// 경기 진행과 연출

등장

두 캐릭터가 하늘에서 떨어져 착지하고, 3 · 2 · 1 · FIGHT! 카운트다운으로 시작합니다.
라운드

탑다운 경기장을 자유롭게 배회하다 점점 서로에게 끌려가 부딪힙니다. 충돌하면 스파크와 넉백이 일어나고, 공격 순서는 매번 랜덤입니다. 맞은 쪽은 하얗게 번쩍이며 밀려나고, 벽에 닿으면 튕겨 나옵니다.
Last Collision

마지막 라운드나 HP가 0 이하가 되면 화면이 어두워지고 붉게 맥동합니다. 잔상을 남기며 돌진 → 화이트아웃과 충격파 → 슬로모션 결정타로 이어집니다.
K.O. & 결과

패자는 회전하며 날아가 바닥에 두 번 튕긴 뒤 픽셀 단위로 폭발합니다. 승자는 중앙에서 승리 포즈를 취하고 후광, 떨어지는 왕관, 꽃가루와 함께 결과 카드가 뜹니다.

승패 판정

한쪽만 HP 0 이하 다른 쪽이 승리
둘 다 HP 0 이하 HP가 더 높은 쪽이 −10보다 크면 승리, 아니면 무승부
둘 다 남은 채 종료 HP가 높은 쪽이 승리

부가 기능

1X / 2X 경기 속도 전환. 다음 경기에도 유지됩니다.
LOG 단어별 HP·해시·라운드 로그를 팝업으로 보여 줍니다.
REPLAY 같은 직업 조합으로 경기를 다시 봅니다.

[+]Stack & Credits

// 기술 스택과 저작자 표기

Backend

Spring Boot Tiles JSTL MySQL

Spring Boot 단어 해시 계산, 단어의 체력과 라운드 결과 생성
Tiles · JSTL레이아웃을 조립하고 서버 계산 결과를 페이지 필드에 채워서 내려줌

Frontend

HTML CSS jQuery Canvas 2D Galmuri (픽셀 폰트)

Sprite Credits

캐릭터 이미지는 Universal LPC Spritesheet 레이어를 조합해 만들었습니다. 모든 레이어는 OGA-BY 3.0 / CC-BY 3.0 / CC0 중 저작자 표기만으로 쓸 수 있는 라이선스를 골랐고, 이 페이지의 캐릭터 이미지도 같은 시트에서 한 프레임씩 잘라 쓴 것입니다.

CREDITS 보기

이전 서비스: XP Games 메인으로 돌아가기

단어 배틀 Power of Word