Intro to Game Development with HTML5

This tutorial is made as a reference for the HTML5 Game Development workshop for CarlHacks 2015.

Goal Of Workshop

By the end of this workshop, you should have Phaser set up and understand how to code and deploy a game like this: (click below to try it out!)

CarlWars

Why HTML5?

Whether you’re completely new to programming or a veteran, HTML5 is a great technology to jump into. What I personally love about it is how easy it is to deploy something that can be played/used both on desktop computers as well as mobile phones.

I’ve always wanted to make something on my phone that could use the accelerometer without having to dig through native code or developer licenses. In less than 50 lines of code, here’s a little demo of a ball that moves around in any device that has an accelerometer.

Cool isn’t it?

Overview and Phaser

The main gist of HTML5 is in using the canvas tag to draw whatever you like, and to make rich, dynamic applications and games. The drawing API is relatively low level, requiring a lot of boilerplate code to get anything done.

This is why we’re going to use Phaser, an HTML5 game framework that helps take care of a lot of this set up for us.

Once you get set up and are comfortable playing around with the basic examples provided here, I encourage you to dig deeper! Phaser is rich with a lot of features, and they’ve got a lot of great tutorials that can help you make the most of it.

Getting set up

A full in-depth tutorial on setting up Phaser is in the official docs.

However, if you just want to get started right away, you can clone or download this repository:

https://github.com/OmarShehata/BasicPhaser

Which contains the minimum files you need and basic example to go along with it!

This is basically the “Hello CarlHacks” example

What you should see if you successfully run the basic example

Creating a game

For this example, we’re going to be making a very minimalist, simple shooter. The repository can be found here:

https://github.com/OmarShehata/PhaserExample

The code is fully documented so it should be easy to follow, but I will be stepping through the code to explain how it works and where to go from here.

Resource List

Phaser official documentation

Source for CarlWars

Source for a barebones Phaser project

Source for basic canvas and accelerometer example

Extras

Three.js : 3D rendering framework for HTML5 with WebGL

PlayCanvas: 3D game engine built on top of Three.js

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.