Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-End Developers Can Makes Games, Too!

352 views

Published on

Presented at FITC's Web Unleashed 2016 in Toronto
by Alicia Sedlock, Society of Grownups

FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc

Overview

We’ve seen front-end technologies advance in ways that have opened a world of possibilities for building websites and applications. But what happens when we take these technologies and use them for something different – something like building games?

Most developers are focusing on using canvas to build games, but let’s think outside of that box for a bit. How can we leverage the latest and greatest of CSS3, along with with a powerful tool like a CSS-preprocessor, to build games using nothing more than CSS, JS, and HTML? And why would you even want to do that? This talk will walk through how to utilize different parts of the web development stack to make their own games, as well as discuss why it’s important to bring games to the web.

Objective

To teach front-end developers how to twist their skills, and see how the browser stack is a game development playground.

Target Audience

Those who are interested in how to apply their technical knowledge to something more creative and interactive.

Assumed Audience Knowledge

Comfortable use using CSS pre-processors and writing intermediate-level CSS and JS.

Five Things Audience Members Will Learn

The history of gaming on the web
Why the browser is a great platform for games
How to use CSS3 properties to animate gameplay
How to map out separation of gaming concerns while developing games in the browser
The limits of game development when done in this manner

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Front-End Developers Can Makes Games, Too!

  1. 1. Front-End Developers Can Make Games, Too! Alicia Sedlock | @aliciability Web Unleashed 2016
  2. 2. Who remembers Newgrounds?
  3. 3. The Web is an artistic medium
  4. 4. Then one day…
  5. 5. My first Game Jam
  6. 6. Oh but it gets worse…
  7. 7. Pure HTML & CSS Games?
  8. 8. Canvas
  9. 9. Web Sockets
  10. 10. var io = require(‘socket.io')(http); io.on('connection', function(socket){ console.log('a user connected’); socket.on('disconnect', function(){ console.log(‘user disconnected'); }); });
  11. 11. $(‘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; });
  12. 12. WebGL
  13. 13. Gamepad API
  14. 14. 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 }
  15. 15. function gameLoop() { var gamepad = navigator.getGamepads()[0]; console.log(gp.buttons[0].pressed); } => true
  16. 16. The World of Web Game Engines
  17. 17. Web games are making a comeback, this time in a different shape.
  18. 18. Device agnostic
  19. 19. Pushing technical boundries
  20. 20. Monetization
  21. 21. Beyond the Browser
  22. 22. So..what now?
  23. 23. Go forth and make games! Thank you!
  24. 24. 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/

×