웹 연동 아두이노 자동차 경주 벽돌 게임 만들기

부품 및 소모품

프로젝트 개요

데모

고전 벽돌 게임 스타일의 자동차 경주 게임입니다. 5개 차선 중 내 차를 조종해 상대 차들을 피하며 최고 점수를 겨룹니다. 속도 15단계로 빨라질수록 난이도 상승.

배선

1. PHPoC 실드를 아두이노에 적층
2. 로터리 앵글 센서: GND→GND, VCC→5V, SIG→A0

데이터 흐름

아두이노 → PHPoC 실드 → 웹 브라우저

• 사용자가 로터리 센서 조작 → 아두이노가 ADC 값 읽기 (5단계로 양자화 → 차선 인덱스 0~4)
• 차선 변경 감지 시 아두이노가 PHPoC 실드로 웹소켓 메시지 전송
• PHPoC 실드 → 브라우저 웹소켓 → 자바스크립트가 내 차 위치 업데이트
• 자바스크립트가 상대 차 위치, 속도, 점수 등 게임 로직 전체 처리

준비 사항

1. PHPoC 실드 와이파이 설정 (SSID/비번) — 공식 매뉴얼 참조
2. 웹 UI 업로드: remote_racing_game.php 다운로드 → PHPoC 디버거로 실드에 업로드
3. 아두이노 코드 업로드: PHPoC 라이브러리 설치 후 스케치 업로드

실행 방법

1. 아두이노 IDE 시리얼 모니터 열기 → 출력되는 IP 주소 확인
2. 웹 브라우저에서 https://<IP주소>/remote_racing_game.php 접속
3. [CONNECT] 버튼 클릭 → 웹소켓 연결 후 게임 시작

아두이노 코드

#include "SPI.h"
#include "Phpoc.h"

PhpocServer server(80);
int adcPin = A0;
float adcVal = 0;
int lastPos = -1;
float adcMin = 512 - 2.5*100; // 센서 중앙값 보정용

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("game");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    // 노이즈 제거용 50회 평균
    adcVal = 0;
    for(int i=0;i<50;i++) adcVal += analogRead(adcPin);
    adcVal /= 50;
    
    // 0~4 차선 인덱스로 매핑
    int pos = (int)((adcVal - adcMin) / 100);
    pos = constrain(pos, 0, 4);
    
    if (lastPos != pos) {
      String txtMsg = String(pos) + "\r\n";
      char buf[txtMsg.length()];
      txtMsg.toCharArray(buf, txtMsg.length());
      server.write(buf, txtMsg.length());
      Serial.println(txtMsg);
      lastPos = pos;
      delayMicroseconds(50);
    }
  }
}

PHPoC 실드 측 웹 UI 코드 (remote_racing_game.php)

HTML5 Canvas + JavaScript로 구현된 완전한 게임 엔진입니다. 주요 기능:

• 웹소켓 연결/해제 관리
• 내 차/상대 차/차선/격자 그리기
• 상대 차 6대 랜덤 생성·이동·충돌 판정
• 점수/레벨/속도 자동 증가
• 충돌 시 깜빡임 효과 후 게임 오버/클리어 표시

<!DOCTYPE html>
<html><head>
<title>Arduino - Web-based Game</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style> body{text-align:center;font:15pt Arial;} h1{font:bold 25pt;} h2{font:bold 15pt;} button{font:bold 15pt;} </style>
<script>
// ... (전체 자바스크립트 게임 엔진 코드 - 원문 참조)
// 주요 함수: init(), connect_onclick(), ws_onopen/close/message(),
// draw_car/grid/sideline/score, move_opponent_cars(), check_crash(),
// game_process(), blinking(), game_over(), update_scene()
</script></head><body>
<center>
<h1>Arduino - Car Race <br> Brick Game</h1>
<canvas id="remote" width="500" height="400"></canvas>
<h2>WebSocket: <span id="ws_state">null</span> <button id="bt_connect" onclick="connect_onclick()">CONNECT</button></h2>
</center></body></html>

함수 레퍼런스 (학습용)

• pinMode(), analogRead(), digitalWrite()
• Serial.begin(), Serial.println()
• 제어문: for, while, if-else
• 아두이노 구조: setup(), loop()

확장 아이디어

• 가변저항 대신 조이스틱/가속도계로 조작 방식 변경
• 사운드 이펙트 추가 (부저 또는 웹 오디오 API)
• 하이스코어 저장 (PHPoC 실드 내장 플래시 또는 EEPROM 활용)
• 멀티플레이 지원 (웹소켓 브로드캐스트)