Every good battle needs an arena
In this tutorial I won’t explain basic stuff like what an if statement is and what a for loop does (see Codecademy and the like for that). I’m focusing on how to fit those pieces together to make a game. That said, I’m assuming you’re a beginner, so if you’ve got some skills, you’ll be skimming through some sections.
If you get stuck, remember that at any point you can use Ctrl+U to see the actual code used for each lesson.
The structure of the game – looping the canvas
A Canvas is a HTML element which, as the name imlies, let’s you draw graphics on it. We make games with it by drawing our game elements (e.g., the player, bad guys, and bullets) on the canvas, and then creating a loop in which the positions of these elements are updated, and then re-drawn in their new places. It’ll work something like this:
- Clear the canvas.
- Check if the player has moved or fired. If so, update the player position and create the bullets.
- Do the same with the bad guys.
- Update the positions of the bullets.
- Check if there are any collisions between the player, bad guys, and bullets. If so, resolve these by reducing the player’s health, removing bad guys, removing bullets, etc., as needed.
- Re-draw the canvas and all elements
- Go to (1)
The drawing and clearing happens quicker than the eye can detect, giving the illusion of smooth movement.
Drawing the canvas
For the sake of simplicity, we’ll put all the code we need – HTML, CSS, and JavaScript – in one single HTML file.
Just put the following into a text document and save it with a .html extention:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: solid 1px black;
position:relative;
}
#holder {
display:block;
margin: 20px auto;
width:800px;
height:600px;
}
</style>
</head>
<body>
<div id = "holder">
<canvas id="canvas" width="800" height="600" tabindex='1'></canvas>
</div>
</body>
</html>
What this does
The CSS for the page is in the <style> tags at the top. We’ve made an element called “canvas” and given it a black border, and a div called “holder,” which is just a little container for the canvas.
Under that we’ve got the <script> tags – the JavaScript code will go in here.
In the <body> area, we’ve used our holder div, and put within it a canvas with the highly inventive name “canvas.”
The end result is shown below. Pretty spartan for a game area. We’ll start filling it with fun stuff in the next lesson.