Published April 13, 2017 © GPL3+

Shooting Game

A shooting game using a PHPoC Blue and toy gun.

IntermediateFull instructions providedOver 1 day924

Things used in this project

Hardware components

PHPoC Blue

PHPoC PWM & Sensor Expansion Board

PHPoC 4-Port Relay Expansion Board (S-type or T-type)

Tower Pro SG92R servo motor

Limit Switch

DIY Target

Story

Project

Items

PHPoC Blue

PWM and Sensor Board

4-Port Digital Input Board

Servo Motor X 2

Limit switch X 2

DIY Target X 2

iPad

Electric Gun

How It Works

The shooting game starts when you touch "START" button in webpage. With everything set, the count down starts on the webpage, and the game runs for 30 seconds. When you shoot down the targets with electric gun, you receive 5 points for the target on the left, 10 points for the target on the right each time. When the game is over, you can check your score.

Video Clip

<?php

if(_SERVER("REQUEST_METHOD"))
	exit; // avoid php execution via http request

include_once "/lib/sd_340.php";
include_once "/lib/sn_tcp_ws.php";
include_once "/lib/sd_spc.php";

define("PWM_PERIOD", 20000); // 20000us (20ms)
define("WIDTH_MIN", 600);
define("WIDTH_MAX", 2450);

define("DIN0_PIN", 0);
define("DIN1_PIN", 1);
define("GAMING", "S");
define("READY", "R");
define("END", "E");

$sid = 1;
$motor = 0;

spc_reset();
spc_sync_baud(115200);
spc_request($sid, 4, "set 0 delay 150");
spc_request($sid, 4, "set 1 delay 150");
spc_scan();

function eio_in($sid, $pin)
{
    $resp = spc_request($sid, 4, "get $pin input");

    if($resp === false)
        return "";

    $resp = explode(",", $resp);

    return $resp[1];
}

function stand_target($motor) {

	for($angle = 0; $angle <= 120; $angle += 120)
	{
		//echo $angle, " ";

		$width = WIDTH_MIN + (int)round($angle / 180.0 * (WIDTH_MAX - WIDTH_MIN));
		ht_pwm_width($motor, $width, PWM_PERIOD);

		usleep(300000);
	}
	for($angle = 120; $angle >= 0; $angle -= 120)
	{
		//echo $angle, " ";

		$width = WIDTH_MIN + (int)round($angle / 180.0 * (WIDTH_MAX - WIDTH_MIN));
		ht_pwm_width($motor, $width, PWM_PERIOD);

		usleep(300000);
	}
	
}


ht_pwm_setup(0, WIDTH_MIN, PWM_PERIOD, "us");
ht_pwm_setup(1, WIDTH_MIN, PWM_PERIOD, "us");

uio_setup(0, DIN0_PIN, "in");
uio_setup(0, DIN1_PIN, "in");
 
$last_sw0 = 0;
$last_sw1 = 0;
$game_stat = "E";
$last_game_stat = "";
$rwbuf = "";

ws_setup(0, "shooting", "csv.phpoc");

while(1)
{
	$ws_state = ws_state(0);
	
	if($ws_state == TCP_CONNECTED)
	{
		$get_score = 0;
		
		$rlen = ws_read_line(0, $rwbuf);
		 
		if($rlen)
		{
			$game_stat = substr($rwbuf, 0, 1);
		}
		
		switch($game_stat){
			case READY:
				if($last_game_stat != $game_stat)
				{
					stand_target(0);
					stand_target(1);
					
					usleep(300000);
					
					ws_write(0, "R");            				
					
				}
				break;
			case GAMING:
				$touch0 =  (int)(eio_in($sid, 0));
				$touch1 =  (int)(eio_in($sid, 1));
 
				if($touch0 != $last_sw0)
				{
					if($touch0) 
					{
						$get_score = 5;					        
						stand_target(0);
					} 
					$last_sw0 = $touch0;			  
				}
    
				if($touch1 != $last_sw1)
				{
					if($touch1) 
					{
						$get_score = 10;			        
						stand_target(1);        
					}
					$last_sw1 = $touch1;
				}            	
				 ws_write(0, "$get_score");            				
				break;
			case END:
				break;
		} // switch end
		$last_game_stat = $game_stat;
	}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style> body { text-align: center; } </style>
<script>
var ws;
var c=30;
var t, tt;
var timer_is_on=0;

function init()
{
	document.getElementById("counter").innerHTML = "0";
	document.getElementById("score").innerHTML = "0";
	document.getElementById("result_score").innerHTML = "0";
	
	connect_onclick();
}

function connect_onclick()
{
	if(ws == null)
	{
		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";

		if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "["))
		{
			// network resource identifier to UNC path name conversion
			ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
			ws_host_addr = ws_host_addr.replace(/:/g, "-");
			ws_host_addr += ".ipv6-literal.net";
		}

		ws = new WebSocket("ws://" + ws_host_addr + "/shooting", "csv.phpoc");

		document.getElementById("ws_state").innerHTML = "CONNECTING";

		ws.onopen = ws_onopen;
		ws.onclose = ws_onclose;
		ws.onmessage = ws_onmessage;
	}
	else
		ws.close();
}

function ws_onopen()
{
	document.getElementById("ws_state").innerHTML = "<font color='#35aba6'>CONNECTED</font>";
	document.getElementById("bt_connect").innerHTML = "Disconnect";

	setButton();
}

