Throughout the summer, Skandalaris Center Summer Internship Program participants will be writing guest blog posts about their internship experience. Following is one such post. 

Create a Game in 5 minutes

By Devin Griffin (EN ’21)

My name is Devin Griffin and I’m studying Computer Science at Washington University.

For the last year I’ve been working as a game developer at clEAR, a startup that uses games to train listening skills. Over the course of the year I’ve honed in on my game dev skills. In this blog post, I’ll show you how to create a simple HTML5 game in 5 minutes and in less than 40 lines of code.

The only prerequisite you’ll need is the ability to code in some language. We’ll be using JavaScript but you should be able to understand it from any programming background.

I’m going to help you create a simple clicking game. A Skandalaris logo will spawn on the screen every 500ms. The player’s goal is to click on as many logos as fast as possible. Each click earns the player a point.

View the finished example at: https://jsfiddle.net/DevinGriffin/q2ghy3eL/28/

Getting started

Visit this link and press “Fork” This is your starting point: an empty phaser game.

Introducing Phaser

We will be using Phaser 2.

Phaser is one of the most popular JavaScript game frameworks.

Most Phaser games rely on a preload, create, and update function.

• Preload – where you load assets (audio, images, spritesheets)
• Create – where you “create” your game objects
• Update – gets called 60 times per second. One use of update, for example, would be to check if two objects are colliding.

Loading our asset

https://jsfiddle.net/DevinGriffin/q2ghy3eL/31/

In preload add this line of code to your function.

‘logo’ represents the key we will use to identify this asset with later,

‘https…..jpg’ is a link to a Skandalaris logo. Feel free to change this logo to anything you want.

Building out our Create Function

https://jsfiddle.net/DevinGriffin/q2ghy3eL/32/

In (and above) create, add this code:

We initialize the variables score and scoreText outside of the scope of create() because we need access to them for later.

scoreText = game…. Adds a text object to our game at the position x: game.width * .10 and y: game.height * .10 with the text: “Score: 0”

Adding our Logo functions

https://jsfiddle.net/DevinGriffin/q2ghy3eL/33/

The function spawnLogo creates a logo with a random x and y position and renders it on the screen. The logo has a random width and a random height as well.

The onInputDown line makes it so that when you click a logo, you call the clickLogo function.

The clickLogo function removes the logo, gives you a point, and updates the score text to reflect your new score.

Spawn logos

https://jsfiddle.net/DevinGriffin/q2ghy3eL/34/

Add this code in (and around) your update function:

Remember, update gets called 60 times a second.

We keep track of how many frames have passed. We do frames modulus (%) = 300, to keep frames from getting too large.

The if statement is saying: if half a second has passed, spawn a logo.

Congrats, you have a playable game.

If your game isn’t working, compare your code to the finished example here: https://jsfiddle.net/DevinGriffin/q2ghy3eL/28/

What’s next?

From here, feel free to use your imagination and change the game anyway you see fit.

You could:

• Increase the logo spawn rate.
• Change the logo source.
• Add multiple logos.
• Kill logos after X seconds.
• Reward more points for quicker clicks.

Phaser has excellent documentation and a huge library of examples that you can copy code from: https://phaser.io/examples/v2

Good Luck!