Games & Multiplayer

- for classic and mobile devices -

Responsive Websites

https://github.com/serbanghita/Responsive-Websites-presentation

HTML5

https://github.com/serbanghita/HTML5-presentation

New stuff

JavaScript APIs

Browser games are made with JavaScript

How do I make a browser based game?

1st grade game components

• Layout
• Graphics
• Input
• Game loop
• Storage

What HTML5 APIs should I use?

Full list: html5index.org

What tools do I use?

Tiled

www.mapeditor.org

Any editor

* any editor with JavaScript code validation (eg. JSlint).

Canvas

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

 // Start drawing.
 ctx.beginPath();
 ctx.rect(188, 50, 200, 100);
 ctx.fillStyle = 'yellow';
 ctx.fill();
 ctx.lineWidth = 7;
 ctx.strokeStyle = 'black';
 ctx.stroke();

Sprites

Input

Touch

patrickhlauke.github.io/touch/

Game loop

var GameEngine = {
  //...
  loop: function(){

	  this.now = Date.now();
	  this.timeDiff = (this.now - this.then) / 1000; // 0.016

	  for(i in entities){
	    entities[i].draw();
	  }

	  window.requestAnimationFrame(function(){
	    GameEngine.loop();
	  });

  }
  // ...
};

Storage

window.localStorage

// Set
localStorage.setItem('name', 'Serban Ghita');
localStorage.setItem('position', JSON.stringify({x: 10, y: 10}));

// Get
localStorage.getItem('name');
JSON.parse(window.localStorage.getItem('position'));

// Delete
localStorage.removeItem('name');

Networking

firebase.com

WebSockets

var conn = new WebSocket("ws://server.com/chat");

conn.onmessage = function(msg) {
    msgObj = JSON.parse(msg); // decode JSON into object
}

conn.onclose = function() { }

conn.send('Ce mai faci?');

SOCKET.io

node.js

HTML5 game

• Proof of concept
• Development time: 2 days
• Showcase: Canvas2D, Websockets, Touch, CSS3
• For both classic and mobile devices
• JavaScript: 23kb (minified) / 9.7kb (compressed); Sprites (36kb)

http://goo.gl/tzDQeP

Thank you!