Tutorial, Part 1: Introduction

Worm Game (+ How-to-Make Tutorial) » Devlog
1 year ago by KuroGamedev
Share this post:

> Next Tutorial (Part 2)

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:

  • The player starts the game in the middle of the board with 3 lives and a task of collecting 5 snacks.
  • Navigate the board collect snacks and earn points.
  • Avoid colliding with the walls or other body parts.
  • After all the snacks have been collected, exits open up and the player can leave the map.
  • The game becomes progressively more difficult as the game carries on with different map designs, increases in the number of snacks the player must collect, etc.

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:

  • A web browser that can effectively handle HTML5, CSS3 and Javascript 5 (Anything from 2018+ should be sufficient).
  • Text editor.

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.

Introduction

While the game is fairly simple and lowkey, it still possesses a considerable breakdown of what we must include to make this game work:

  • An assortment of variables and constants. The variables will continuously be updated as the game progresses.
  • A game board, including the ability to draw it.
  • The means to draw coloured blocks for map tiles, the player's worm and snacks.
  • Ability to create and post letters and numbers.
  • Basic gameplay, such as moving around on the board.
  • Add points to the player's score.
  • Check if the player collected a snack.
  • Open an escape route.
  • Trigger the next round.
  • Collision detection that can cause the player to a lose a life / end the game.
  • Pause the game.
  • End the game.
  • Resize the window at any point while playing.
  • Resources for maps and fonts.
  • Keyboard support for movement/pausing.

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:

  • Keep your dev. console on while you test/run your game. It will help watch for errors as you go, most often pointing out where the problem is in the code. If the problem is hiding in a function, you may have bad data feeding it and you will have to track down where this bad data is coming from.
  • Hit either F12 or Shift-Ctrl-I to bring up the dev. console.

Create Some Pages

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:

  • index.html -- This is page we click on we open a project locally.
  • maps.js
  • fonts.js
  • script.js

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 <html> tags around the entire project. Not really 'essential' per say, but it helps to keep things organized on the coder's end.
  • The <head> tags; this is used to include details about the page information. Especially important is the meta charset tag, which the dev console will return an error for if nothing is included. You can leave it at UTF-8, unless you have a reason to change it to something else. The title setup lets you include a name for the project in the browser window.
  • The <style> tags; includes what little bit of CSS is required for the physical appearance. We will use javascript to ensure it's still kept to a good scale, but this is handy for keeping the screen centered and the game looking sharp and pixelated.
  • The <body> tags; Where the guts of the webpage is kept. The <canvas> box is placed here, which is where we will draw the game.
  • The <script> tags; This directs us to the three javascript (.js) pages. Two of them are for storing resources and the scripts.js will be the page that controls the game's function.

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.

<html>
<title>Classic Worm Game (+ Tutorial)</title>
<head>
<meta charset="UTF-8">
</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.

Worm Game (+ How-to-Make Tutorial)

A simple, no nonsense game (+ How to make this tutorial) where the player navigates a room and collects snacks.

Add Game To Collection

More posts

Leave a comment

Log in with itch.io to leave a comment.