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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Create online games with node.js and socket.io

Similaire à Create online games with node.js and socket.io (20)

Dernier

Dernier (20)

Create online games with node.js and socket.io