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)

What is HTML?

The first term we need to be clear about before we start talking about the Open Web, and how HTML5 plays a central role in its success, is HTML. Simply put, HTML is a very basic markup language used to describe text files to the programs that read them. While that is possibly the most generalized definition of what it is, it is interesting how such a fundamental technology has played such a crucial part in the development of our entire society. From humble beginnings, and serving a very specific purpose at first, HTML has become the primary markup language of the Web, which in turn has found its way into almost every household throughout the world, as well as most briefcases, pockets, and other electronic devices.

Given this dramatic, widespread reach of HTML, it quickly became clear that the technology needed to do more than simply declaring the color of some block of text, or the width and height of a photograph stored in some research paper. Because of the many different ways in which the Web has been used over the years, HTML has grown and evolved, going from a simple markup language, to becoming the foundation for the development of powerful, highly complex online applications and services.

A brief history of HTML

Hyper Text Markup Language, or HTML for short, as we know it today was first conceived in the mind of Tim Berners-Lee in 1989. At the time, while working at the European Laboratory for Particle Physics in Geneva, Switzerland, Tim Berners-Lee thought it would be beneficial to link the various research documents written and used by scientists. That way, instead of having a large collection of individual and independent documents that one could read, each document that referenced another research paper could have a hyper link to the other document, so that the reader could navigate from one document to the next with ease, and in a timely manner.

In order to implement his idea of hyperlinking documents together, Tim Berners-Lee looked to an existing markup language as the basis for his own markup language—Standard Generalized Markup Language or SGML for short—as a starting point. SGML was a simple language designed to structure text by using a tag vocabulary. For example, in order to specify that a block of text was to be interpreted as a paragraph, one would surround such text with a pair of "paragraph tags", which looked the same as today's paragraph tags in HTML. While the basic vocabulary in Tim's version of the language remained the same, one key tag was added—the hyperlink tag. Thus, HTML was born.

Keep in mind that Tim's vision for the language was very specific. Through HTML's ability to cross-reference documents together, published scientific research papers could be much more efficiently studied. It was not until many years later that HTML started being used for other purposes beyond sharing of interlinked text.

The evolution of the World Wide Web

As the computer became more common place and more people started to own their own machine, and as the Internet became more widely used, people started finding new ways to use the new technology. Instead of using the Web simply to read what others had written, people began to use it to talk to people by writing and publishing documents. It wasn't long after that until the Internet became a giant virtual society.

The Internet continued to grow in popularity through the 1990s, and different uses for it continue to emerge. With each new idea of how that amazing infrastructure could be used, new ways had to be thought of in order to bring those ideas into reality, since the technology that supported the Internet was still the same. At its core, a web application was still nothing more than a text-based document, formatted using HTML. In order to add some logic to this otherwise static data, programmers used programs stored in the web server to manipulate input from the user, and create HTML documents dynamically. Again, the actual documents that users interacted with as they navigated the Internet, were nothing more than pure HTML.

In order for the Internet to continue to grow and adapt to the way and purposes for which it was being used, changes were needed. Instead of only sending plain text data to HTML readers (web browsers), it would be more efficient if there was a way to add some sort of code to the web pages, so that it could process information while on the browser. Thus, JavaScript was born.

Today the Web continues to grow both in terms of the amount of people using it, and in the ways and purposes in which it is used. The good news is that the technologies that support and run the Web are also growing and evolving, so that new use cases can be accommodated.