Snake Game
코딩하다 머리 좀 식히고 싶을 때, 바로 여기서 플레이하세요!
Score: 0Best: 0
방향키 또는 위 버튼으로 조작 | 모바일도 지원
이 게임은 어떻게 만들었을까?
HTML5 Canvas와 순수 JavaScript만으로 만들었습니다. 외부 라이브러리 없이 핵심 개념 4가지만 알면 누구나 만들 수 있습니다.
1. Canvas로 화면 그리기
HTML5 <canvas> 태그가 도화지 역할을 합니다. getContext('2d')로 그리기 도구를 얻고, fillRect()로 사각형(뱀), arc()로 원(먹이)을 그립니다. 매 프레임마다 화면 전체를 지우고 다시 그리는 방식입니다.
2. 게임 루프 (setInterval)
setInterval(update, 120)으로 120ms마다 게임 상태를 업데이트합니다. 먹이를 먹을 때마다 간격을 2ms씩 줄여서 속도가 점점 빨라집니다. 최소 60ms까지 빨라질 수 있어요.
3. 뱀 이동 로직
뱀은 좌표 배열입니다. 이동할 때 머리 앞에 새 칸을 추가하고 꼬리를 제거합니다. 먹이를 먹으면 꼬리를 제거하지 않아서 길이가 늘어나는 원리입니다.
// 핵심 이동 로직 (이것만 이해하면 됨)
var head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head); // 머리 방향으로 한 칸 추가
if (먹이와 겹치면) {
score += 10; // 점수 증가
새_먹이_생성(); // 꼬리 안 지움 = 길어짐
} else {
snake.pop(); // 꼬리 제거 = 길이 유지
}4. 충돌 감지
벽 충돌은 좌표가 0 미만이거나 격자 크기 이상인지 체크합니다. 자기 몸 충돌은 머리 좌표가 몸통 배열에 있는지 some()으로 확인합니다. 둘 중 하나라도 해당되면 Game Over!
5. 점수 저장 (localStorage)
localStorage.setItem('snkHi', score)로 브라우저에 최고 점수를 저장합니다. 페이지를 새로고침하거나 다시 방문해도 기록이 유지됩니다.
조작법
| 입력 | 동작 |
|---|---|
| ↑ / W / 위 버튼 | 위로 이동 |
| ↓ / S / 아래 버튼 | 아래로 이동 |
| ← / A / 왼쪽 버튼 | 왼쪽으로 이동 |
| → / D / 오른쪽 버튼 | 오른쪽으로 이동 |
이 게임처럼 Canvas + setInterval + 배열 조작만 알면 테트리스, 벽돌깨기 같은 클래식 게임도 같은 패턴으로 만들 수 있습니다!