Posted October 26, 2023 by KuroGamedev
This is a guide/tutorial that will cover the 'how to' in making a simple worm game with vanilla javascript. The game itself is very barebones project with only the minimal requirements needed to make something playable. This was made to help teach about the implementation of various game elements such as variable control and graphics.
The objectives for the game are fairly simple:
This game is not designed to have an 'actual' ending and can be played endlessly. Should the player run out of lives, it will loop back to the first round and start all over again.
This guide will operate under the assumption that you know little-to-nothing about javascript, so my apologies are upfront if this feels too much like a 'holding-your-hand' guide. Even if you are fairly skilled in javascript, you may discover a different way of doing things that will work in your favour.
Here is what you will require to build and play the game:
No additional libraries or downloads are required to make this project. If you can browse the web without any real trouble, odds are you already have what you need to get started.
While the game is fairly simple and lowkey, it still possesess a considerable breakdown of what we must include to make this game work:
It may sound like a lengthy list, but you will work on it a piece at a time, breaking it down into smaller tasks; this helps to simplify building the game.
Notes:
Our very first task will be creating four files. Open up whichever editor you would like to use (Notepad, Notepad++, Visual Studio, whatever you would like to use) and save four pages with the following names:
Make sure not to use anything like Wordpad, Office, etc., as they will add additional content to the files and potentially ruin what you are trying to work on. Keep this as a simple text file.
We will start with the index page and what should be included. Web pages need a starting point and index.html is the default page name when looking up anything on a website (The name 'can' be changed, if you wish, just note if you upload this somewhere, like to itch, it will insist your html page is named index).
To help breakdown what this page does:
The code for the index.html is below and should have everything we need to complete this tutorial. You can copy what is below to your index.html file, save and close it.
<title>Classic Worm Game (+ Tutorial)</title> </head> <style> html, body { height: 100%; -webkit-user-select: none; user-select: none; -moz-user-select: none; color: #fff; } body { text-align:center; margin:0; padding:0; width:100%; background:#345; } canvas { margin:auto; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; } </style> <body> <canvas id="game"></canvas> </body> <script src="./maps.js"></script> <script src="./fonts.js"></script> <script src="./scripts.js"></script> </html>
This covers the basic summary of the game and the to-do list of what we will need to complete to get this basic game working.