Meyer The Essential Guide to HTML5

Using Games to learn HTML5 and JavaScript
1. ed
ISBN: 978-1-4302-3384-8
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 376 Seiten

HTML5 opens up a plethora of new avenues for application and game development on the web. Games can now be created and interacted with directly within HTML, with no need for users to download extra plugins, or for developers to learn new languages. Important new features such as the Canvas tag enable drawing directly onto the web page. The Audio tag allows sounds to be triggered and played from within your HTML code, the WebSockets API facilitates real-time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user's computer for retrieval next time they play. All of these features and many more are covered within .

The book begins at an introductory level, teaching the essentials of HTML5 and JavaScript through game development. Each chapter features a familiar game type as its core example, such as hangman, rock-paper-scissors, or dice games, and uses these simple constructs to builda solid skillset of the key HTML5 concepts and features. By working through these hands on examples, you will gain a deep, practical knowledge of HTML5 that will enable you to build your own, more advanced games and applications.

• Concepts are introduced and motivated with easy-to-grasp, appealing examples
• Code is explained in detail after general explanations
• Reader is guided into how to make the examples 'their own'

Autoren/Hrsg.

Meyer, Jeanine

Inhaltsverzeichnis

1;Title Page;1
2;Copyright Page;2
3;Contents at a Glance;4
4;Table of Contents;5
5;About the Author;10
6;About the Technical Reviewer;11
7;Acknowledgments;12
8;Introduction;13
8.1;Who is this book for?;13
8.2;How is this book structured?;13
8.3;Conventions used in this book;14
8.4;Layout conventions;14
9;Chapter 1: The Basics;15
9.1;Introduction;15
9.2;Critical requirements;17
9.3;HTML5, CSS, and JavaScript features;18
9.3.1;Basic HTML structure and tags;18
9.3.1.1;Using cascading style sheets;22
9.3.2;JavaScript programming;24
9.4;Building the application and making it your own;25
9.5;Testing and uploading the application;33
9.6;Summary;33
10;Chapter 2: Dice Game;34
10.1;Introduction;34
10.2;Critical requirements;37
10.3;HTML5, CSS, and JavaScript features;37
10.3.1;Pseudo-random processing and mathematical expressions;37
10.3.2;Variables and assignment statements;38
10.3.3;Programmer-defined functions;39
10.3.4;Conditional statements: if and switch;40
10.3.5;Drawing on the canvas;42
10.3.5.1;Displaying text output using a form;51
10.4;Building the application and making it your own;51
10.4.1;Throwing a single die;53
10.4.2;Throwing two dice;60
10.4.3;The complete game of craps;68
10.4.3.1;Making the application your own;76
10.5;Testing and uploading the application;78
10.6;Summary;78
11;Chapter 3: Bouncing Ball;80
11.1;Introduction;80
11.2;Critical requirements;83
11.3;HTML5, CSS, JavaScript features;83
11.3.1;Drawing a ball, image, and gradient;83
11.3.1.1;Setting up a timing event;89
11.3.1.2;Calculating a new position and collision detection;91
11.3.1.3;Validation;92
11.3.1.4;HTML page reload;93
11.4;Building the application and making it your own;93
11.5;Testing and uploading the application;109
11.6;Summary;109
12;Chapter 4: Cannonball and Slingshot;110
12.1;Introduction;110
12.2;Critical requirements;113
12.3;HTML5, CSS, and JavaScript features;114
12.3.1;Arrays and programmer-defined objects;114
12.3.2;Rotations and translations for drawing;116
12.3.3;Drawing line segments;120
12.3.4;Mouse events for pulling on the slingshot;121
12.3.5;Changing the list of items displayed using array splice;123
12.3.6;Distance between points;123
12.4;Building the application and making it your own;124
12.4.1;Cannonball: with cannon, angle, and speed;131
12.4.2;Slingshot: using a mouse to set parameters of flight;141
12.5;Testing and uploading the application;153
12.6;Summary;153
13;Chapter 5: The Memory (aka Concentration) Game;154
13.1;Introduction;154
13.2;Critical requirements;159
13.3;HTML5, CSS, JavaScript features;159
13.3.1;Representing cards;159
13.3.2;Using Date for timing;160
13.3.3;Providing a pause;161
13.3.4;Drawing text;162
13.3.5;Drawing polygons;164
13.3.6;Shuffling cards;165
13.3.7;Implementing clicking on a card;165
13.3.8;Preventing certain types of cheating;166
13.4;Building the application and making it your own;167
13.5;Testing and uploading the application;189
13.6;Summary;190
14;Chapter 6: Quiz;191
14.1;Introduction;191
14.2;Critical requirements;195
14.3;HTML5, CSS, and JavaScript features;196
14.3.1;Storing and retrieving information in arrays;196
14.3.2;Creating HTML during program execution;198
14.3.3;Changing elements by modifying CSS using JavaScript code;201
14.3.4;Text feedback using form and input elements;202
14.3.5;Presenting video;203
14.4;Building the application and making it your own;205
14.5;Testing and uploading the application;222
14.6;Summary;222
15;Chapter 7: Mazes;224
15.1;Introduction;224
15.2;Critical requirements;229
15.3;HTML5, CSS, and JavaScript features;230
15.3.1;Representation of walls and the token;230
15.3.2;Mouse events to build and position a wall;230
15.3.3;Detecting the arrow keys;231
15.3.4;Collision detection: token and any wall;233
15.3.5;Using local storage;235
15.3.6;Encoding data for local storage;241
15.3.7;Radio buttons;242
15.4;Building the application and making it your own;243
15.4.1;Creating the second maze application;257
15.5;Testing and uploading application;268
15.6;Summary;268
16;Chapter 8: Rock, Paper, Scissors;270
16.1;Introduction;270
16.2;Critical requirements;273
16.3;HTML5, CSS, and JavaScript features;274
16.3.1;Providing graphical buttons for the player;274
16.3.2;Generating the computer move;278
16.3.2.1;Displaying results using animation;281
16.3.2.2;Audio and DOM processing;283
16.3.3;Starting off;285
16.4;Building the application and making it your own;286
16.5;Testing and uploading the application;295
16.6;Summary;296
17;Chapter 9: Hangman;297
17.1;Introduction;297
17.2;Critical requirements;305
17.3;HTML5, CSS, JavaScript features;305
17.3.1;Storing a word list as an array defined in an external script file;305
17.3.2;Generating and positioning HTML markup, then making the markup be buttons, and then disabling the buttons;306
17.3.3;Creating progressive drawings on a canvas;308
17.3.4;Maintaining the game state and determining a win or loss;310
17.3.5;Checking a guess and revealing letters in the secret word by setting textContent;311
17.4;Building the application and making it your own;312
17.5;Testing and uploading the application;325
17.6;Summary;325
18;Chapter 10: Blackjack;327
18.1;Introduction;327
18.2;Critical requirements;332
18.3;HTML5, CSS, and JavaScript features;333
18.3.1;Source for images for card faces and setting up the Image objects;333
18.3.2;Creating the programmer-defined object for the cards;334
18.3.3;Dealing the cards;334
18.3.4;Shuffling the deck;337
18.3.5;Capturing key presses;338
18.3.6;Using header and footer element types;340
18.4;Building the application and making it your own;340
18.5;Testing and uploading the application;356
18.6;Summary;356
19;Index;357