In this blog series, I'll be walking you through how to make an HTML 5 Canvas Game.
- First, you'll create the core logic of the game - A back-end.
- After implementing the back-end logic of the game, you'll create a front-end for the game using the HTML5 Canvas API.
The benefit of this approach is that you reduce the scope of bugs with core game logic by storing it all in a state machine object. The front end will simply be an interface for interacting with the state machine object.
Another benefit of this approach is that you'll have flexibility when choosing how to implement the game's front end. Maybe you'll find another way to use the HTML5 Canvas API. Maybe you'll use the built-in HTML elements. You could even try recreating the front end with WebGL or a game engine.
After this tutorial, you will be free to explore these various options!
Now, let's get started!
You'll need the following to be able to complete this tutorial:
- A text editor (I recommend using Visual Studio Code if you're unsure) - This is where you'll be writing your code.
- A Web browser with access to developer tools - you'll be interacting with the browser console throughout the tutorial, especially at the start since the game won't have a front-end yet. I'll be using Google Chrome throughout this tutorial.
Note: I strongly recommend using an HTTP Server with live reload support. You'll feel at peace knowing that you don't have to manually refresh your browser and possibly clear your cache to see the latest changes that you've made!
First, create a directory where you'll write the code for the game. I suggest naming it "four-in-a-row".
Then, create this directory structure in the "four-in-a-row" project:
The HTML File#
Now let's set up the HTML file.
Create a file called
index.html in the root of the project directory.
Add this to the file's contents:
Four in a row
index.js. This will be the entry point for your code for the game.
Now, create the file:
You'll now do a quick check to see if the script file has been referenced correctly.
Add the following to
Next, start an HTTP server in the root of your project directory.
When you visit the address of the server, you'll see an empty page. This is normal, you haven't added any controls or styling. However, if you open the developer tools in your web browser and select the console, you should see the following message:
If you don't see the message above, you probably didn't follow the instructions properly. Please go back over the previous steps and ensure that you've completed them.
Otherwise, congratulations! You've completed the first part of this tutorial! 🥳
In the next post, you'll begin the creation of the back end by creating a four-in-a-row state machine!