1. Coding Your First
HTML5 Game
Randy Hoyt
@randyhoyt

2. randyhoyt.com/launchgame
@randyhoyt

3. Overview
• Code
• HTML5
• Games
@randyhoyt

4. Overview
• Games
• HTML5
• Code
@randyhoyt

5. Games

6. Games
• Games are fun
I love games!
@randyhoyt

7. A Theory of Fun (2004), by Ralph Koster

8. Games
• Games are fun
• Games are everywhere
I love games!
@randyhoyt

9. Homo Ludens (1938), by Johan Huizinga

10. Games
• Games are fun
• Games are everywhere
• Games exercise the brain
I love games!
@randyhoyt

11. Play engages the prefrontal cortex,
responsible for your highest-level
cognitive functions – including self-
knowledge, memory, mental imagery,
and incentive and reward processing.
Brain Workout, Life Optimizer, http://trhou.se/WHkaR7

12. Brain Workout, Life Optimizer, http://trhou.se/WHkaR7

14. Games
• Games are fun
• Games are everywhere
• Games exercise the brain
• Games are practice for
the real world games!
I love
@randyhoyt

15. 7 TED Talks on Gaming, http://trhou.se/gamesTED

16. Games And Me
@randyhoyt

17. HTML5

18. !
rd Alert
Buzzwo

19. HTML5 and Related Technologies
• Canvas
@randyhoyt

20. HTML5 and Related Technologies
• Canvas
• WebGL
http://trhou.se/whyWebGL
@randyhoyt

21. HTML5 and Related Technologies
• Canvas
• WebGL
http://trhou.se/whyWebGL
• WebSocket
http://trhou.se/introwebsockets
@randyhoyt

22. HTML5 and Related Technologies
• Canvas
• WebGL
http://trhou.se/whyWebGL
• WebSocket
http://trhou.se/introwebsockets
• SVG
@randyhoyt

23. HTML5 Games

24. It’s official: with HTML5 today the
browser has become a full-
fledged gaming platform.
HTML5 Gaming, http://html5rocks.com/gaming

26. Behind the Scenes, http://www.cuttherope.ie/dev/

27. HTML5 Games
• Top 10 HTML5 games of 2012
http://trhou.se/gamesin2012
• Goko
• Game Closure Devkit
• Famo.us - http://tcrn.ch/ZfCuNh
@randyhoyt

28. Code

29. Project Structure
HTML CSS JavaScript
@randyhoyt

30. Project Structure
HTML CSS JavaScript
@randyhoyt

31. Project Structure
HTML CSS JavaScript
@randyhoyt

32. Project Structure
HTML CSS JavaScript
@randyhoyt

33. HTML

34. CSS

35. Canvas Preview

36. Canvas and Context

37. Image in JavaScript

38. requestAnimationFrame

39. update function

40. update function

41. Game Logic: Init (Once), Update (Loop)
init update

42. fillRect

43. One wall in the browser

44. fillRect

45. Five walls in the browser

46. drawImage

47. Frog variables

48. Frog in the browser

49. Five walls in the browser

51. clearRect

52. clearRect

54. Game Logic: Init (Once), Update (Loop)
init update

55. Game Logic: Move
update
init

56. Game Logic: Update, Render, Loop
update
init
render

57. Game Logic
• Init
- Place Frog
- Place Obstacles
• Update
- Move
• Render
@randyhoyt

58. Game Logic: Bind Events
• Init
- Bind Events
- Place Frog
- Place Obstacles
• Update
- Move
• Render
@randyhoyt

59. Game Logic: Place Badges
• Init
- Bind Events
- Place Frog
- Place Obstacles
- Place Badges
• Update
...
@randyhoyt

60. Game Logic: Update
...
• Update
- Check for Movement
- Check for Obstacles
- Move
- Check for Badges
• Render
@randyhoyt

61. Game Logic: Check for Victory
...
• Update
...
...
• Render
• Check for Victory
@randyhoyt

62. Game Preview

63. HTML5 Game Frameworks
• Impact
• LimeJS
• Crafty
• GameClosure
!
• CocoonJS nd ma ny more
... a
@randyhoyt

64. HTML5 Game Frameworks
• Impact
• LimeJS
• Crafty
• GameClosure
• CocoonJS
Game Engine Comparison, http://trhou.se/gamecompare
@randyhoyt

65. LimeJS
• Free and Open Source
• Uses DOM or Canvas
• Built on Google Closure
• Requires Python
• Incompatible with CocoonJS
@randyhoyt

66. > bin/lime.py create treehouse

67. HTML

68. Starting JavaScript File

69. Create Director

70. Director Settings

71. Scene

72. Blank Canvas

73. Comments

74. Game Background Sprite

75. appendChild

76. Create Analog Stick Sprite

77. Preview Game

78. Preview Game With Inspector

79. Preview Game With Console

80. Add Four Button Sprites

81. Frog Constructor

82. Frog Properties

83. Require Frog

84. > bin/lime.py update

85. Constants

86. appendChild Frog

87. Game Logic: Init, Render
init
render

88. Create Walls and Badges

89. appendChild: Walls and Badges

90. Game Preview

91. Add Event for UP Button

92. Frog: startMovement

93. Game Logic: Schedule Manager
init update
render

94. Schedule Manager

95. Game Logic: Check Movement
update
init ?
render

96. Add Events to All Buttons

97. checkMovement

98. Game Logic: Check Movement
update
init ?
render

100. Game Logic: Check Movement
update
init ?
render

101. Game Logic: Check for Obstacle
update
?
init ?
render

102. Determine all four corners

103. Loop through all the walls

104. Determine the wall’s corners

105. If the frog’s right would be right of the wall’s left ...

106. ... and if the frog’s left would be left of the wall’s right ...

107. ... and if the frog’s top would be above the wall’s bottom ...

108. ... and if the frog’s bottom would be below the wall’s top ...

109. ... then the frog and the wall would overlap.

110. Checking for a collision

111. Early return on collision

112. Game Logic: Check for Obstacle
update
?
init ?
render

113. Game Logic: Check for Obstacle
update
?
init ?
render

115. Game Logic: Check for Obstacle
update
?
init ?
render

116. Game Logic: Check for Badge
update
? ?
init ?
render

117. Keep track of badges earned

118. Check for collision with badge

119. Increment badges earned

121. Game Logic: Check for Badge
update
? ?
init ?
render

122. Game Logic: Check for Badge
update
? ?
+
init ?
render

123. Game Logic: Check for Victory
update
? ?
+
init ? ?
`
render

124. Check for a victory

125. Check for a victory

126. Game Logic: Check for Victory
update
? ?
+
init ? ?
`
render

127. Game Logic: Reset on Victory
update
? ?
+
init ? ?
`
render

128. > bin/lime.py build treehouse -o
treehouse/treehouse-min.js

129. randyhoyt.com/launchgame
@randyhoyt