Front-End Developers Can Make Games, Too!

Alicia Sedlock | @aliciability Web Unleashed 2016

Who remembers Newgrounds?

The Web is an artistic medium

Then one day…

My first Game Jam

Oh but it gets worse…

Pure HTML & CSS Games?

Canvas

Web Sockets

var io = require(‘socket.io')(http);

io.on('connection', function(socket){ console.log('a user connected’);

socket.on('disconnect', function(){ console.log(‘user disconnected'); });

});

$(‘button.move').click(function(){ socket.emit('movement', { position: $(‘#char’).position(), character: 1 }); return false; }); … socket.on('movement', function(params){ $(‘#char' + params.character).position.left = params.position.left; $(‘#char' + params.character).position.top = params.position.top; });

WebGL

Gamepad API

window.addEventListener("gamepadconnected", function(e) { console.log(e.gamepad);

});

=> { axes: Array[4] buttons: Array[16] connected: true id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)" index: 0 mapping: "standard" timestamp: 12 }

function gameLoop() { var gamepad = navigator.getGamepads()[0]; console.log(gp.buttons[0].pressed); }=> true

The World of Web Game Engines

Web games are making a comeback, this time in a different shape.

Device agnostic

Pushing technical boundries

Monetization

Beyond the Browser

So..what now?

Go forth and make games!

Thank you!

Resources and Demos

• https://horsemanity.herokuapp.com/# • https://grandmamadetoomuchcake.herokuapp.com/ • http://bug7a.github.io/hittest.js/ • http://codepen.io/collection/nWvBQJ/ • https://codepen.io/ziga-miklic/pen/Fagmh?editors=1100 • https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript • https://chrome.com/supersyncsports/#/en-US/m/rsnpc • https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API • https://github.com/neogeek/gamepad.js • http://phaser.io/learn • https://www.scirra.com/construct2 • http://boxart.github.io/