11 HTML5 Game Development Tutorials

Gone are the days where games were only possible with plugin technologies such as Flash. The newest iteration of HTML, HTML5 can be used with JavaScript, CSS3, and WebGL to create beautiful, unique, engaging games that can be played on the web or mobile devices like the iPad or Android phones. In this article you have a collection of 11 HTML5 Game Development Tutorials that you can find online. These tutorials will help you either learn HTML5 or to enhance your skills.

Build your First Game with HTML5

HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed…even in the gaming world! Today, you’ll make your first game using Box2D and HTML5′s canvas tag.

gme-1

HTML5 Games 101

In this tutorial, You ll learn how to use the basic features of HTML5 and get the simple game of Snake up and ready within a couple of hours, even if you are a beginner. All you require is some basic logic and any experience with programming is a huge plus.

gme-9

HTML5 Gaming: animating sprites in Canvas with EaselJS

When you want to write casual games using the HTML5 Canvas element, you’ll need to find a way to handle your sprites. There are several libraries available to help you writing games such as ImpactJS, CraftyJS and so on.

gme-2

Build a cross-platform HTML5 game

HTML5 game development isn’t a straight science. Having your games running on different platforms requires a bit of black magic. Different types of games require different sets of techniques. In terms of development, a tile-based game is completely different to a pinch-and-zoom one, for example. However, in this tutorial, we’re going to focus on the basic elements to develop any kind of 2D JavaScript based game.

gme-3

How To Design A Mobile Game With HTML5

Care to make a cross-platform mobile game with HTML5? No need to dabble in Java or Objective-C? Bypass the app stores? Sounds like an instant win!

gme-4

Simple game with HTML5 Canvas

The goal is to control little angel & jump on the two kinds of platforms – orange (regular ones) and green (super high jump springboards). The game ends when the angel falls down to the bottom of the screen.

gme-5

Learn CreateJS by Building an HTML5 Pong Game

In this tutorial, you’ll learn how to use the newest CreateJS suite by creating a simple Pong clone.

gme-6

How to Build Asteroids with the Impact HTML5 Game Engine

Impact is a commercial engine, so you’ll need to purchase a license before you can use it, but that doesn’t stop you from at least following along with the tutorial to get a feel for how it works.

gme-7

Create a Game Character with HTML5 and JavaScript

In Part 1 of this series we will design a game character from scratch. We will start with a drawing on paper and with the help of JavaScript we will create a breathing, blinking character on HTML5 canvas. Hopefully by the end of Part 1 you will have the tools and inspiration to create a character of your own.

gme-8

How to build a racing game

The performance of this game is very machine/browser dependent. It works quite well in modern browsers, especially those with GPU canvas acceleration, but a bad graphics driver can kill it stone dead. So your mileage may vary. There are controls provided to change the rendering resolution and the draw distance to scale to fit your machine.

gme-10

Let’s Make a Drawing Game with Node.js

By now you have probably heard of node.js. It is an asynchronous web server built ontop of Google’s V8 JavaScript engine (the same one that makes Chrome lighning fast). Using node, you can write scalable web services in JavaScript, that can handle a huge number of simultaneous connections, which makes it perfect as the backend of games, web chats and other real time tasks.

gme-11


0 Comments

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked