Download - Front-End Developers Can Makes Games, Too!
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/