Projects

  • Average IMDb ratings of Cheers episodes. Does Rebecca or Diane win?

    August 28, 2021

    Take a break from all your worries by looking at this visualisation showing average IMDb ratings of Cheers episodes!

  • Protein density of different foods

    August 28, 2021

    Which foods are the best sources of protein, when you take the weight and number of calories into account?

  • The Iliad – which characters are mentioned by name the most?

    August 28, 2021

    The Iliad is one of the oldest pieces of western literature, and features some names you know well, like Aphrodite, Zeus, and Achilles. How often are each of these characters mentioned by name? And where in the story are they mentioned most?

  • When does middle age start?

    August 28, 2021

    When does middle age begin? Does your age, gender, or where you live affect your answer to this question? Data from the European Social Survey has some clues…

  • Formula 1 historical stats dashboard

    August 28, 2021

    Which F1 driver has started the most races? Who has won the most? Is F1 getting less competitive now, with richer teams taking all the spoils? I made a dashboard to find out.

  • CSS Synthwave Sunset

    August 11, 2020

    CSS Synthwave Sunset… try saying that 5 times fast. Can’t do it, can you? Pronounceable or not, that’s what you’re getting today.

  • 2018 Web Design Trends

    June 22, 2018

    Here’s what looks cool in 2018, but in 20 years time will probably just look ooooooold. But that’s the definition of a trend, isn’t it? If you’re reading this is 2038, yes, we all think this stuff looks really great.

  • Ninja Climber

    May 5, 2018

    2D platform game. A ninja girl with an unusually large head climbs indefinitely up a gravity-defying series of platforms, collecting coins and killing beasts along the way. Please watch the sunset, I put a lot of time into it.

  • Neon City

    February 14, 2018

    Neon City is a top-down, open world game in the vein of the old GTA games. It is very work-in-progress at the moment.

  • Space Spider Survival

    February 11, 2018

    A 2D top-down shoot-em up. Collect power-ups, set traps, and call on computer-controlled allies to help you. It’s a survival game like Zombies on Call of Duty — you don’t win, you just get as far as you can.

  • Lesson 14) Adding sound to a canvas game

    February 10, 2018

    If a canvas game falls over in the woods, and there’s no one around to hear it, does it still make a sound? To answer this age-old philosophical question, we need to add sound! This is the final lesson and with this, we’ll complete our game, so let’s get to it!

  • Lesson 13) Loading image files onto the canvas

    February 10, 2018

    You don’t have to be too aesthetically-minded to know that moving a red square around a green background isn’t going to impress anyone very much. Let’s improve the game with some graphics.

  • Lesson 12) Bullets and shooting

    February 10, 2018

    OK, so we went a bit too far in that last lesson. The bad guys quickly massacre the player in every game. Let’s give him the means to fight back… let’s enable him to shoot the baddies.

  • Lesson 11) Health, damage and game over

    February 8, 2018

    Let’s add a health bar… and not the kind that serves smoothies. Currently the bad guys chase the player, but do nothing. Let’s make them actually do damage.

  • Lesson 10) Stopping bad guys from overlapping

    February 8, 2018

    Argh! Our enemies keep piling on top of each other! We’ll have to fix this using our collision detection functions… but there are a couple of gotchas here that we need to be aware of. You’ll see what I mean in this lesson.

  • Lesson 9) Adding in bad guys

    February 8, 2018

    Our little amigo’s getting a bit of an easy ride at the moment. So in this lesson we’ll throw in some enemies, and make them mercilessly chase the player down as he goes about his business.

  • Lesson 8) Bounding the game area

    February 8, 2018

    It’s important to set boundaries. So following on from the last lesson, you’ll use your new-found skills in collision detection to stop the player moving outside of the game area.

  • Lesson 7) Collision detection

    February 8, 2018

    Lara Croft walks into a wall, and says “Oof!” Sonic walks into a ring, and collects it. Bison walks into Ken’s dragon punch, and loses health. All this happens because of collision detection. Here’s how it works.

  • Lesson 6) Detecting multiple key presses at once

    February 8, 2018

    OK, so you can detect a key press. Good for you. But can you detect multiple key presses happening at the same time? You will after this lesson!

  • Lesson 5) Detecting key-press input

    February 8, 2018

    Now that we’ve got the basic skeleton of a game, we need to enable players to control it. So let’s learn how to detect key presses, and link these to actions in our game.

  • Lesson 4) Getting started with objects

    February 7, 2018

    Some say that in JavaScript, everything is an object. But what is an object, and why are they useful in games and other apps? Find out here!

  • Lesson 3) Creating a game loop

    January 30, 2018

    A moving game is actually a series of static images, shown multiple times per second. We create this effect in our main game loop, which is, as they say, where all the magic happens.

  • Lesson 2) Drawing on the canvas

    January 30, 2018

    Experimenting with form and colour… aka drawing rectangles and stuff! Let’s start learning the canvas API by drawing some simple shapes.

  • Lesson 1) Creating a game area with canvas

    January 30, 2018

    Every good battle needs an arena, and ours will be made out of canvas. HTML5 canvas, that is. Here you’ll learn what a canvas is and how to create one.

  • How to make a top-down shooter in canvas/JavaScript

    January 30, 2018

    After this tutorial you’ll be able to build top-down 2D shoot ’em ups. This is aimed at beginners, although you should know some basics like how to use if statements and loops.