아두이노 UNO & PHPoC 와이파이 실드로 웹 기반 2인용 게임 만들기

부품 및 소모품

부품	수량
아두이노 UNO	1
아두이노용 PHPoC 와이파이 실드	1
버튼	4
브레드보드 (일반)	1
저항 10kΩ	1
열수축 튜브	1

프로젝트 소개

초보자라면 아두이노 버튼 튜토리얼을 참고하세요.

더 간단한 하드웨어(PHPoC만 사용)로 비슷한 프로젝트를 만든 적이 있습니다.

데모

데이터 흐름

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

두 사람이 게임을 합니다. 각자 두 개의 버튼으로 골키퍼 방향을 제어하므로 총 네 개의 버튼이 필요합니다.

아두이노가 네 버튼의 상태를 읽고, 변경 사항이 있으면 골키퍼 이동 방향을 다시 계산하여 PHPoC 와이파이 실드로 전송합니다. 값을 수신하면 PHPoC 와이파이 실드가 웹소켓을 통해 웹 브라우저로 전송합니다. 자바스크립트 함수가 골키퍼 이동 방향을 업데이트합니다.

자바스크립트 프로그램은 공, 골키퍼, 장애물의 위치와 방향을 기반으로 지속적으로 업데이트하고 충돌도 체크합니다.

골키퍼 방향은 버튼 상태에 따라 변경됩니다.

참고: PHPoC 실드에는 아두이노에서 웹 브라우저로 데이터를 전달하는 내장 프로그램이 있습니다. 따라서 이에 대해 신경 쓸 필요가 없습니다.

해야 할 일

• PHPoC 실드의 와이파이 정보 설정 (SSID 및 비밀번호)
• PHPoC 실드에 새 UI 업로드
• 아두이노 코드 작성

PHPoC 실드 와이파이 정보 설정

이 지침 참조

PHPoC 실드에 새 웹 UI 업로드

• PHPoC 소스 코드 remote_game.php 다운로드 (코드 섹션 참조)
• 이 지침에 따라 PHPoC 디버거로 PHPoC 실드에 업로드

웹 브라우저에서 HTTP 요청을 수신하면 PHPoC 실드가 이 파일의 PHP 스크립트를 해석하고 해석된 파일을 웹 브라우저로 전송합니다. 해석된 파일(HTML, CSS, 자바스크립트 포함)은 UI를 제공하고, 공/골키퍼/장애물의 위치를 방향에 따라 업데이트하며 충돌을 체크합니다. 웹소켓을 통해 골키퍼 이동 방향도 수신합니다.

아두이노 코드 작성

• 아두이노용 PHPoC 라이브러리 설치 (지침 참조)
• 아두이노 코드 (코드 섹션 참조) 업로드

테스트

• 아두이노 IDE의 시리얼 버튼을 클릭하여 IP 주소 확인
• 웹 브라우저에서 https:// IP_주소_바꾸기/remote_game.php 접속
• 연결 버튼 클릭 후 테스트

초보자를 위한 최고의 아두이노 스타터 키트

초보자를 위한 최고의 아두이노 키트 보기

함수 레퍼런스

• pinMode()
• digitalRead()
• Serial.begin()
• Serial.print()
• Serial.println()

코드

아두이노 코드

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

PhpocServer server(80);
boolean alreadyConnected = false;

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());
  pinMode(6, INPUT);
  pinMode(7, INPUT);
  pinMode(8, INPUT);
  pinMode(9, INPUT);
}

int value_6 = digitalRead(6);
int value_7 = digitalRead(7);
int value_8 = digitalRead(8);
int value_9 = digitalRead(9);
int pre_dir_1 = 0;
int pre_dir_2 = 0;
int dir_1 = 0;
int dir_2 = 0;

void loop() {
  PhpocClient client = server.available();
  if (client) {
    value_6 = digitalRead(6);
    value_7 = digitalRead(7);
    value_8 = digitalRead(8);
    value_9 = digitalRead(9);
    dir_1 = value_7 - value_6;
    dir_2 = value_9 - value_8;
    if(dir_1 != pre_dir_1 || dir_2 != pre_dir_2) {
      pre_dir_1 = dir_1;
      pre_dir_2 = dir_2;
      String txtMsg = "[" + String(dir_1) + ", " + String(dir_2) + "]\r\n";
      char buf[txtMsg.length()+ 1];
      txtMsg.toCharArray(buf, txtMsg.length() + 1);
      server.write(buf, txtMsg.length());
    }
  }
}

PHPoC 실드 코드 (remote_game.php) - PHP

<!DOCTYPE html>
<html>
<head>
<title>PHPoC - Game</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
body { text-align: center; font-size: 15pt; font-family: Arial, Helvetica, sans-serif; }
h1 { font-weight: bold; font-size: 25pt; }
h2 { font-weight: bold; font-size: 15pt; }
button { font-weight: bold; font-size: 15pt; }
</style>
<script>
// ... 자바스크립트 게임 로직 (원문 참조)
</script>
</head>
<body>
<center>
<p> <h1>PHPoC - Web-based Game</h1> </p>
<canvas id="remote" width="400" height="500"></canvas>
<h2>
<p> WebSocket: <span id="ws_state">null</span> </p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>
</center>
</body>
</html>

회로도

1. PHPoC 와이파이 실드 또는 PHPoC 실드를 아두이노 위에 스택
2. 아래 이미지처럼 배선