Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Create online games with
node.js and socket.io
Disclaimer
Agenda
• Example 1: a simple MMOCPG
Massively Multiplayer Online Click-Playing Game
by Krasimir Tsonev
• Example 2: a Conn...
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-N...
Install Node and Modules
• Get Node.js from nodejs.org
• node-v0.10.26-x64
• Socket.io for real time communication
• monik...
Install Node and Modules
• Create File „package.json“:
{
"name": "SocketioExample",
"version": "0.0.1",
"description": "So...
Structure of the game
index.js - Server
page.html - Client
Structure of the game
index.js - Server
• connection
• disconnect
• click
page.html - Client
Structure of the game
index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• ...
Structure of the game
index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• ...
Structure of the game
page.html
• HTML containers
– Welcome Message
– Progress Bar (clickable)
– Users List
• Script
– Con...
Structure of the game
• Client: var socket = io.connect('http://localhost:3250');
• Server: io.sockets.on('connection', fu...
page.html
<!DOCTYPE html>
<html>
<head>
<title>Real time game</title>
<style type="text/css"> ... styles here… </style>
<s...
page.html
<body class="main">
<div id="welcome"></div>
<hr />
<div id="progress"></div>
<div id="win">150</div>
<hr />
<di...
page.html
window.onload = function() {
var welcome = document.getElementById("welcome");
var allUsers = document.getElemen...
page.html
socket.on('welcome', function (data) { console.log(data);
welcome.innerHTML = "Welcome to the game <strong>" +
d...
index.js
var handler = function(req, res) {
fs.readFile('./page.html', function (err, data) {
if(err) throw err;
res.write...
index.js
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs'...
index.js
io.sockets.on('connection', function (socket) {
var user = addUser();
updateWidth();
socket.emit("welcome", user)...
index.js
socket.on("click", function() {
currentWidth += 1;
user.clicks += 1;
if(currentWidth == winWidth) {
currentWidth ...
index.js
var initialWidth = 20;
var currentWidth = initialWidth;
var winWidth = 150;
var users = [];
var addUser = functio...
index.js
var removeUser = function(user) {
for(var i=0; i<users.length; i++) {
if(user.name === users[i].name) { users.spl...
index.js
var updateUsers = function() {
var str = '';
for(var i=0; i<users.length; i++) {
var user = users[i];
str += user...
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...
Starting Games
var startgame = function(user) {
for(var i=0; i<users.length; i++) {
if (i == users.length-1) { // kein fre...
Playing
Sender
socket.emit('playsend', {to: user.opponent,col: spaltenr, round:
countround});
Server
socket.on("playsend",...
Host your app
• http://localhost
• your own web-server
• node.js hoster
https://www.nodejitsu.com/
Nächste SlideShare
Wird geladen in …5
×

Create online games with node.js and socket.io

1.130 Aufrufe

Veröffentlicht am

A speech by Gerard Tyedmers for Mozilla Switzerland.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Create online games with node.js and socket.io

  1. 1. Create online games with node.js and socket.io
  2. 2. Disclaimer
  3. 3. 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
  4. 4. History: From Word to Web • Am Anfang war das Word
  5. 5. History: From Word to Web • HTML5 WebApp
  6. 6. Online Game with NodeJS and Socket.io • by Krasimir Tsonev • http://krasimirtsonev.com/blog/article/Real- time-chat-with-NodeJS-Socketio-and- ExpressJS
  7. 7. 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
  8. 8. 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
  9. 9. Structure of the game index.js - Server page.html - Client
  10. 10. Structure of the game index.js - Server • connection • disconnect • click page.html - Client
  11. 11. Structure of the game 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
  12. 12. Structure of the game 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
  13. 13. Structure of the game 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
  14. 14. Structure of the game • 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) {
  15. 15. 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>
  16. 16. 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>
  17. 17. 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');
  18. 18. 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"); } }
  19. 19. index.js var handler = function(req, res) { fs.readFile('./page.html', function (err, data) { if(err) throw err; res.writeHead(200); res.end(data); }); }
  20. 20. 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);
  21. 21. 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() { … }); });
  22. 22. 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(); }); });
  23. 23. 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; }
  24. 24. 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; } } }
  25. 25. index.js var updateUsers = function() { var str = ''; for(var i=0; i<users.length; i++) { 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 }); }
  26. 26. Online Connect 4 with NodeJS and Socket.io • by Gérard Tyedmers • grrd01.github.io/4inaRow/
  27. 27. Strucure of the game HTML Click Result • One server • One game • Same screen/result for all • Broadcasting to all
  28. 28. Strucure of the game HTML Click HTML Click Result Result Result WaitClick
  29. 29. Connecting • <script src="/socket.io/socket.io.js"></script> • var socket = io.connect('http://localhost:3250');
  30. 30. 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();
  31. 31. Starting Games var startgame = function(user) { for(var i=0; i<users.length; i++) { 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; } } } }
  32. 32. 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); } });
  33. 33. Host your app • http://localhost • your own web-server • node.js hoster https://www.nodejitsu.com/

×