Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
The aim of this game is to use the arrow keys to walk the skeleton character to the exit of the maze.
This game shows:
/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */
/* There should always be a javaScript file with the same name as the html file. */
/* This file always holds the playGame function(). */
/* It also holds game specific code, which will be different for each game */
/******************** Declare game specific global data and functions *****************/
/* images must be declared as global, so that they will load before the game starts */
let skeletonImage = new Image();
skeletonImage.src = "images/skeleton.png";
let background = new Image;
background.src = "images/maze_background.png";
let mazeGrid = new Image;
mazeGrid.src = "images/maze_grid.png";
/* Direction that the skeleton is walking */
/* Note that this matches the row in the gameObject image for the given direction */
const UP = 0;
const LEFT = 1;
const DOWN = 2;
const RIGHT = 3;
const STOPPED = 4;
/* The various gameObjects */
/* These are the positions that each gameObject is held in the gameObjects[] array */
const BACKGROUND = 0;
const MAZE = 1;
const SKELETON = 2;
const WIN_MESSAGE = 3;
/******************* END OF Declare game specific data and functions *****************/
/* Always have a playGame() function */
/* However, the content of this function will be different for each game */
function playGame()
{
/* We need to initialise the game objects outside of the Game class */
/* This function does this initialisation. */
/* This function will: */
/* 1. create the various game game gameObjects */
/* 2. store the game gameObjects in an array */
/* 3. create a new Game to display the game gameObjects */
/* 4. start the Game */
/* Create the various gameObjects for this game. */
/* This is game specific code. It will be different for each game, as each game will have it own gameObjects */
gameObjects[BACKGROUND] = new StaticImage(background, 0, 0, canvas.width, canvas.height);
gameObjects[MAZE] = new StaticImage(mazeGrid, 0, 0, canvas.width, canvas.height);
gameObjects[SKELETON] = new MazeSkeleton(skeletonImage, canvas.width - 70, 80);
/* END OF game specific code. */
/* Always create a game that uses the gameObject array */
let game = new MazeSkeletonCanvasGame(mazeGrid);
/* Always play the game */
game.start();
/* If they are needed, then include any game-specific mouse and keyboard listners */
document.addEventListener('keydown', function (e)
{
if (e.keyCode === 37) // left
{
gameObjects[SKELETON].setDirection(LEFT);
}
else if (e.keyCode === 38) // up
{
gameObjects[SKELETON].setDirection(UP);
}
else if (e.keyCode === 39) // right
{
gameObjects[SKELETON].setDirection(RIGHT);
}
else if (e.keyCode === 40) // down
{
gameObjects[SKELETON].setDirection(DOWN);
}
});
}
The game will display a background image, a grid and a skeleton
gameObjects[BACKGROUND] = new StaticImage(background, 0, 0, canvas.width, canvas.height);
gameObjects[MAZE] = new StaticImage(mazeGrid, 0, 0, canvas.width, canvas.height);
gameObjects[SKELETON] = new MazeSkeleton(skeletonImage, canvas.width - 70, 80);
Because we have collision detection, we need to have our own CanvasGame class.
let game = new MazeSkeletonCanvasGame(mazeGrid);
The keyboard is used to control the direction that the skeleton travels. The skeleton will continue to travel in the same direction until another arrow key is hit.
document.addEventListener('keydown', function (e)
{
if (e.keyCode === 37) // left
{
gameObjects[SKELETON].setDirection(LEFT);
}
else if (e.keyCode === 38) // up
{
gameObjects[SKELETON].setDirection(UP);
}
else if (e.keyCode === 39) // right
{
gameObjects[SKELETON].setDirection(RIGHT);
}
else if (e.keyCode === 40) // down
{
gameObjects[SKELETON].setDirection(DOWN);
}
});
/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */
/* A CanvasGame that implements collision detection. */
/* The game allows the user to walk a skeleton around a maze. */
/* If the skeleton is guided to the maze exit, then a win message appears. */
class MazeSkeletonCanvasGame extends CanvasGame
{
constructor(mazeGridImage)
{
super();
/* this.mazeCtx will be used for collision detection */
let mazeOffscreenCanvas = document.createElement('canvas');
this.mazeCtx = mazeOffscreenCanvas.getContext('2d');
mazeOffscreenCanvas.width = canvas.width;
mazeOffscreenCanvas.height = canvas.height;
this.mazeCtx.drawImage(mazeGridImage, 0, 0, canvas.width, canvas.height);
}
collisionDetection()
{
if (!this.mazeCtx)
{
return;
}
if (gameObjects[SKELETON].getDirection() === UP)
{
let imageData = this.mazeCtx.getImageData(gameObjects[SKELETON].getCentreX(), gameObjects[SKELETON].getCentreY() - 20, 1, 1);
if (imageData.data[3] !== 0)
{
gameObjects[SKELETON].setDirection(DOWN);
}
}
else if (gameObjects[SKELETON].getDirection() === LEFT)
{
let imageData = this.mazeCtx.getImageData(gameObjects[SKELETON].getCentreX() - 15, gameObjects[SKELETON].getCentreY(), 1, 1);
if (imageData.data[3] !== 0)
{
gameObjects[SKELETON].setDirection(RIGHT);
}
}
else if (gameObjects[SKELETON].getDirection() === DOWN)
{
let imageData = this.mazeCtx.getImageData(gameObjects[SKELETON].getCentreX(), gameObjects[SKELETON].getCentreY() + 15, 1, 1);
if (imageData.data[3] !== 0)
{
gameObjects[SKELETON].setDirection(UP);
}
if (gameObjects[SKELETON].getCentreY() > canvas.height)
{
/* Player has won */
for (let i = 0; i < gameObjects.length; i++) /* stop all gameObjects from animating */
{
gameObjects[i].stop();
}
gameObjects[WIN_MESSAGE] = new StaticText("Well Done!", 20, 280, "Times Roman", 100, "red");
gameObjects[WIN_MESSAGE].start(); /* render win message */
}
}
else if (gameObjects[SKELETON].getDirection() === RIGHT)
{
let imageData = this.mazeCtx.getImageData(gameObjects[SKELETON].getCentreX(), gameObjects[SKELETON].getCentreY(), 1, 1);
if (imageData.data[3] !== 0)
{
gameObjects[SKELETON].setDirection(LEFT);
}
}
}
}
Set up an offscreen canvas to hold the grid image that is used for collision detection.
/* this.mazeCtx will be used for collision detection */
let mazeOffscreenCanvas = document.createElement('canvas');
this.mazeCtx = mazeOffscreenCanvas.getContext('2d');
mazeOffscreenCanvas.width = canvas.width;
mazeOffscreenCanvas.height = canvas.height;
this.mazeCtx.drawImage(mazeGridImage, 0, 0, canvas.width, canvas.height);
Do collision detection for the four mid-side points. For example, if we are detecting a collision as the skeleton moves up the screen, then we need to use the skeleton's (centreX, centreY - 20).
The reason why the '20' is a different number for UP, DOWN, LEFT and RIGHT is to allow for the differences of the gameObject size when it is displayed moving in different directions.
Whenever the skeleton hits the maze grid, if changes direction.
if (gameObjects[SKELETON].getDirection() === UP)
{
let imageData = this.mazeCtx.getImageData(gameObjects[SKELETON].getCentreX(), gameObjects[SKELETON].getCentreY() - 20, 1, 1);
if (imageData.data[3] !== 0)
{
gameObjects[SKELETON].setDirection(DOWN);
}
}
Stop all gameObjects from animating and display the win message.
/* Player has won */
for (let i = 0; i < gameObjects.length; i++) /* stop all gameObjects from animating */
{
gameObjects[i].stop();
}
gameObjects[WIN_MESSAGE] = new StaticText("Well Done!", 20, 280, "Times Roman", 100, "red");
gameObjects[WIN_MESSAGE].start(); /* render win message */
/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */
class MazeSkeleton extends Skeleton
{
/* Each gameObject MUST have a constructor() and a render() method. */
/* If the object animates, then it must also have an updateState() method. */
constructor(skeletonImage, centreX, centreY)
{
super(skeletonImage, centreX, centreY); /* as this class extends from GameObject, you must always call super() */
/* These variables depend on the object */
this.WIDTH_OF_SKELETON_ON_CANVAS = 50; /* the width and height that the skeleton will take up on the canvas */
this.HEIGHT_OF_SKELETON_ON_CANVAS = 50;
this.centreX = centreX; /* set the start position of the skeleton in the maze */
this.centreY = centreY;
this.SKELETON_SPEED = 1; /* set the skeleton's speed */
}
}
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.