Create online games with node.js and socket.io

Create online games with
node.js and socket.io

Agenda
• Example 1: a simple MMOCPG
Massively Multiplayer Online Click-Playing Game
by Krasimir Tsonev
• Example 2: a Connect 4 game
Adaptations for a 2-Player Game
by Gérard Tyedmers
• Various
• Beer

History: From Word to Web
• Am Anfang war das Word

History: From Word to Web
• HTML5 WebApp

Online Game
with NodeJS and Socket.io
• by Krasimir Tsonev
• http://krasimirtsonev.com/blog/article/Real-
time-chat-with-NodeJS-Socketio-and-
ExpressJS

Install Node and Modules
• Get Node.js from nodejs.org
• node-v0.10.26-x64
• Socket.io for real time communication
• moniker to generate random names

Install Node and Modules
• Create File „package.json“:
{
"name": "SocketioExample",
"version": "0.0.1",
"description": "SocketioExample",
"dependencies": {
"socket.io": "0.9.16",
"moniker": "0.1.2"
},
"author": "dev"
}
• Run „npm install“ in the diretory of your file

Structure of the game
index.js - Server
page.html - Client

index.js - Server
• connection
• disconnect
• click
page.html - Client

index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• click add 1 point, broadcast to users
page.html - Client

index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• click add 1 point, broadcast to users
page.html - Client
• HTML containers
• Script

page.html
• HTML containers
– Welcome Message
– Progress Bar (clickable)
– Users List
• Script
– Connect to Server
– Get Welcome Message
– Get Users List
– Send Click
– Get Progress

• Client: var socket = io.connect('http://localhost:3250');
• Server: io.sockets.on('connection', function (socket) {
• Client: progress.onclick = function() { socket.emit("click");
• Server: socket.on("click", function() {
• Server: io.sockets.emit("update", {currWidth: currWidth});
• Client: socket.on('update', function (data) {

page.html
<!DOCTYPE html>
<html>
<head>
<title>Real time game</title>
<style type="text/css"> ... styles here… </style>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
... game logic here …
</script>
</head>

page.html
<body class="main">
<div id="welcome"></div>
<hr />
<div id="progress"></div>
<div id="win">150</div>
<hr />
<div id="users"></div>
<hr />
<div id="results">
</div>
</body>
</html>

page.html
window.onload = function() {
var welcome = document.getElementById("welcome");
var allUsers = document.getElementById("users");
var progress = document.getElementById("progress");
var results = document.getElementById("results");
var socket = io.connect('http://localhost:3250');

page.html
socket.on('welcome', function (data) { console.log(data);
welcome.innerHTML = "Welcome to the game <strong>" +
data.name + "</strong>„; });
socket.on('users', function (data) { allUsers.innerHTML =
"<strong>Users:</strong> " + data.users; });
socket.on('update', function (data) { progress.innerHTML =
data.currentWidth; progress.style.width =
parseInt(data.currentWidth) + "px"; });
socket.on('win', function (data) { results.innerHTML =
data.message; });
progress.onclick = function() { socket.emit("click"); } }

index.js
var handler = function(req, res) {
fs.readFile('./page.html', function (err, data) {
if(err) throw err;
res.writeHead(200);
res.end(data);
});
}

index.js
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var Moniker = require('moniker');
var port = 3250;
app.listen(port);

index.js
io.sockets.on('connection', function (socket) {
var user = addUser();
updateWidth();
socket.emit("welcome", user);
socket.on('disconnect', function () {
removeUser(user);
});
socket.on("click", function() {
…
});
});

index.js
socket.on("click", function() {
currentWidth += 1;
user.clicks += 1;
if(currentWidth == winWidth) {
currentWidth = initialWidth;
io.sockets.emit("win", { message: "<strong>" +
user.name + "</strong> rocks!" });
}
updateWidth();
updateUsers();
});
});

index.js
var initialWidth = 20;
var currentWidth = initialWidth;
var winWidth = 150;
var users = [];
var addUser = function() {
var user = { name: Moniker.choose(), clicks: 0 }
users.push(user);
updateUsers();
return user;
}

index.js
var removeUser = function(user) {
for(var i=0; i<users.length; i++) {
if(user.name === users[i].name) { users.splice(i, 1);
updateUsers(); return; }
}
}

index.js
var updateUsers = function() {
var str = '';
var user = users[i];
str += user.name + ' <small>(' + user.clicks + '
clicks)</small> ';
}
io.sockets.emit("users", { users: str });
}
var updateWidth = function() {
io.sockets.emit("update", { currentWidth: currentWidth });
}

Online Connect 4
with NodeJS and Socket.io
• by Gérard Tyedmers
• grrd01.github.io/4inaRow/

Strucure of the game
HTML Click Result
• One server
• One game
• Same screen/result for all
• Broadcasting to all

Strucure of the game
HTML Click
HTML
Click
Result
Result
Result
WaitClick

Connecting
• <script src="/socket.io/socket.io.js"></script>
• var socket = io.connect('http://localhost:3250');

Connecting
• <script src="/socket.io/socket.io.js"></script>
• var socket = io.connect('http://localhost:3250');
• <script type="text/javascript"
src="http://grrds4inarow.nodejitsu.com:80/socket.io
/socket.io.js"></script>
• var socket =
io.connect('http://grrds4inarow.nodejitsu.com:80');
• socket.disconnect();
• socket.socket.reconnect();

Starting Games
var startgame = function(user) {
if (i == users.length-1) { // kein freier Gegner
io.sockets.socket(users[i].id).emit("connect", users[i]);
} else { // Gegner vorhanden
if (users[i].opponent == null) {
users[i].opponent = users[users.length-1].id;
users[i].role = "0";
io.sockets.socket(users[i].id).emit("startgame", users[i]);
users[users.length-1].opponent = users[i].id;
users[users.length-1].role = "1";
io.sockets.socket(users[users.length-1].id)
.emit("startgame",users[users.length-1]);
break;
} } } }

Playing
Sender
socket.emit('playsend', {to: user.opponent,col: spaltenr, round:
countround});
Server
socket.on("playsend", function (data) {
io.sockets.socket(data.to).emit("playget", data);
});
Reciever
socket.on('playget', function (data) {
if (countround == data.round && lastround != data.round) {
lastround = data.round;
spielzug(data.col);
}
});

Host your app
• http://localhost
• your own web-server
• node.js hoster
https://www.nodejitsu.com/

Create online games with node.js and socket.io

More Related Content

What's hot (20)

Similar to Create online games with node.js and socket.io (20)

Recently uploaded (20)

Create online games with node.js and socket.io