function setButton() {
	document.getElementById("displayDiv").style.display  = "none";
	document.getElementById("resultDiv").style.display  = "none";
	document.getElementById("buttonDiv").style.display  = "block";	

}

function ws_onclose()
{
	document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
	document.getElementById("bt_connect").innerHTML = "Connect";

	ws.onopen = null;
	ws.onclose = null;
	ws.onmessage = null;
	ws = null;
}

function ws_onmessage(e_msg)
{
	
	e_msg = e_msg || window.event; // MessageEvent
	
	console.log(e_msg.data);
	
	if (e_msg.data == "R") {
		startGame();		
	} else {
		var tmp_score = 0;
		tmp_score = parseInt(document.getElementById("score").innerHTML) + parseInt(e_msg.data);
		document.getElementById("score").innerHTML = tmp_score;
	//	document.getElementById("result_score").innerHTML = tmp_score;			
	}
	


}

function timedCount()
{
	document.getElementById("counter").innerHTML=c;
    
	c = c-1;
	t = setTimeout("timedCount()",1000);
    
    if (c<0) {
		endGame();
    }    
}

function endGame() {
	resetCount();

	document.getElementById("result_score").innerHTML = "Score : " + document.getElementById("score").innerHTML;
	
	document.getElementById("displayDiv").style.display  = "none";
	document.getElementById("buttonDiv").style.display  = "none";			
	document.getElementById("resultDiv").style.display  = "block";
	
	if(ws.readyState == 1)
      	  ws.send("E\r\n");	
}

function readyGame() {
	if(ws.readyState == 1)
      	  ws.send("R\r\n");	

	document.getElementById("start_span").innerHTML  = "READY";
}

function startGame() {

		if(ws.readyState == 1)
	      	  ws.send("S\r\n");	
	
		document.getElementById("displayDiv").style.display  = "block";
		document.getElementById("resultDiv").style.display  = "none";
		document.getElementById("buttonDiv").style.display  = "none";		
      	  
		doTimer();      	 			
}

function reset() {
	resetCount();
	setButton();
	
	document.getElementById("start_span").innerHTML  = "START";	
	
	document.getElementById("counter").innerHTML = "0";
	document.getElementById("score").innerHTML = "0";	
	document.getElementById("result_score").innerHTML = "0";	
}

function doTimer()
{
	if (!timer_is_on)
  	{
  		timer_is_on=1;
  		timedCount();
  	}
}

function stopCount()
{
	clearTimeout(t);
	timer_is_on=0;
}

function resetCount()
{
	clearTimeout(t);
	timer_is_on=0;
	c=30;
}

function restartCount() {
	clearTimeout(t);
	timer_is_on=0;
	c=30;
	doTimer();
}

window.onload = init;
</script>
<style type="text/css">
.contents {
	font-family: arial;
	font-size: 380px;
	font-weight: bold;
}

.subjects {
	font-family: arial;
	font-size: 72px;
	font-weight: bold;
}

.span_button {
	margin-top: 122px;
	
	font-family: arial;
	font-size: 256px;	
/*	border: 1px solid black;	*/
}

.span_result {
	margin-top: 50px;
	font-family: arial;
	font-size: 128px;
	font-weight: bold;
}

#resultDiv, #buttonDiv {
	border: 1px solid black;		
}

h1 {
	font-family: arial;
	font-size: 120px;
	font-weight: bold;	
}
</style>
</head>

<body>
<br/><br/><br/>
<div id="buttonDiv" style="margin: 0 auto;width:980px;height:500px;">
	<div style="margin-top:96px;">
		<span id="start_span" class="span_button" onclick="readyGame();">START</span>
	</div>
</div>

<div id="resultDiv" style="margin: 0 auto;width:980px;height:500px;">
	<br/><br/><br/>
	<span class="span_result" id="result">GAME OVER</span><br/><br/><br/><br/>
	<span class="span_result" id="result_score"></span>
</div>

<div id="displayDiv" style="margin: 0 auto;width:980px;height:500px;">
	<table style="width:980px;">
		<tr>
			<td style="width:450px;height:76px;border: 1px solid black;"><span class="subjects" style="color:#da6324;">Time</span></td>
			<td style="width:72px;height:76px;"></td>
			<td style="width:450px;height:76px;border: 1px solid black;"><span class="subjects" style="color:#35aba6;">Score</span></td>
		</tr>
		<tr>
			<td style="height:448px;border: 1px solid black;"><span class="contents" id="counter" style="color:#da6324;">0</span></td>
			<td style="height:448px;"><span class="contents"></span></td>
			<td style="height:448px; border: 1px solid black;"><span class="contents" id="score" style="color:#35aba6;">0</span></td>
		</tr>
	</table>
</div>
<br/><br/>
<h2>WebSocket <font id="ws_state" color="gray">CLOSED</font></h2>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
<button id="bt_reset" type="button" onclick="reset();">Reset</button>

<br/><br/>
<span id="log"></span>
</body>
</html>

Shooting Game

Things used in this project

Hardware components

Story

Project

Items

How It Works

Video Clip

Code

task0.php

index.php

Credits

Gyusik Song

Comments

Embed the widget on your own site

Shooting Game

Shooting Game

Things used in this project

Hardware components

Story

Project

Items

How It Works

Video Clip

Code

task0.php

index.php

Credits

Gyusik Song

Comments

Related channels and tags