{"id":200356,"date":"2015-04-22T06:51:13","date_gmt":"2015-04-22T13:51:13","guid":{"rendered":"http:\/\/css-tricks.com\/?p=200356"},"modified":"2017-04-10T18:30:40","modified_gmt":"2017-04-11T01:30:40","slug":"how-to-make-a-smartphone-controlled-3d-web-game","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-a-smartphone-controlled-3d-web-game\/","title":{"rendered":"How to Make a Smartphone Controlled 3D Web Game"},"content":{"rendered":"

The following is a guest post by Charlie Walter<\/a>. Charlie does a bunch of work with Three.js<\/a> (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on!<\/em><\/p>\n

In this tutorial I’ll explain an approach on how to connect your smartphone to a 3D web game. We’ll be making a car which you can control by tilting your phone (using the phone’s accelerometer). We’ll use the JavaScript library three.js<\/a> for working with WebGL as well as WebSockets<\/a> through the socket.io<\/a> library and a few other web technologies.<\/p>\n

<\/p>\n

Try it now<\/h3>\n

Here’s the live demo<\/a> you can play with right now. Note that it works best on WiFi.<\/p>\n

<\/figure>\n

Getting Set Up<\/h3>\n

You are going to need to install Node<\/a> if you haven’t already. We are going to be using Express<\/a> to set up our server, and socket.io<\/a> for the WebSocket communication. <\/p>\n

Create a directory for this project, and put this package.json<\/code> at the root:<\/p>\n

{\r\n  \"name\": \"smartphone-controller-game\",\r\n  \"version\": \"0.1.0\",\r\n  \"devDependencies\": {\r\n    \"express\": \"*\"\r\n  }\r\n}<\/code><\/pre>\n
Now open up your project directory in terminal and install your project dependencies with this command:<\/p>\n
npm install<\/code><\/pre>\n
This looks in the package.json<\/code> file and uses the devDependencies<\/code> object to install the correct dependencies and versions of those dependencies. NPM uses Semvar versioning notation, and “*” means “latest”.<\/p>\n
In order to use socket.io we need to set up a server. This can be done using Express. First, let’s serve up an index file. Create a file that will contain our server code. Call it server.js<\/code>:<\/p>\n
var express = require('express'),\r\n    http    = require('http'),\r\n    app     = express(),\r\n    server  = http.createServer(app),\r\n    port    = 8080;\r\n\r\nserver.listen(port);\r\n\r\napp\r\n\r\n  \/\/ Set up index\r\n  .get('\/', function(req, res) {\r\n\r\n    res.sendFile(__dirname + '\/index.html');\r\n\r\n  });\r\n\r\n\/\/ Log that the servers running\r\nconsole.log(\"Server running on port: \" + port);<\/code><\/pre>\n
This sets up a server running on port :8080. When the root is requested (“\/”) it will send the `index.html` file in the response.<\/p>\n
Create the index.html<\/code> file:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n  <title>Smartphone Controller Game<\/title>\r\n<\/head>\r\n\r\n<body>\r\n  Hello World!\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
Now run this in the terminal:<\/p>\n
node server.js<\/code><\/pre>\n
It should say:<\/p>\n
Server running on port: 8080<\/code><\/pre>\n
Open the URL localhost:8080<\/code> in a browser and your index file should be rendered!<\/p>\n
Getting Sockets Going<\/h3>\n
Now that we have our project set up, let’s get our client and server communicating via sockets. First we need to install socket.io.<\/p>\n
npm install socket.io --save<\/code><\/pre>\n
In index.html<\/code>, include socket.io in the <head><\/code>:<\/p>\n
<script src=\"\/socket.io\/socket.io.js\"><\/script><\/code><\/pre>\n
and after the opening <body><\/code> tag add:<\/p>\n
<script>\r\nvar io = io.connect();\r\n\r\nio.on('connect', function() {\r\n  alert(\"Connected!\");\r\n});\r\n<\/script><\/code><\/pre>\n
This connects to socket.io and alerts a message letting us know it’s working.<\/p>\n
In server.js<\/code> add this:<\/p>\n
var io = require('socket.io').listen(server);\r\n\r\nio.sockets.on('connection', function (socket) {\r\n  console.log(\"Client connected!\")\r\n});<\/code><\/pre>\n
This sets up socket.io using the server and logs when new clients connect.<\/p>\n
Since server code has changed, we will have to re-run the server. Press “Ctrl + C” in the terminal to cancel the current process. This will have to be done each time server.js<\/code> is updated.<\/p>\n
We should now see the alert notifying us of a successful socket.io connection and the terminal should log “Client connected!” almost instantly.<\/p>\n
Connecting the Phone<\/h3>\n
Now we will connect a browser window on a phone (the controller for the car) to a desktop browser (the game). Here’s how that will work:<\/p>\n