제작 노트

이 사이트의 게임들은 개인이 혼자 만들고 운영하고 있습니다. 어떤 방식으로 만들었고, 랭킹은 어떻게 안전하게 관리하는지, 사이트는 어디에서 돌아가는지 정리해 두었습니다.

게임은 HTML5 Canvas로 만들었습니다

모든 게임을 별도의 게임 엔진 없이 브라우저의 HTML5 Canvas와 JavaScript만으로 만들었습니다. 설치가 필요 없고, 한 번 불러오면 가볍게 실행되어 모바일 브라우저에서도 잘 돌아갑니다. 화면 크기가 다른 기기에서도 같은 모양으로 보이도록 화면 비율을 맞춰 그립니다.

입력: 키보드, 마우스, 터치를 모두 지원합니다. 포인터 이벤트를 써서 세 방식을 같은 코드로 처리합니다.
그래픽: 이미지 파일 없이 도형과 그라데이션을 코드로 그려서, 파일 용량이 작고 해상도가 달라도 선명합니다.
기록 저장: 최고 기록은 브라우저 저장소에 보관하고, 랭킹용 점수는 서버로 보냅니다.

랭킹이 조작되지 않도록 한 방법

온라인 랭킹은 점수를 그냥 받으면 누구나 높은 점수를 만들어 보낼 수 있습니다. 그래서 다음과 같은 단계를 두었습니다.

게임을 시작하면 서버에서 세션을 발급받고, 시작 시각이 서버에 기록됩니다.
게임이 끝나 점수를 제출하면, 서버가 시작 시각부터 지금까지 실제 경과 시간을 계산합니다.
그 시간 동안 게임 규칙상 낼 수 있는 최대 점수보다 높으면 기록을 받지 않습니다. 네트워크 지연을 감안해서 여유를 조금 둡니다.
세션은 한 번 쓰면 바로 삭제되어, 같은 세션으로 점수를 여러 번 보낼 수 없습니다.
닉네임은 길이를 제한하고 특수 문자를 걸러내며, 캐릭터 같은 부가 정보도 허용된 값만 저장합니다.

점프 러너의 경우 속도가 시간에 따라 일정하게 빨라지는 규칙을 서버에서도 그대로 계산해서 최대 점수를 구합니다. 물고기 피하기는 1초에 10점이므로 경과 시간에 10을 곱한 값이 상한이 되고, 하늘 오르기는 올라간 높이가 초당 80m를 넘을 수 없다는 상한으로 검증합니다.

사이트는 이렇게 운영됩니다

호스팅: Cloudflare Pages에서 정적 페이지를 제공합니다.
랭킹 API: Cloudflare Pages Functions로 동작하고, 점수는 Cloudflare D1(SQLite 기반 데이터베이스)에 저장됩니다.
소스 관리: GitHub 저장소에 올리면 자동으로 배포됩니다.

처음에는 다른 호스팅과 데이터베이스를 썼지만, 서버 환경과의 호환성 때문에 현재 구성으로 옮겼습니다. 새 게임을 추가할 때는 게임 등록표에 규칙 한 줄(상위 몇 명을 보여줄지, 점수 검증식, 저장할 부가 정보)을 더하면 같은 랭킹 시스템을 그대로 쓸 수 있도록 만들어 두었습니다.

앞으로

새로운 미니게임을 계속 만들어 이 사이트에 추가할 예정입니다. 의견이나 오류 제보는 crazyj7@gmail.com로 보내 주세요. 블로그 크레이지J의 탐구생활에서 제작 과정을 더 자세히 볼 수 있습니다.

게임 공략: Jump Runner · 물고기 피하기 · 하늘 오르기