이 프로젝트 정보

초보자라면 아두이노 - 버튼 튜토리얼에서 버튼에 대해 배울 수 있습니다.

여기에서 더 간단한 하드웨어(PHPoC만 해당)를 사용하여 비슷한 프로젝트를 만들었습니다.

데모

데이터 흐름

Arduino ---> PHPoC WiFi Shield ---> 웹 브라우저

두 사람이 게임을 하고 있습니다. 각 사람들은 골키퍼의 방향을 제어하기 위해 두 개의 버튼을 사용합니다. 따라서 4개의 버튼이 필요합니다.

아두이노는 4개의 버튼 상태를 읽고, 그 중 하나라도 변경되면 골키퍼의 이동 방향을 다시 계산하여 방향 값을 PHPoC WiFi Shield로 보냅니다. PHPoC WiFi Shield는 값을 받으면 websocket을 통해 Web Browser로 보냅니다. JavaScript 기능은 골키퍼의 이동 방향을 업데이트합니다.

JavaScript 프로그램은 방향에 따라 공, 골키퍼 및 장애물의 위치를 ​​지속적으로 업데이트하고 충돌도 확인합니다.

버튼의 상태에 따라 골키퍼의 방향이 바뀝니다.

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

우리가 해야 할 일

PHPoC Shield용 WiFi 정보 설정

이 지침을 참조하십시오.

새로운 웹 UI를 PHPoC Shield에 업로드

PHPoC Shield는 웹 브라우저에서 HTTP 요청을 받으면 이 파일에 있는 PHP 스크립트를 해석하여 웹 브라우저로 보냅니다. 해석된 파일(HTML, CSS 및 JavaScript 코드 포함)은 UI(사용자 인터페이스)를 제공하고 방향에 따라 공, 골키퍼 및 장애물의 위치를 ​​업데이트하고 충돌도 확인합니다. 웹소켓에서 골키퍼의 이동 방향도 받습니다.

Arduino 코드 작성

테스트

초보자를 위한 최고의 Arduino 스타터 키트

초보자를 위한 최고의 Arduino 키트 보기

함수 참조

코드

Arduino 코드Arduino

#include "SPI.h#include "Phpoc.h"PhpocServer 서버(80);boolean alreadyConnected =false; 무효 설정() { Serial.begin(9600); 동안(! 직렬); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("게임"); Serial.print("웹소켓 서버 주소 :"); Serial.println(Phpoc.localIP()); 핀모드(6, 입력); 핀모드(7, 입력); 핀모드(8, 입력); 핀모드(9, 입력); }int 값_6 =digitalRead(6);int 값_7 =digitalRead(7);int 값_8 =digitalRead(8);int 값_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 (클라이언트) { value_6 =digitalRead(6); 값_7 =디지털 읽기(7); 값_8 =디지털 읽기(8); 값_9 =디지털 읽기(9); 디렉토리_1 =값_7 - 값_6; 디렉토리 2 =값 9 - 값 8; if(dir_1 !=pre_dir_1 || dir_2 !=pre_dir_2) { pre_dir_1 =dir_1; pre_dir_2 =dir_2; 문자열 txtMsg ="[" + 문자열(디렉터리_1) + ", " + 문자열(디렉터리_2) + "]\r\n"; char buf[txtMsg.length()+ 1]; txtMsg.toCharArray(buf, txtMsg.length() + 1); server.write(buf, txtMsg.length()); } }}

PHPoC 실드 코드(remote_game.php)PHP

<스타일>본문 { 텍스트 정렬:가운데; 글꼴 크기:15pt; 글꼴 패밀리:Arial, Helvetica, sans-serif;}h1 { 글꼴 두께:굵게; 글꼴 크기:25pt; }h2 { 글꼴 두께:굵게; 글꼴 크기:15pt; }버튼 { 글꼴 두께:굵게; 글꼴 크기:15pt; }

PHPoC - 웹 기반 게임


웹소켓:null
연결 

회로도

1. 아두이노에 PHPoC 와이파이 실드 또는 PHPoC 실드 쌓기
2. 아래 그림과 같은 배선