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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
Experimenting with form and colour… aka drawing rectangles and stuff! Let’s start learning the canvas API by drawing some simple shapes.
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.
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.