What are HTML5 Games?
Intro to HTML5, Step 1 of 3
Read this tutorial series on Brinkbit's blog!
Are you looking for a way to quickly make great web, desktop, and mobile games?Maybe you've never written a line of code before. Maybe you've used a platform like Adobe Flash before, and you're looking for a fast, mobile-friendly replacement.
Either way, HTML5 games are for you.
Which begs the question...
What's HTML5?
The term "HTML5" is actually a shorthand for three related languages.: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). Together, these languages make up most of the modern Internet.
Most websites incorporate all three: HTML for structure, CSS for style, and JavaScript for functionality.
To better understand this relationship, let's turn to my good friend, the HTMLeton.
The Web Standard Family
Hypertext Markup Language (HTML) provides the structure of a web page--the HTMLeton's skeleton. In general web development, HTML lays out elements like headers, content areas, links, and buttons on a website. Different HTML files typically serve as the site's different pages.
Cascading Style Sheets (CSS) control the style, or appearance, of elements on a webpage. In our metaphor, CSS is the HTMLeton's fabulous cape. She doesn't need it to stand up, but it helps her look awesome.
CSS is used to control style features like fonts, colors, and animations. It can change the layout of page elements created in HTML, or hide those elements completely. The "cascading" in "Cascading Style Sheets" refers to a very specific way CSS handles conflicting rules. Generally, rules farther down the document will replace rules earlier in the document. So if you write two rules like this...
...the color for your paragraph text (p) will be blue, using the last rule in the CSS document.
JavaScript (JS) is a code language that makes things happen. Whenever you're manipulating data or taking an action, you're usually interacting with a website's JavaScript.
Since video games are all about interaction, this means an HTML5 game uses JavaScript more than HMTL.
All three of these languages together are referred to informally as HTML5, or more properly as web standards.
Why 5?
Web standards weren't always a great way to make video games, but the great thing about these languages is that they're always being improved. HTML5, the fifth version of the HTML standard, added several vital features that have made quality games possible.
When we start adding graphics to games, we'll be using an element called anHTML canvas, which creates a space where graphics can be added and manipulated using JavaScript. The canvas is just one of the new features in HTML5 that weren't in HTML4, and it's essential for making games with complex graphics and animation.
Recently, most browsers have added support for WebGL, which allows your device (whether it's a computer, console, smartphone, or tablet) to utilize its graphics card for rendering objects in the canvas. With proper implementation, WebGL lets youanimate thousands of objects onscreen at once without slowdown.
At Brinkbit, we believe HMTL5 is quickly becoming the best way to make video games. Now, we're going to show you how.