Book Image

HTML5 Games Development by Example: Beginner's Guide

By : Makzan
Book Image

HTML5 Games Development by Example: Beginner's Guide

By: Makzan

Overview of this book

<p>HTML5 promises to be the hot new platform for online games. HTML5 games work on computers, smartphones, and tablets – including iPhones and iPads. Be one of the first developers to build HTML5 games today and be ready for tomorrow!</p> <p>The book will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.</p> <p>HTML5, CSS3 and related JavaScript API is the latest hot topic in Web. These standards bring us the new game market, HTML5 Games. With the new power from them, we can design games with HTML5 elements, CSS3 properties and JavaScript to play in browsers.</p> <p>The book divides into 9 chapters with each one focusing on one topic. We will create 6 games in the book and specifically learn how we draw game objects, animate them, adding audio, connecting players and building physics game with Box2D physics engine.</p>
Table of Contents (16 chapters)
HTML5 Games Development by Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Adding game logic to the matching game


Let's now imagine holding a real deck in our hand and setting up the matching game.

We first shuffle the cards in our hand and then we put each card on the table with the back facing up. For easier game play, we align the cards into a 4x3 array. Now the game is set up.

Now we are going to play the game. We pick up one card and flip it to make it face up. We pick another one and face it upwards. Afterwards, we have two possible actions. We take away those two cards if they are in the same pattern. Otherwise, we put it back facing down again, as if we have not touched them. The game continues until we pair all cards and take them all.

The code flow will be much more clear after we have the step-by-step scenario in our mind. Actually, the code in this example is exactly the same as the procedure we play with a real deck. We just need to replace the human language into the JavaScript code.