Posted October 26, 2023 by KuroGamedev
There is some code we should have ready/inserted before trying to trying to build the game, itself.
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:
Notes:
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:
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], " ": [] };
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:
//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.