The document discusses how front-end developers can create games for the web using only HTML, CSS and JavaScript. It covers how early browser games led to modern game jams and explains web technologies like Canvas, WebSockets, WebGL and Gamepad API that enable real-time multiplayer and immersive games in the browser. Front-end developers are encouraged to use these technologies and emerging web game engines to make browser games that are cross-device, push technical boundaries and explore new forms of monetization beyond traditional websites.

1. Front-End Developers Can
Make Games, Too!
Alicia Sedlock | @aliciability
Web Unleashed 2016

2. Who remembers
Newgrounds?

5. The Web is an artistic medium

7. Then one day…

12. My first Game Jam

13. Oh but it gets worse…

14. Pure HTML & CSS Games?

15. Canvas

16. Web Sockets

17. var io = require(‘socket.io')(http);
io.on('connection', function(socket){
console.log('a user connected’);
socket.on('disconnect', function(){
console.log(‘user disconnected');
});
});

18. $(‘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;
});

19. WebGL

20. Gamepad API

21. 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 }

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

23. The World of Web Game Engines

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

29. Device agnostic

30. Pushing technical boundries

31. Monetization

32. Beyond the Browser

36. So..what now?

37. Go forth and make
games!
Thank you!

38. 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/