Tutorial, Part 2: Prepping for a Game

< Previous Tutorial (Part 1)

> Next Tutorial (Part 3)

There is some code we should have ready/inserted before trying to trying to build the game, itself.

Adding Some Resources

Game Maps

I have included 12 maps. The data is built as a series of arrays inside a single array. Since the source is a constant and not a variable, we will copy the map data into a variable we can edit as the game is played (like removing walls after collecting all the snacks). This also prevents the source from being modified, making it easier to re-use as needed. (Say if the player gets far enough in the game and we loop around which maps we pull from the source.

Example of array design:    map = [ [map data], [map data], [map data], [etc.] ];

What the map data does is kept fairly simple:

• 0 = Open space.
• 1 = Wall. Player crashes when hitting one.

Notes:

• Regarding the outer wall -- The map needs a fully enclosed one because the game is designed to end the round should the player move outside the parameters of the map. If you plan to edit this data, please keep that in mind.

Copy this data into your maps.js file, save and close it.

const mapSrc=[
[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,1,1,1,1,1,1,1,1,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,1,1,1,0,0,0,0,1,1,1,0,0,1,
1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,
1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,
1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,
1,0,0,1,1,1,0,0,0,0,1,1,1,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,1,1,0,0,0,0,1,1,0,0,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,0,0,1,1,0,0,0,0,1,1,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,1,1,0,0,0,0,1,1,1,1,0,1,
1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,
1,0,1,0,1,1,0,0,0,0,1,1,0,1,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,1,0,1,1,0,0,0,0,1,1,0,1,0,1,
1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,
1,0,1,1,1,1,0,0,0,0,1,1,1,1,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
],[
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,1,1,1,1,0,0,0,0,1,1,1,1,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,1,1,1,0,0,0,0,0,0,1,1,1,0,1,
1,0,1,1,1,1,0,0,0,0,1,1,1,1,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
]
];

Fontset

Since we will be building the letters and numbers used in the canvas, we will be including a series of instructions.  The instructions build boxes and lines on the screen.  When combined, these boxes and lines are used to form the shape of letters.  
Each bundle of four values is: X & Y positions on the screen (where the letter is being drawn), the width and height  of the box. 

Notes:

• Normally, I am not a fan of using objects unless needed because they require more browser resources to use properly and can contribute to frame rate problems if you are building/running a game which requires a lot of resources, like a 3d game.  For a project like this, it is hardly an issue.
• Make sure to include the blank entry at the bottom or anything that needs a space in the middle of a line of text will result in the game crashing.
Copy the following into your fonts.js page, save and close it.

const fontSetup={
"0": [1,0,3,1, 0,1,1,3, 1,4,3,1, 4,1,1,3, 1,1,1,1, 2,2,1,1, 3,3,1,1],
"1": [1,0,2,1, 2,0,1,5, 1,4,3,1],
"2": [0,0,4,1, 4,1,1,1, 1,2,3,1, 0,3,1,1, 0,4,5,1],
"3": [0,0,4,1, 2,2,2,1, 0,4,4,1, 4,1,1,1, 4,3,1,1],
"4": [0,0,1,3, 0,2,5,1, 3,0,1,5],
"5": [0,0,5,1, 0,0,1,2, 0,2,4,1, 4,3,1,1, 0,4,4,1],
"6": [1,0,4,1, 0,1,1,3, 1,4,3,1, 4,3,1,1, 0,2,4,1],
"7": [0,0,5,1, 4,0,1,2, 3,2,1,1, 2,3,1,2],
"8": [1,0,3,1, 1,2,3,1, 1,4,3,1, 0,1,1,1, 4,1,1,1, 0,3,1,1, 4,3,1,1],
"9": [1,0,3,1, 1,2,3,1, 1,4,3,1, 0,1,1,1, 4,1,1,3],
"A": [2,0,1,1, 1,1,1,1, 3,1,1,1, 0,2,1,3, 4,2,1,3, 0,3,5,1],
"B": [0,0,1,5, 0,0,4,1, 0,2,4,1, 0,4,4,1, 4,1,1,1, 4,3,1,1],
"C": [1,0,3,1, 0,1,1,3, 1,4,3,1, 4,1,1,1, 4,3,1,1],
"D": [0,0,1,5, 0,0,3,1, 3,1,1,1, 4,2,1,2, 0,4,4,1],
"E": [0,0,1,5, 0,0,5,1, 0,4,5,1, 0,2,3,1],
"F": [0,0,1,5, 0,0,5,1, 0,2,3,1],
"G": [1,0,4,1, 0,1,1,3, 1,4,2,1, 2,2,3,1, 4,2,1,3, 3,3,1,1],
"H": [0,0,1,5, 4,0,1,5, 0,2,5,1],
"I": [0,0,5,1, 0,4,5,1, 2,0,1,5],
"J": [1,0,4,1, 3,0,1,4, 1,4,2,1, 0,3,1,1],
"K": [0,0,1,5, 0,2,3,1, 3,1,1,1, 4,0,1,1, 3,3,1,1, 4,4,1,1],
"L": [0,0,1,5, 0,4,5,1],
"M": [0,0,1,5, 4,0,1,5, 1,1,1,1, 2,2,1,1, 3,1,1,1],
"N": [0,0,1,5, 4,0,1,5, 1,1,1,1, 2,2,1,1, 3,3,1,1],
"O": [1,0,3,1, 0,1,1,3, 1,4,3,1, 4,1,1,3],
"P": [0,0,4,1, 0,2,4,1, 0,0,1,5, 4,1,1,1],
"Q": [1,0,3,1, 0,1,1,3, 1,4,2,1, 4,1,1,2, 3,3,1,1, 2,2,1,1, 4,4,1,1],
"R": [0,0,4,1, 0,2,4,1, 0,0,1,5, 4,1,1,1, 4,3,1,2],
"S": [1,0,4,1, 0,1,1,1, 1,2,3,1, 4,3,1,1, 0,4,4,1],
"T": [0,0,5,1, 2,0,1,5],
"U": [0,0,1,4, 1,4,3,1, 4,0,1,4],
"V": [0,0,1,3, 4,0,1,3, 1,3,1,1, 3,3,1,1, 2,4,1,1],
"W": [0,0,1,5, 4,0,1,5, 1,3,1,1, 2,2,1,1, 3,3,1,1],
"X": [0,0,1,1, 1,1,1,1, 2,2,1,1, 3,3,1,1, 4,4,1,1, 0,4,1,1, 1,3,1,1, 3,1,1,1, 4,0,1,1],
"Y": [0,0,1,1, 4,0,1,1, 1,1,1,1, 3,1,1,1, 2,2,1,3],
"Z": [0,0,5,1, 0,4,5,1, 3,1,1,1, 2,2,1,1, 1,3,1,1],
":": [1,1,1,1, 1,3,1,1],
" ": []
};

Build a Skeleton

Let's build an outline to help up layout the basic structure of the game. It mostly consists of notes and one important command line:

• "use strict"; - This helps to ensure the code isn't haphazard and full of problems that 'might' pass the test on your browser, but would fail on others.
• VARIABLES - Values that change. This is one of the most critical parts of the game; without variables there is no important data, such as the player position, score, lives, how many snacks are left.
• CONSTANTS - These are one-time entered values that do not change as the game plays.
• LISTENERS - These are for active things the browser is supposed to be keeping an eye on. We will be including listeners for the size of the browser window and what keys are pressed.
• FUNCTIONS - These allow us to repeatedly call on something without having to type it in over and over. In most situations this is useful.
• EXECUTE THE GAME - Boot up the game.

//FIRST THINGS, FIRST
"use strict";  //Help better identify problems in the code, especially with bad variable declarations.
//
//VARIABLES
//
//CONSTANTS
//
//LISTENERS
//
//FUNCTIONS
//
//EXECUTE THE GAME

No game, yet, but we have laid down a fair bit of framework. We are (more or less) ready to dive into the scripts needed to starting making ourselves a playable game.