Html5 game, websocket e arduino

Html5 Game + Websocket + Arduino
Andrea D’Ippolito + Giuseppe Modarelli

Phaser.io 101
Javascript Game Development Engine

Phaser.io
var game = new Phaser.Game(1200, 600, Phaser.AUTO);
game.state.add('boot', BootState);
game.state.add('preload', PreloadState);
game.state.add('menu', MenuState);
game.state.add('play', PlayState);
game.state.add('finish', FinishState);
game.state.start('boot');

Phaser.io
{
preload: function() {
...
},
create: function() {
...
},
update: function() {
...
}
}

Phaser.io
{
...
this.load.image('sky', 'assets/sky.png');
this.load.image('cloud1', 'assets/cloud1.png');
this.load.image('cloud2', 'assets/cloud2.png');
this.load.image('ground', 'assets/ground.png');
this.load.image('home', 'assets/home.png');
this.load.image('startButton', 'assets/start.png');
this.load.spritesheet('monk', 'assets/monk.png', 80, 103);
...
},
...
},
...
}
}

credits: Emanuela Oliva. emanuelaoliva.com

Phaser.io
{
...
},
...
this.player = this.game.add.sprite(560, this.game.world.height - 150, 'monk');
this.game.physics.arcade.enable(this.player);
this.player.body.bounce.y = 0.35;
this.player.body.gravity.y = -15;
this.player.body.collideWorldBounds = true;
this.player.animations.add('left', [3, 4], 10, true);
this.player.animations.add('right', [0, 1], 10, true);
this.cursors = this.game.input.keyboard.createCursorKeys();
this.game.camera.follow(this.player);
...
},
...
}
}

Phaser.io
{
...
},
...
},
...
if (this.cursors.left.isDown) {
this.player.animations.play('left');
this.player.body.velocity.x = -75;
} else if (this.cursors.right.isDown) {
this.player.animations.play('right');
this.player.body.velocity.y = 75;
} else {
this.player.animations.stop();
this.player.frame = 2;
}
...
}
}

Socket.io 101
Websocket connection for real time pub/sub messaging

Socket.io
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket) {
socket.on('controls', function(msg) {
socket.broadcast.emit(msg);
});
socket.on('finish', function(msg) {
socket.broadcast.emit('you won');
});
socket.on('controller', function(msg) {
socket.broadcast.emit('controller connected', msg);
});
});
http.listen(3000, function() {
console.log('Listening on port %d', http.address().port);
});

Socket.io
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<button id="left">Turn Left</button><button id="right">Turn Right</button>
<script>
var socket = io();
socket.emit( 'controller', 'HTML5 Gamepad' );
$(function(){
$('#left').click(function() {
socket.emit( 'controls', 'turn left');
});
$('#right').click(function() {
socket.emit( 'controls', 'turn right');
});
});
socket.on( 'you won', function(mgs) {
window.location.href = 'http://www.wearemonk.com' ;
});
</script>
</body>
</html>

Phaser.io + Socket.io
{
...
},
...
this.socket = io();
var self = this;
this.socket.on('turn left', function(msg) {
self.turnLeft();
});
this.socket.on('turn right', function(msg) {
self.turnRight();
});
...
},
...
}
}

Arduino 101
Sketch Arduino per accendere un led con un bottone

Arduino
const int buttonPin = 3; // the number of the pushbutton pin
const int ledPin = 4; // the number of the LED pin
int buttonState = 0; // variable for reading the pushbutton status
void setup() {
pinMode(ledPin, OUTPUT); // initialize the LED pin as an output:
pinMode(buttonPin, INPUT); // initialize the pushbutton pin as an input:
}
void loop(){
buttonState = digitalRead(buttonPin); //read the state of the pushbutton
value
// check if the pushbutton is pressed.
// if it is, the buttonState is HIGH:
if (buttonState == HIGH) {
digitalWrite(ledPin, HIGH); // turn LED on:
}
else {
digitalWrite(ledPin, LOW); // turn LED off:
}
}

Noduino 101
Come controllare Arduino con Javascript (grazie a node e websocket)
Accendere un led con bottone

Noduino
var requirejs = require('requirejs');
requirejs.config({nodeRequire: require});
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial',
'../public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) {
var Noduino = new NoduinoObj({'debug': false}, NoduinoConnector, Logger);
Noduino.connect(function(err, board) {
if (err) { return console.log(err); }
var led_4;
board.withLED({pin: 4}, function(err, LED) {
led_4 = LED;
led_4.on('on',function(){
setTimeout(function () {
led_4.setOff();
}, 250);
});
});
board.withButton({pin: 3}, function(err, Button) {
Button.on('push', function() {
console.log('Button pushed');
led_4.setOn();
});
});
});
});

Noduino
var socket = require('socket.io-client')('http://localhost:3000');
requirejs(['../public/scripts/libs/Noduino', '../public/scripts/libs/Noduino.Serial', '..
/public/scripts/libs/Logger'], function (NoduinoObj, NoduinoConnector, Logger) {
var led_4;
led_4 = LED;
led_4.on('on',function(){
setTimeout(function () {
led_4.setOff();
}, 250);
});
});
led_4.setOn();
socket.emit('controls','turn left');
});
});
});
});

Noduino
var led_4;
[...]
});
led_4.setOn();
});
});
socket.on('you won', function(msg){
console.log("YOU WON");
setInterval(function () {
led_7.blink(250);
led_4.blink(250);
}, 500);
});
});
});

Noduino
var board_serial = board.c.boards[0].serial.path;
socket.emit('controller','Arduino: '+board_serial);
var led_4;
[...]
});
led_4.setOn();
});
});
socket.on('you won', function(msg){
[...]
});
});
});

recap @ wcap
● 404 Game: http://bit.ly/rescuemonk
● Noduino Gamepad: http://bit.ly/noduino-gamepad
● Phaser.io: http://phaser.io
● Socket.io: http://socket.io/
● Arduino: www.arduino.cc
○ Button: http://arduino.cc/en/tutorial/button
● Noduino: http://semu.github.io/noduino/
● Andrea: @adedip / andreadippolito.it
● Giuseppe: @gmodarelli / gmodarelli.com

www.monksoftware.it
info@monksoftware.it
Twitter: @monksoftwareit
Facebook: MONKSoftwareIT
Roma
Via Tirone 11, 00146
+39 06 99291819
Kraków
ul. Rakowicka 11, 30-033
+48 888 565 545

Html5 game, websocket e arduino

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html5 game, websocket e arduino

Similar to Html5 game, websocket e arduino (20)

Recently uploaded

Recently uploaded (20)

Html5 game, websocket e arduino