Your SlideShare is downloading. ×
0
HTML5       Game    Development                       #likeacraftsmanMonday, September 26, 2011               1
Monday, September 26, 2011   2
Monday, September 26, 2011   3
Monday, September 26, 2011   4
Monday, September 26, 2011   5
Monday, September 26, 2011   6
Monday, September 26, 2011   7
Monday, September 26, 2011   8
Monday, September 26, 2011   9
Monday, September 26, 2011   10
Monday, September 26, 2011   11
Monday, September 26, 2011   12
Monday, September 26, 2011   13
Nuts And BoltsMonday, September 26, 2011   14
CanvasMonday, September 26, 2011            15
Canvas   <canvas width="200" height="200">     This Browser doesnt support the canvas.   </canvas>Monday, September 26, 20...
Monday, September 26, 2011   17
context.save();                       context.setTransform(1,0,0,1,0,0);                       context.translate(400, 300)...
AudioMonday, September 26, 2011           19
Audio                             backgroundMusic.play();                             backgroundMusic.pause();Monday, Sept...
Monday, September 26, 2011   21
Monday, September 26, 2011   22
function gameLoop() {       update();       draw();       }         setInterval(function() { gameLoop(); }, this.getTickTi...
this.loop = function() {                while (scheduler.getTicks() > nextGameTick) {                  updaterList.update(...
TestsMonday, September 26, 2011           25
Monday, September 26, 2011   26
Monday, September 26, 2011   27
NO GUI!Monday, September 26, 2011             28
NO GUI!Monday, September 26, 2011             29
+    •JSDom    •Node-JQuery    •Underscore    •Bullets suckMonday, September 26, 2011       30
HOW?Monday, September 26, 2011          31
Monday, September 26, 2011   32
Context = function() {      this.drawImage = function(image, x, y) {        imageList.push({name: image, x: x, y: y});    ...
context = new Context();                      screen = new Eskimo.Screen(context);Monday, September 26, 2011              ...
screen.render();          expect(context).toHaveScreenClearedTo("#aaaabb");Monday, September 26, 2011                     ...
Why?                             screen.put(image);                             screen.render();Monday, September 26, 2011...
JSDom                   • Simulates the DOM                   • Doesn’t Support HTML5                   • Bullets suckMond...
define("HTMLAudioElement", {                              tagName: AUDIO,                              attributes: [       ...
levelLoader.load("newLevel");                    spiedJQuery.triggerEvent("canplaythrough");                    jukebox = ...
Simulators    are hard!Monday, September 26, 2011   40
Game Logic                             Interaction                                DOMMonday, September 26, 2011           ...
Spies               spyOn(levels, "load");               TitleScreen.load(levels, screen);               expect(levels.loa...
Acceptance                             Player 1 Player 2 Winner                              Rock      Paper   Paper      ...
ArchitectureMonday, September 26, 2011                  44
Monday, September 26, 2011   45
FeedTheQuinn.Assets = {              title: {                 images: {                    background: {                  ...
Respawn                             Dead                                      AliveMonday, September 26, 2011             ...
Monday, September 26, 2011   48
Monday, September 26, 2011   49
Monday, September 26, 2011   50
if (intersects(humanControlledBitmap.currentlyHeldKillableObject,            otherGameObject.boundingBox) &&otherGameObjec...
player.kill(zombie);Monday, September 26, 2011                          52
player.decapitate(zombie);Monday, September 26, 2011                            53
JavaScriptMonday, September 26, 2011                54
DesignMonday, September 26, 2011            55
Eskimo!Monday, September 26, 2011             56
ThanksMonday, September 26, 2011            57
Upcoming SlideShare
Loading in...5
×

SCMC HTML5 Game Development

849

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
849
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×