SCMC HTML5 Game Development

1,016 views
918 views

Published on

My presentation for HTML5 Game development done at the Software Craftsmanship McHenry County.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,016
On SlideShare
0
From Embeds
0
Number of Embeds
162
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SCMC HTML5 Game Development

  1. 1. HTML5 Game Development #likeacraftsmanMonday, September 26, 2011 1
  2. 2. Monday, September 26, 2011 2
  3. 3. Monday, September 26, 2011 3
  4. 4. Monday, September 26, 2011 4
  5. 5. Monday, September 26, 2011 5
  6. 6. Monday, September 26, 2011 6
  7. 7. Monday, September 26, 2011 7
  8. 8. Monday, September 26, 2011 8
  9. 9. Monday, September 26, 2011 9
  10. 10. Monday, September 26, 2011 10
  11. 11. Monday, September 26, 2011 11
  12. 12. Monday, September 26, 2011 12
  13. 13. Monday, September 26, 2011 13
  14. 14. Nuts And BoltsMonday, September 26, 2011 14
  15. 15. CanvasMonday, September 26, 2011 15
  16. 16. Canvas <canvas width="200" height="200"> This Browser doesnt support the canvas. </canvas>Monday, September 26, 2011 16
  17. 17. Monday, September 26, 2011 17
  18. 18. context.save(); context.setTransform(1,0,0,1,0,0); context.translate(400, 300); context.rotate(playerState.rotationAngle); context.drawImage(player, -37, -30); context.restore();Monday, September 26, 2011 18
  19. 19. AudioMonday, September 26, 2011 19
  20. 20. Audio backgroundMusic.play(); backgroundMusic.pause();Monday, September 26, 2011 20
  21. 21. Monday, September 26, 2011 21
  22. 22. Monday, September 26, 2011 22
  23. 23. function gameLoop() { update(); draw(); } setInterval(function() { gameLoop(); }, this.getTickTime())Monday, September 26, 2011 23
  24. 24. this.loop = function() { while (scheduler.getTicks() > nextGameTick) { updaterList.update(); nextGameTick += scheduler.getTickTime(); } screen.render(); };Monday, September 26, 2011 24
  25. 25. TestsMonday, September 26, 2011 25
  26. 26. Monday, September 26, 2011 26
  27. 27. Monday, September 26, 2011 27
  28. 28. NO GUI!Monday, September 26, 2011 28
  29. 29. NO GUI!Monday, September 26, 2011 29
  30. 30. + •JSDom •Node-JQuery •Underscore •Bullets suckMonday, September 26, 2011 30
  31. 31. HOW?Monday, September 26, 2011 31
  32. 32. Monday, September 26, 2011 32
  33. 33. Context = function() { this.drawImage = function(image, x, y) { imageList.push({name: image, x: x, y: y}); }; this.fillRect = function(x, y, width, height) { this.filledRect = {x: x, y: y, width: width, height: height }; }; };Monday, September 26, 2011 33
  34. 34. context = new Context(); screen = new Eskimo.Screen(context);Monday, September 26, 2011 34
  35. 35. screen.render(); expect(context).toHaveScreenClearedTo("#aaaabb");Monday, September 26, 2011 35
  36. 36. Why? screen.put(image); screen.render();Monday, September 26, 2011 36
  37. 37. JSDom • Simulates the DOM • Doesn’t Support HTML5 • Bullets suckMonday, September 26, 2011 37
  38. 38. define("HTMLAudioElement", { tagName: AUDIO, attributes: [ src ]Monday, September 26, 2011 38
  39. 39. levelLoader.load("newLevel"); spiedJQuery.triggerEvent("canplaythrough"); jukebox = levelLoader.getJukebox(); var asset = jukebox.assets.get(soundOne).src; expect(asset).toEqual(sound.mp3);Monday, September 26, 2011 39
  40. 40. Simulators are hard!Monday, September 26, 2011 40
  41. 41. Game Logic Interaction DOMMonday, September 26, 2011 41
  42. 42. Spies spyOn(levels, "load"); TitleScreen.load(levels, screen); expect(levels.load) .toHaveBeenCalledWith(title, TitleScreen);Monday, September 26, 2011 42
  43. 43. Acceptance Player 1 Player 2 Winner Rock Paper Paper Paper Scissors Scissors Scissors Rock RockMonday, September 26, 2011 43
  44. 44. ArchitectureMonday, September 26, 2011 44
  45. 45. Monday, September 26, 2011 45
  46. 46. FeedTheQuinn.Assets = { title: { images: { background: { src: images/title_screen_background.jpg, location: { x: 0, y: 0 } },Monday, September 26, 2011 46
  47. 47. Respawn Dead AliveMonday, September 26, 2011 47
  48. 48. Monday, September 26, 2011 48
  49. 49. Monday, September 26, 2011 49
  50. 50. Monday, September 26, 2011 50
  51. 51. if (intersects(humanControlledBitmap.currentlyHeldKillableObject, otherGameObject.boundingBox) &&otherGameObject.isCapableOfEndingGame?) { gameObjectList.remove(otherGameObject);numericValueRepresentingAPositiveReinforcementOfPlayerBehavior+= 100241;}Monday, September 26, 2011 51
  52. 52. player.kill(zombie);Monday, September 26, 2011 52
  53. 53. player.decapitate(zombie);Monday, September 26, 2011 53
  54. 54. JavaScriptMonday, September 26, 2011 54
  55. 55. DesignMonday, September 26, 2011 55
  56. 56. Eskimo!Monday, September 26, 2011 56
  57. 57. ThanksMonday, September 26, 2011 57

×