손님 주문에 맞춰 술을 서빙하는 2D 웹 브라우저 게임 프로토타입입니다. 술집 카운터에서 손님의 주문(원하는 맛/온도/예산)을 듣고, 술을 고르고 재료를 섞어 만족시키면 골드를 법니다. 빌드 도구 없이 순수 HTML/CSS/JS로만 만들어져서 그대로 열거나 정적 호스팅에 올리면 바로 동작합니다.
tavern-game/
index.html # 마크업 (DAY/골드 표시, 손님 슬롯, 술통, 잔, 카운터, 모달)
css/style.css # 전체 스타일 (술집 분위기, cqw 기반 반응형 스케일링)
js/data.js # 게임 데이터: 스탯 정의, 술/재료/종족 기준치, 밸런스 설정
js/satisfaction.js # 만족도 계산 엔진 (스탯 매칭, 주문 생성/대사, 점수·골드 계산)
js/game.js # 게임 로직: 상태 관리, 렌더링, 이벤트
assets/images/ # 배경, 술통 4종, 비법 제조서 아트
브라우저 보안 정책상 file://로 직접 열면 일부 기능이 막힐 수 있어서
간단한 로컬 서버로 여는 걸 추천해요.
cd tavern-game
python3 -m http.server 8000
# 브라우저에서 http://localhost:8000 접속또는 VS Code의 "Live Server" 확장을 써도 됩니다.
- DAY 카운터 / 골드 표시: 좌상단 DAY, 우상단 현재 골드 / 목표 골드(500G). 하루에 손님 5명을 받으면 다음 날로 자동 전환, 목표 달성 시 승리 모달
- 손님 주문: 손님마다 종족 기준치 중 일부를 뽑아 그때그때 다른 주문을 생성(예: "몸이 따뜻해지는 음료를 줘. 짭짤한 걸로 줘. 17골드 이상은 낼 수 없어."). 한 DAY에는 총 5명이 방문하고 최대 2명이 동시에 대기함
- 술 제조: 꿀술/흑맥주/화이트 스피릿/엘프의 포도주 중 하나를 고르고, 우측 온도계의 포인터를 멈춰 -6~+6 사이 온도를 맞춘 뒤 부가재료 20종 중 최대 3개를 섞어 맛을 조정. 같은 재료도 재고 안에서 반복 사용 가능
- 만족도 계산: 완성된 술의 최종 스탯(단맛/쓴맛/짠맛/신맛/도수/온도)이 손님의 요구치에 얼마나 가까운지, 사용한 재료가 그 종족의 선호/불호 재료인지, 예산을 넘지 않았는지를 종합해 점수(0~100)를 매기고 등급(대만족/만족/ 그럭저럭/불만족)에 따라 골드를 지급. 자세한 계산 방식은 js/satisfaction.js 참고
- 상점·퀘스트 책: 왼쪽 아래 책을 열면 펼쳐진 책의 왼쪽 페이지에서 매일 무작위로 입고된 재료 8종 중 서로 다른 4종을 구매하고, 오른쪽 페이지에서 서빙·만족도·재료 사용·순수익 퀘스트 진행도를 확인해 골드 보상을 직접 받을 수 있음. 선택한 재료는 2개씩 지급되며 4종 선택을 마치면 그날 영업이 시작됨. 남은 재료는 날짜가 바뀔 때 초기화되어 매일 새로운 4종으로 덱을 구성함
- 셰이크 미니게임: 술과 재료를 고르고 온도를 맞춘 다음, 오른쪽 셰이커를 좌우로 번갈아 드래그해 게이지를 채워야 손님에게 서빙할 수 있음. 레시피나 온도를 다시 바꾸면 셰이크 진행도는 초기화됨
- 재료 시너지: 긍정 시너지 12종과 부정 시너지 4종이 조합·온도 방식에 따라 발동. 수치 증감/고정, 태그 선호 보너스, 만족도 제한, 독성 감점과 음료 폐기까지 적용됨
- 아트: 배경, 술통 4종, 비법 제조서 아이콘에 실제 이미지 적용 완료
- 종족별 목표 수치와 재료·시너지 보너스의 최종 플레이 밸런스 검증 필요
- 손님이 제작 중 독백으로 종족·선호/불호 재료 힌트를 주는 연출 미구현 (현재는 종족이 이름에만 드러나고, 선호/불호는 결과에만 반영됨)
- Day 1 튜토리얼 없음 — 처음 접속한 플레이어를 위한 안내 흐름 필요
- 재료 설명 툴팁(토글 시 설명 보여주기) 다듬기 필요
- 재료는 서빙할 때 1개씩 소비되며, 그날 고른 4종만 테이블에 표시됨
- 사운드/BGM 없음
- 패배(파산) 조건 없음 — 지금은 계속 진행되는 샌드박스형 루프
js/data.js에서 대부분의 수치를 코드 수정 없이 바로 바꿀 수 있어요.
STATS: 스탯 종류(단맛/쓴맛/짠맛/신맛/도수/온도)와 범위, 주문 대사 문구DRINKS[].stats,EXTRA_INGREDIENTS[].statDelta: 술/재료가 스탯에 주는 영향RACES: 종족별 기준치(statTargets), 가중치(statWeights), 선호/불호 재료CONFIG: 목표 골드, 시작 골드, 하루 손님 수, 동시 대기 손님 수 등CONFIG.satisfaction: 주문당 요구 스탯 개수, 오차 허용 비율, 선호/불호 가감점, 예산 초과 페널티, 만족도 등급 구간(점수→라벨/골드배율/표정)
정적 파일만 있으니 셋 중 아무거나 편한 걸로 배포하면 돼요.
GitHub Pages
git push -u origin main
# 리포 Settings → Pages → Source를 main 브랜치, root로 설정Vercel / Netlify
- 깃허브 리포를 연결해두면 push할 때마다 자동 배포됩니다.
- 빌드 명령 없이 그냥 "Static Site"로 설정하면 됩니다 (build command 없음, output directory는 리포 루트).