소개
시도하고자 했던 것과 그 이유 고전 아케이드 게임 중 하나를 웹 브라우저에서 바로 플레이할 수 있는 HTML 게임으로 만들고 싶었어요. 테트리스, 갤러그 등 여러 후보가 있었는데, 가장 로직이 단순하면서도 완성도 높은 재미를 줄 수 있는 스네이크로 결정했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
AI 에이전트: Hermes Agent
기술 스택: HTML5 Canvas, Vanilla JavaScript, CSS3 (단일 HTML 파일)
서버: Python
http.server(로컬 테스트) →systemd서비스화 예정배포: nginx 리버스 프록시 (설정 파일만 준비, 서브도메인 연결 예정)
주요 프롬프트 예시
"고전 게임 중에 하나를 웹으로 간단히 구현해보고자 하거든? 테트리스, 갤로그, 그런거 있잖아? 어떤게 있을까?"
→ 스네이크, 퐁, 테트리스, 2048, 지뢰찾기, 팩맨 등 후보와 난이도를 정리해줬습니다.
"스네이크로 만들어주고, UI는 아기자기하게 만들어보자"
→ 파스텔 크림/핑크 그라데이션 배경, 민트색 뱀(눈동자 포함!), 빨간 사과 먹이, 둥근 알약형 점수판, Google Fonts의 "Jua" 글꼴로 한국어 귀여운 감성을 잡아줬습니다.
→ /opt/data/tmp/arcade/ 디렉토리 구조로 완전 분리하고, 로비 페이지 + 각 게임별 서브디렉토리 구조를 제안받았습니다.
저는 이 두가지 질문과 답변으로 스네이크 게임을 만들어냈습니다.
게임 핵심 기능
키보드 + 모바일 터치 동시 지원: 방향키(
↑↓←→또는WASD) + 화면 하단의 둥근 버튼 조작게임 시작 전 멈춤 상태: 페이지 로드 후 자동으로 움직이지 않고, 첫 입력 시에만 시작
점수 및 최고 기록:
localStorage로 브라우저에 최고 점수 저장난이도 상승: 사과를 먹을수록 뱀 속도가 점점 빨라짐 (150ms → 최소 60ms)
게임 오버 / 재시작: 충돌 시 오버레이 출력, "다시 시작" 버튼 클릭 즉시 리셋
분홍색 화면이 표시된 한국 게임 스크린샷
첫 스터디은 자기 소개로 간단한 내용을 진행했습니다. 간단한 게임을 만들고 쉽게 서버에 배포하는 경험을 직접 하는 스터디였습니다. 다음 스터디에서는 어떤 것을 배울지 더 기대가 되었습니다.
