New demos: Touch Events, PeerJS networking.

va3c · Mar 18, 2014 · 73ad62f · 73ad62f
1 parent 50a0120
commit 73ad62f
Show file tree

Hide file tree

Showing 25 changed files with 41,078 additions and 1 deletion.
diff --git a/Three.js/Remote-Controller-Receive.html b/Three.js/Remote-Controller-Receive.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>PeerJS Receive Test</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<link rel=stylesheet href="css/base.css"/>
+</head>
+<body>
+
+<!-- stats display here -->
+<div id="graphics"></div> 
+
+<!-- graphics here -->
+<center>
+<canvas id="myCanvas" width="480" height="320"></canvas> 
+</center>
+
+<!-- requestAnimationFrame cross-browser compatibility -->
+<script src="js/RequestAnimationFrame.js"></script>
+<!-- Uses Peer.JS for networking 
+<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
+-->
+<script src="js/peer.js"></script>
+
+
+<script>
+
+// declare global variables (if any) here
+var prevTime, currTime, dt;
+var playerColor = "#888888";
+
+// assign variables to page elements for easy access
+var graphicsArea = document.getElementById('graphics');     // stats here
+var displayCanvas  = document.getElementById('myCanvas');
+var displayContext = displayCanvas.getContext('2d');
+
+// create a second canvas to implement double buffering
+var bufferCanvas = document.createElement('canvas');
+bufferCanvas.width = displayCanvas.width;
+bufferCanvas.height = displayCanvas.height;
+var bufferContext = bufferCanvas.getContext('2d');
+
+var playerPosX, playerPosY, playerVelX, playerVelY;
+
+// global variables
+var peer = null; // me
+var conn = null; // the other one
+var rectangleTouch = {};
+
+//////////
+// MAIN //
+//////////
+
+initialize();
+window.requestAnimationFrame( render );
+setTimeout( update, 1000 / 60 );
+
+///////////////
+// FUNCTIONS //
+///////////////	
+
+function initialize() 
+{	
+	// player variables
+	playerVelX = playerVelY = 0;
+	playerPosX = 50;
+	playerPosY = 150;
+
+	// Receive data / Listen for connection
+	// Passive. Needs preset peer ID so initiator knows who to call.
+	console.log("Receiver, starting up...");
+
+	// setup PeerJS
+	peer = new Peer("insertPeerNameHere", {key: 'insertKeyHere'});
+	peer.on('open', function(id) 
+	{ 
+		console.log("My name is: " + id); 
+	});
+
+	peer.on('connection', function(conn)
+	{
+		console.log("Someone has connected...");
+
+		// whenever data is received, do this:
+		conn.on('data', function(data)
+		{
+			rectangleTouch = data;
+		});
+	});
+
+} // end of function initialize()
+
+
+// game logic functions appear here
+function update()
+{
+	// calculate delta (time elapsed since last update)
+	currTime = new Date().getTime();        // update time
+    dt = currTime - (prevTime || currTime); // dt = 0 during first loop
+    prevTime = currTime;                    // store for next dt calculation
+
+	playerVelX = 0;
+	playerVelY = 0;
+
+	if ( rectangleTouch.up )
+		playerVelY -= 150;
+	if ( rectangleTouch.down )
+		playerVelY += 150;
+	if ( rectangleTouch.left )
+		playerVelX -= 150;
+	if ( rectangleTouch.right )
+		playerVelX += 150;
+
+	if ( rectangleTouch.A )
+		playerColor = "#00cc00";
+	else if ( rectangleTouch.B )
+		playerColor = "#cc0000";
+	else if ( rectangleTouch.X )
+		playerColor = "#0000cc";
+	else if ( rectangleTouch.Y )
+		playerColor = "#cccc00";
+	else
+		playerColor = "#888888";
+
+	playerPosX += playerVelX * (dt / 1000);
+	playerPosY += playerVelY * (dt / 1000);
+
+	var updateTime = 0; // adjust for time used to execute code in update method
+	// loop @ 60 frames per second
+    setTimeout( update, 1000 / 60 - updateTime );
+}
+
+function render() 
+{
+	// clear screen
+	bufferCanvas.width = bufferCanvas.width;
+	var groundHeight = 100;
+	// draw "sky"
+	bufferContext.fillStyle = "#8888ff";
+	bufferContext.fillRect(0, 0, displayCanvas.width, displayCanvas.height);
+	// draw "grass"
+	bufferContext.fillStyle = "#44ff44";
+	// top left (x,y) and dimensions (w,h)
+	bufferContext.fillRect(0, bufferCanvas.height - groundHeight, bufferCanvas.width, groundHeight);
+	// draw "player"
+	bufferContext.fillStyle = playerColor;
+	bufferContext.fillRect(playerPosX, playerPosY, 80, 80);
+
+	displayContext.drawImage(bufferCanvas, 0, 0);
+
+	// loop @ next possible update time
+	window.requestAnimationFrame( render );
+}
+
+</script>
+
+</body>
+</html>
diff --git a/Three.js/Remote-Controller-Send.html b/Three.js/Remote-Controller-Send.html
@@ -0,0 +1,171 @@
+<html>
+<head>
+<title>
+PeerJS/TouchEvent Send Test
+</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+</head>
+<body>
+
+<!-- Uses Peer.JS for networking 
+<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
+-->
+<script src="js/peer.js"></script>
+
+<div id="up"    name="button" gridx=1 gridy=1 imgname="up-C"></div>
+<div id="left"  name="button" gridx=0 gridy=2 imgname="left-C"></div>
+<div id="down"  name="button" gridx=1 gridy=3 imgname="down-C"></div>
+<div id="right" name="button" gridx=2 gridy=2 imgname="right-C"></div>
+<div id="A"     name="button" gridx=5 gridy=3 imgname="A-button"></div>
+<div id="B"     name="button" gridx=6 gridy=2 imgname="B-button"></div>
+<div id="X"     name="button" gridx=4 gridy=2 imgname="X-button"></div>
+<div id="Y"     name="button" gridx=5 gridy=1 imgname="Y-button"></div>
+
+<script>
+
+var touchpointData = [];
+
+var rectangleData  = {};
+var rectangleTouch = {};
+
+// PeerJS variables
+var peer = null; // me
+var conn = null; // the other one
+var ready = false;
+
+window.addEventListener("resize", onResize, true);
+document.addEventListener("touchstart", helloTouch, false);
+document.addEventListener("touchmove",  helloTouch, false);
+document.addEventListener("touchend",   helloTouch, false);
+
+onResize();
+initialize();
+update();
+
+function initialize()
+{
+		console.log("Sender, initiating connection...");
+		peer = new Peer({key: 'insertKeyHere'});
+		peer.on('open', function(id) 
+		{ 
+			console.log("My name is: " + id); 
+		});
+
+		// Look for a peer with the given ID (in our API key namespace)
+		//  and try to connect to them
+		conn = peer.connect("insertPeerNameHere");
+
+		conn.on('open', function()
+		{
+			console.log("Sending 'Success!' message...");
+			conn.send('Success!');
+			ready = true;
+		});
+
+} // end of function initialize()
+
+
+function onResize()
+{
+	// (re)initialize/size div buttons
+	var buttonDivs = document.getElementsByName("button");
+	var maxGridX = 7;
+	var maxGridY = 5;
+	var w = window.innerWidth;
+	var h = window.innerHeight;
+	var imagePrefix = "images/";
+	var imageSuffix = ".png";
+	var unit = Math.min( w / maxGridX, h / maxGridY );
+	var offsetX = (w - maxGridX * unit) / 2; // for horizontal centering
+
+	var a = buttonDivs[0];
+
+	for (var i = 0; i < buttonDivs.length; i++)
+	{
+		// set position and size of div
+		var element = buttonDivs[i];
+		var gridx = element.getAttribute("gridx");
+		var gridy = element.getAttribute("gridy");
+		element.style.position = "absolute";
+		element.style.left   = (offsetX + unit * gridx) + "px";
+		element.style.top    = (unit * gridy) + "px";
+		element.style.width  = unit + "px";
+		element.style.height = unit + "px";
+		element.innerHTML = "<img src='" + imagePrefix + element.getAttribute("imgname") + imageSuffix + "' width=100% height=100%>";
+
+		// initialize touch data
+		var name = element.id;
+		rectangleTouch[ name ] = false;
+
+		rectangleData[name] = 
+		{ 
+			"name" : name,
+			x: parseInt(element.style.left),
+			y: parseInt(element.style.top),
+			w: parseInt(element.style.width),
+			h: parseInt(element.style.height),
+			"containsPoint" : function(pointX, pointY) 
+			{ 
+				return ( (this.x < pointX) && (pointX < (this.x + this.w))
+					  && (this.y < pointY) && (pointY < (this.y + this.h)) );
+			},
+			"containsAnyPoint" : function( pointArray )
+			{
+				for (var i = 0; i < pointArray.length; i++)
+				{
+					var pointX = pointArray[i][0];
+					var pointY = pointArray[i][1];
+					if ( this.containsPoint(pointX, pointY) )
+						return true;
+				}
+				return false;
+			}
+		}; // end of rectangleData object creation
+	} // end of for loop
+} // end of onResize()
+
+function updateTouchData()
+{
+	for (var rectangleName in rectangleData)
+		rectangleTouch[ rectangleName ] = rectangleData[rectangleName].containsAnyPoint(touchpointData);	
+}
+
+function helloTouch(e)
+{
+	// Android bug? http://uihacker.blogspot.tw/2011/01/android-touchmove-event-bug.html
+	e.preventDefault();
+
+	var t = e.touches;
+	touchpointData = [];
+	for (var i = 0; i < t.length; i++)
+		touchpointData.push( [ t[i].pageX, t[i].pageY ] );
+}
+
+function update()
+{
+	updateTouchData();
+
+	if (ready) // send the listener new data at regular intervals
+	{
+		conn.send(rectangleTouch);
+	}
+	setTimeout(update, 50);
+}
+
+function toString(obj)
+{
+	var s = "{ ";
+	for (var key in obj)
+	{
+		var value = obj[key];
+		s += key + ":" + value + " ";
+	}
+	s += "}";
+	return s;
+}
+</script>
+
+
+</body>
+</html>