Crie um Jogo de Corrida de Carros Web-Enabled com Arduino e PHPoC Shield

Componentes e Materiais

Arduino UNO	1
PHPoC Shield para Arduino (ou PHPoC WiFi Shield)	1
Dongle USB WiFi (chipset Ralink RT3070 ou RT5370) - opcional se usar cabo Ethernet no shield	1
Sensor de ângulo rotativo (potenciômetro)	1

Sobre o Projeto

Demo

Este jogo clássico pode trazer nostalgia da infância. A jogabilidade é simples: evite bater nos carros adversários e marque o máximo de pontos. O carro pode trocar entre 5 faixas, e há 15 velocidades diferentes. Conforme a velocidade aumenta, os carros adversários correm mais rápido, dificultando o jogo.

Ligação

• Encaixe o PHPoC shield no Arduino.
• Conecte pinos GND, VCC e SIG do sensor rotativo a GND, 5V e A0 do Arduino, respectivamente.

Fluxo de Dados

Arduino → PHPoC Shield → Navegador Web

Usuário interage com sensor rotativo. O valor do sinal de entrada é usado para trocar a posição do carro.

O Arduino lê o valor do sensor rotativo. Os valores ADC de entrada são divididos em 5 níveis diferentes. Trocar de nível significa mudar de faixa. Simplesmente, se o sinal de entrada muda para outro nível, o Arduino envia o nível atualizado ao PHPoC Shield.

Ao receber o valor, o PHPoC WiFi Shield o envia ao Navegador via WebSocket. Então, função JavaScript atualiza a posição (faixa) do carro. O programa JavaScript atualiza continuamente a posição dos adversários e a velocidade do jogo.

Coisas a Fazer

• Configurar conexão WiFi para PHPoC Shield (SSID e senha)
• Carregar nova UI no PHPoC Shield
• Carregar código Arduino

Configurar conexão WiFi para PHPoC Shield

Veja esta instrução.

Carregar nova Interface Web no PHPoC Shield

• Baixe o código fonte PHPoC remote_racing_game.php.
• Carregue no PHPoC shield usando PHPoC Debugger conforme esta instrução.

Carregar Código Arduino

• Instale biblioteca PHPoC para Arduino (veja instrução).
• Carregue código Arduino no Arduino.

E Finalmente

• Clique no botão serial no Arduino IDE para obter o endereço IP.
• Abra navegador, digite https:// substitua_ip_aqui /remote_racing_game.php
• Clique no botão conectar e divirta-se.

Saiba mais sobre potenciômetro no Arduino - Tutorial Potenciômetro

Referências de Funções

• pinMode()
• analogRead()
• digitalWrite()
• Serial.begin()
• Serial.println()
• for loop
• while loop
• if else
• loop()
• setup()

Código

Código Arduino

#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("Endereco servidor WebSocket: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    adcVal = 0;
    for(int i = 0; i < 50; i++) adcVal += analogRead(adcPin);
    adcVal /= 50;
    int pos = (int)((adcVal - adcMin) / 100);
    if (pos < 0) pos = 0;
    else if (pos > 4) pos = 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);
    }
  }
}

remote_racing_game.php (PHP - PHPoC Shield)

<!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-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>
// ... (código JavaScript completo do jogo: inicialização, WebSocket, desenho canvas, lógica de jogo, colisão, pontuação, níveis, etc.)
// O código completo está disponível no projeto original.
</script>
</head>
<body>
<center>
<p><h1>Arduino - Car Race </br> Brick Game</h1></p>
<canvas id="remote" width="500" height="400"></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>