SCMC HTML5 Game Development

  • 807 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
807
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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