HTML5       Game    Development                               #part2Thursday, September 29, 2011
Homework                    • Colin                    • Eric Meyer                    • Joe                    • Craig   ...
TestsThursday, September 29, 2011
Thursday, September 29, 2011
Thursday, September 29, 2011
NO GUI!Thursday, September 29, 2011
NO GUI!Thursday, September 29, 2011
+    •JSDom    •Node-JQuery    •Underscore    •Bullets suckThursday, September 29, 2011
HOW?Thursday, September 29, 2011
Thursday, September 29, 2011
Context = function() {      this.drawImage = function(image, x, y) {        imageList.push({name: image, x: x, y: y});    ...
context = new Context();                       screen = new Eskimo.Screen(context);Thursday, September 29, 2011
screen.render();          expect(context).toHaveScreenClearedTo("#aaaabb");Thursday, September 29, 2011
Why?                               screen.put(image);                               screen.render();Thursday, September 29...
JSDom                    • Simulates the DOM                    • Doesn’t Support HTML5                    • Bullets suckT...
define("HTMLAudioElement", {                                tagName: AUDIO,                                attributes: [   ...
levelLoader.load("newLevel");                     spiedJQuery.triggerEvent("canplaythrough");                     jukebox ...
Simulators    are hard!Thursday, September 29, 2011
Game Logic                               Interaction                                  DOMThursday, September 29, 2011
Spies                spyOn(levels, "load");                TitleScreen.load(levels, screen);                expect(levels....
Acceptance                               Player 1 Player 2 Winner                                Rock      Paper   Paper  ...
ArchitectureThursday, September 29, 2011
Thursday, September 29, 2011
FeedTheQuinn.Assets = {              title: {                  images: {                     background: {                ...
Respawn                               Dead                                        AliveThursday, September 29, 2011
Thursday, September 29, 2011
Thursday, September 29, 2011
Thursday, September 29, 2011
if (intersects(humanControlledBitmap.currentlyHeldKillableObject,            otherGameObject.boundingBox) &&otherGameObjec...
player.kill(zombie);Thursday, September 29, 2011
player.decapitate(zombie);Thursday, September 29, 2011
JavaScriptThursday, September 29, 2011
Upcoming SlideShare
Loading in...5
×

Html5 episode 2

376

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
376
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 episode 2

  1. 1. HTML5 Game Development #part2Thursday, September 29, 2011
  2. 2. Homework • Colin • Eric Meyer • Joe • Craig • Dough • Steven DegutisThursday, September 29, 2011
  3. 3. TestsThursday, September 29, 2011
  4. 4. Thursday, September 29, 2011
  5. 5. Thursday, September 29, 2011
  6. 6. NO GUI!Thursday, September 29, 2011
  7. 7. NO GUI!Thursday, September 29, 2011
  8. 8. + •JSDom •Node-JQuery •Underscore •Bullets suckThursday, September 29, 2011
  9. 9. HOW?Thursday, September 29, 2011
  10. 10. Thursday, September 29, 2011
  11. 11. 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 }; }; };Thursday, September 29, 2011
  12. 12. context = new Context(); screen = new Eskimo.Screen(context);Thursday, September 29, 2011
  13. 13. screen.render(); expect(context).toHaveScreenClearedTo("#aaaabb");Thursday, September 29, 2011
  14. 14. Why? screen.put(image); screen.render();Thursday, September 29, 2011
  15. 15. JSDom • Simulates the DOM • Doesn’t Support HTML5 • Bullets suckThursday, September 29, 2011
  16. 16. define("HTMLAudioElement", { tagName: AUDIO, attributes: [ src ]Thursday, September 29, 2011
  17. 17. levelLoader.load("newLevel"); spiedJQuery.triggerEvent("canplaythrough"); jukebox = levelLoader.getJukebox(); var asset = jukebox.assets.get(soundOne).src; expect(asset).toEqual(sound.mp3);Thursday, September 29, 2011
  18. 18. Simulators are hard!Thursday, September 29, 2011
  19. 19. Game Logic Interaction DOMThursday, September 29, 2011
  20. 20. Spies spyOn(levels, "load"); TitleScreen.load(levels, screen); expect(levels.load) .toHaveBeenCalledWith(title, TitleScreen);Thursday, September 29, 2011
  21. 21. Acceptance Player 1 Player 2 Winner Rock Paper Paper Paper Scissors Scissors Scissors Rock RockThursday, September 29, 2011
  22. 22. ArchitectureThursday, September 29, 2011
  23. 23. Thursday, September 29, 2011
  24. 24. FeedTheQuinn.Assets = { title: { images: { background: { src: images/title_screen_background.jpg, location: { x: 0, y: 0 } },Thursday, September 29, 2011
  25. 25. Respawn Dead AliveThursday, September 29, 2011
  26. 26. Thursday, September 29, 2011
  27. 27. Thursday, September 29, 2011
  28. 28. Thursday, September 29, 2011
  29. 29. if (intersects(humanControlledBitmap.currentlyHeldKillableObject, otherGameObject.boundingBox) &&otherGameObject.isCapableOfEndingGame?) { gameObjectList.remove(otherGameObject);numericValueRepresentingAPositiveReinforcementOfPlayerBehavior+= 100241;}Thursday, September 29, 2011
  30. 30. player.kill(zombie);Thursday, September 29, 2011
  31. 31. player.decapitate(zombie);Thursday, September 29, 2011
  32. 32. JavaScriptThursday, September 29, 2011
  1. A particular slide catching your eye?

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

×