미니 공룡 게임에 방향 전환 기능 추가

https://tuesday04.tistory.com/87

방향 전환 수학 이해를 위한 미니 게임

 

https://github.com/veryyounng/disosaur_game/tree/c7967c3e65f5fd755cd0fdb10678b6a95776fa98

GitHub - veryyounng/disosaur_game

 

 

기존에 있는 게임에서 방향 전환 기능과 초기화 기능을 추가하였다.

또한, 벽을 랜덤으로 설정하였다.

 

🧠 방향 전환과 선형대수학

공룡은 매번 1칸씩 이동한다. 이동 방향은 2차원 벡터로 표현된다.

📌 방향 벡터 정의

방향벡터

 

⬆️ 위	[0, -1]
⬇️ 아래	[0, 1]
⬅️ 왼쪽	[-1, 0]
➡️ 오른쪽	[1, 0]

// JavaScript 방향 변경 요청
fetch('/api/change_direction', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ direction: 'right' }),
});

# Python FastAPI - 이동 로직
dx, dy = DIRECTION
head_x, head_y = SNAKE[0]
nx, ny = head_x + dx, head_y + dy

 

이처럼 다음 좌표는 현재 좌표 + 방향 벡터로 계산되며, 이건 선형대수학에서 말하는 벡터 합 그 자체다.

 

🎯 방향키 UI 구성

방향키는 시각적으로 방향을 쉽게 인식할 수 있도록 2x2 격자 구조로 구성했다.

<div class="direction-buttons">
  <button onclick="changeDir('up')">⬆️</button>
  <button onclick="changeDir('down')">⬇️</button>
  <button onclick="changeDir('left')">⬅️</button>
  <button onclick="changeDir('right')">➡️</button>
</div>

 

 

현재 위치 벡터 + 방향 벡터 = 다음 위치

# 회전 예시 (90도 우회전 시)
# [0, -1] → [1, 0] → [0, 1] → [-1, 0]

이렇게 방향 벡터 구조를 생각하면서 구현하였다.