Book Image

Learn HTML5 by Creating Fun Games

By : Rodrigo Silveira
Book Image

Learn HTML5 by Creating Fun Games

By: Rodrigo Silveira

Overview of this book

HTML is fast, secure, responsive, interactive, and stunningly beautiful. It lets you target the largest number of devices and browsers with the least amount of effort. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be."Learn HTML5 by Creating Fun Games" takes you through the journey of learning HTML5 right from setting up the environment to creating fully-functional games. It will help you explore the basics while you work through the whole book with the completion of each game."Learn HTML5 by Creating Fun Games" takes a very friendly approach to teaching fun, silly games for the purpose of giving you a thorough grounding in HTML5. The book has only as much theory as it has to, often in tip boxes, with most of the information explaining how to create HTML5 canvas games. You will be assisted with lots of simple steps with screenshots building towards silly but addictive games.The book introduces you to HTML5 by helping you understand the setup and the underlying environment. As you start building your first game that is a typography game, you understand the significance of elements used in game development such as input types, web forms, and so on.We will see how to write a modern browser-compatible code while creating a basic Jelly Wobbling Game. Each game introduces you to an advanced topic such as vector graphics, native audio manipulation, and dragging-and-dropping. In the later section of the book, you will see yourself developing the famous snake game using requestAnimationFrame along with the canvas API, and enhancing it further with web messaging, web storage, and local storage. The last game of this book, a 2D Space shooter game, will then help you understand mobile design considerations.
Table of Contents (14 chapters)

Learning HTML5 through game development

In this book we will learn all about HTML5. We'll learn what each feature is meant to do and how you can use them. More than that, however, we want to make this teaching process fun, simple, and memorable. Thus, our approach might be somewhat different than most other books.

If you pay close attention to the way most teachers and authors teach new concepts, you will notice the following pattern: first the topic is explained, then, in an attempt to solidify the student's understanding of the material just covered, an example is given in order to show how the subject may be applied. The problem is that often this example is neither useful nor usable. For example, in computer programming books, you will see a common theme describing animals, food, or other abstract concepts that do not lend themselves well in real-world application. Thus, the student may become frustrated by the lack of real-world applications.

The key to effective learning, then, is a good example or use cases where the student may apply the newly acquired information. This way, when the student finds himself or herself in a real-world situation when their new skill could indeed be applied, they may readily recognize the opportunity and use the knowledge just gained. Furthermore, if the learning process is too abstract and theoretical, the student tends to get distracted or even bored. If the teaching process is involving and fun, on the other hand, the student is more likely to remember the concepts, but better yet, he or she is more likely to understand what is being taught.

Our approach in this book will be slightly different than what you might be accustomed to, in that we will focus most of our efforts not in listing as much theoretical information as we can about HTML5 and all that it involves, but rather in illustrating each topic through a fun game.

Why teach HTML5 through game development, you ask? There are many reasons for this. For starters, games are fun. Game development, although some of your friends might disagree, is also fun and very rewarding. Also, it just so happens that most of the features of HTML5 lend themselves so well to game development, that teaching HTML5 and not making the application for games is also rude. Finally, games are so fun, that learning a new programming technology through game development will provide the learner with both a very exciting set of examples to show each concept in action, and also a powerful physical product as the outcome of the learning process.

Our goal in this book is not, however, to teach you how to develop video games. What we're setting out to do is to teach you HTML5 first and foremost. If you already know game development, and have some experience in this arena, you will not only learn the latest and greatest features of HTML5, but also learn how they can be applied directly to designing and programming video games. If you're not a very experienced game developer, or haven't done any game development at all as a matter of fact, do not fear! You will still learn some techniques of game development, since we'll walk you through the concepts involved, but keep in mind that the focus of the book is HTML5.

The games we will be writing in the book will be fun, complete, and easy to extend. We will be building each game in layers, so that adding more capabilities or refactoring parts of it will be simple enough. At the end of each chapter you will have your own HTML5 game, which because of the Open Web, you will be able to share with all your friends with access to the Internet, as well as with hundreds of millions of people world wide.

Finally, since HTML is nothing more than text markup, and JavaScript is a dynamic, interpreted language, we will not be needing expensive or complex tools in order to develop our games. If you have a text editor program in your computer, and a modern web browser such as Google Chrome, Mozilla Firefox, Opera, Safari, or the latest Internet Explorer, then you are good to go. You will also need one type or another of a web server, which we'll go into more details about in the next chapter.

Thanks to the nature of the Open Web and HTML5, it doesn't matter one bit what kind of computer system you have. Whatever HTML5 code you write on your particular system will run just the same on somebody else's different computer. Best yet, there will be no installations required, which further lowers any barriers that could keep your games from being enjoyed by hundreds of millions of people world wide.