이 서버(game.onterbiotics.com)에 나만의 미니게임을 올리는 방법입니다. HTML/JavaScript 기초만 알면 누구나 따라 할 수 있어요.
이 폴더가 곧 game.onterbiotics.com 웹사이트입니다. WordPress 위에 얹혀 있지만, 직접 만든 파일은 그대로 서빙됩니다.
html.php — 메인 페이지(게임 목록 허브). 사이트 첫 화면입니다.tetris.html, reaction.html — 게임 한 개 = 파일 한 개.arcade.js — 모든 게임이 함께 쓰는 공용 기능(기록/좋아요/점수).arcade-api.php / arcade-db.php — 서버 측 API와 DB 연결(건드릴 필요 거의 없음).dashboard.php — 관리자용 통계 대시보드.reaction.html 을 복사해서 새 이름으로 저장하세요. (예: clicker.html) 가운데 게임 로직만 바꾸면 상단바·좋아요·랭킹은 그대로 동작합니다.
# 서버에서 (또는 파일 관리자로 복사)
cp reaction.html clicker.html파일 맨 위 한 줄만 바꿔 게임 고유 이름(슬러그)을 정합니다:
var GAME = 'clicker'; // ← 게임마다 다른 영문 슬러그html.php)에 등록html.php 위쪽 $games 배열에 항목 한 개만 추가하면 카드가 자동으로 생깁니다.
[
'title' => '클릭 스피드',
'desc' => '10초 동안 몇 번 클릭?',
'url' => 'clicker.html', // 방금 만든 파일
'icon' => '👆',
'accent' => '#4ade80', // 카드 강조색
'status' => 'live', // 'soon' = 준비중 / 'live' = 공개
],끝입니다! 메인 페이지에 카드가 나타나고, 클릭하면 게임이 열립니다. 홈으로 돌아오는 상단바는 예제에 이미 들어 있어요.
.php 파일을 고쳤는데 화면이 안 바뀌면 캐시 때문입니다. 아래 캐시 주의 참고.게임에 <script src="/arcade.js"></script> 한 줄만 넣으면 아래 기능을 모두 쓸 수 있습니다. 모든 호출은 실패해도 게임을 멈추지 않습니다.
// 방문 기록 (페이지 열릴 때)
Arcade.hit('clicker', 'visit');
// 플레이 시작 / 종료(+점수)
Arcade.hit('clicker', 'play');
Arcade.hit('clicker', 'gameover', score);
// 좋아요 토글 → {liked, count}
Arcade.like('clicker').then(r => console.log(r.count));
Arcade.likeStatus('clicker'); // 현재 상태 조회
// 점수 등록 → {rank, best}
Arcade.score('clicker', '홍길동', 1200);
// 랭킹 가져오기 → {scores:[{name,score},...]}
Arcade.leaderboard('clicker', 10).then(r => console.log(r.scores));여기 쌓인 데이터는 대시보드에서 방문 수·플레이 수·순방문자·좋아요·랭킹으로 한눈에 볼 수 있습니다.
500 - 시간처럼 큰 값이 좋은 점수가 되게 변환하세요. (예제 reaction.html 참고).html 같은 정적 파일은 보통 바로 반영되지만, .php 파일은 서버가 컴파일 결과를 캐시(OPcache)해서 수정이 늦게 보일 수 있습니다.
/?v=2 처럼 주소 뒤에 아무 값이나 붙여 보세요./_cachebust.php 를 열어 서버 코드 캐시를 비웁니다.처음이라면 아래처럼 규칙이 단순하고 화면이 적은 게임부터 시작하세요. (난이도 순)
| 게임 | 난이도 | 핵심 개념 |
|---|---|---|
| 반응속도 테스트 (예제 제공) | 아주 쉬움 | 타이머, 클릭 이벤트 → reaction.html 복사로 시작 |
| 클릭 스피드 (10초 클릭수) | 아주 쉬움 | 카운터, 카운트다운 |
| 숫자 맞히기 (업/다운) | 아주 쉬움 | 난수, 비교, 입력 |
| 가위바위보 | 아주 쉬움 | 난수, 조건문 |
| 카드 짝 맞추기 (메모리) | 보통 | 배열 섞기, 상태 관리 |
| 두더지 잡기 | 보통 | 타이머, 랜덤 위치, 점수 |
| 틱택토 (3목) | 보통 | 승리 판정 로직 |
| 핑퐁/벽돌깨기 | 도전 | 충돌 처리, 애니메이션 루프 |
clicker.html). 게임 슬러그도 영문 소문자/숫자만 사용.<meta name="viewport"> 를 넣고 버튼을 크게.