Discovering new features in HTML5 Offline applications

Transcription

1 1 Introducing HTML5 Games Discovering new features in HTML5 Offline applications

2 Discovering new features in CSS3 CSS3 animation

3 The benefit of creating HTML5 games Breaking the boundary of usual browser games

4 What others are playing with HTML5 Coca-Cola's Ahh campaign

5 Asteroid-styled bookmarklet

6 X-Type

7 Cursors.io

8 What we are going to create in this book

9 2 Getting Started with DOM-based Game Development Preparing the HTML documents for a DOM-based game

10 Downloading the image assets Setting up the Ping Pong game elements

11 Understanding the behavior of absolute position Getting mouse input Checking the console window

12 Beginning collision detection

13

14 3 Building a Card Matching Game in CSS3 Moving game objects with CSS3 transition Creating a card-flipping effect

15 Introducing CSS' perspective property

16 Introducing backface-visibility Creating a card-matching memory game Downloading the sprites sheet of playing cards

17 Setting up the game environment

18 Using CSS sprite with a background position

19

20 Adding game logic to the matching game

21 Embedding web fonts into our game

22

23 4 Building the Untangle Game with Canvas and the Drawing API

24 Drawing a circle in the Canvas Closing a path

25 Wrapping the circle drawing in a function

26 Drawing lines in the Canvas Using mouse events to interact with objects drawn in the Canvas

27 Detecting mouse events in circles in the Canvas Detecting line intersection in Canvas Determining whether two line segments intersect

28

29 5 Building a Canvas Game's Masterclass

30 Making the Untangle puzzle game

31 Using embedded web font inside the Canvas

32 Drawing images in the Canvas

33 Decorating the Canvas-based game Animating a sprite sheet in Canvas

34

35

36

37 Creating a multi-layer Canvas game

38

39 6 Adding Sound Effects to Your Games

40 Adding a sound effect to the Play button

41 Defining an audio element Building a mini piano musical game

42 Creating scenes in games

43 Creating a slide-in effect in CSS3

44 Visualizing the music playback

45

46 Getting the elapsed time of the game

47 Moving the music dots

48 Creating a keyboard-driven mini piano musical game Hitting the three music lines by key down

49 Adding additional features to the mini piano game Recording music notes as level data

50 7 Saving the Game's progress

51 Storing data using HTML5 local storage Creating a game over dialog Saving scores in the browser

52 Saving objects in the local storage

53 Loading a stored object from a JSON string

54 Inspecting the local storage in a console window

55 Notifying players when they break a new record with a nice ribbon effect Saving the entire game progress

56 Resuming the game progress Caching the game for offline access

57 8 Building a Multiplayer Draw-and-Guess Game with WebSockets

58 Installing a WebSocket's server Creating a client that connects to a WebSocket server and getting the total connections count Sending a message to all connected browsers

59 Building a chatting application with WebSockets Sending a message to the server

60 Sending every received message on the server side to create a chat room Comparing WebSockets with polling approaches

61

62 Making a shared drawing whiteboard with Canvas and WebSockets Building a local drawing sketchpad Sending the drawing to all the connected browsers

63 Building a multiplayer draw-and-guess game

64 9 Building a Physics Car Game with Box2D and Canvas

65 Installing the Box2D JavaScript library

66 Drawing the physics world in the canvas Creating a dynamic box in the physics world

67 Advancing the world time Adding wheels to the game

68 Creating a physical car Using a revolute joint to create an anchor point between two bodies

69 Adding force to the car with a keyboard input Adding ramps to our game environment

70 Checking collisions in the Box2D world

71 Adding a level support to our car game Replacing the Box2D outline drawing with graphics

72 Adding a final touch to make the game fun to play

73

74 Presenting the remaining fuel in a CSS3 progress bar

75 Adding touch support for tablets

76 Building an HTML5 game into a Mac OS X app 10 Deploying HTML5 Games

77

78

79

80

81

82

83

84

85 Building with PhoneGap build