This document discusses HTML5 game development and some of the core concepts involved, including using the canvas element to draw graphics, playing audio, implementing game loops, and testing code without a graphical user interface. It also touches on using tools like JSDom to simulate the DOM for testing and implementing game architecture, assets, object interactions, and behaviors like respawning characters. The document emphasizes testing code, breaking programs into logical components, and designing games at a high level before implementation.

1. HTML5
Game
Development
#likeacraftsman
Monday, 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 Bolts
Monday, September 26, 2011 14

15. Canvas
Monday, September 26, 2011 15

16. Canvas
<canvas width="200" height="200">
This Browser doesn't 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. Audio
Monday, 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. Tests
Monday, 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 suck
Monday, 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 suck
Monday, 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
DOM
Monday, 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 Rock
Monday, September 26, 2011 43

44. Architecture
Monday, 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
Alive
Monday, 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. JavaScript
Monday, September 26, 2011 54

55. Design
Monday, September 26, 2011 55

56. Eskimo!
Monday, September 26, 2011 56

57. Thanks
Monday, September 26, 2011 57