Reference no: EM131152836

Braineater Game Using Javascript

To create the Brain Eaters! game, you will need to take advantage of a web technology called Canvas. Using Canvas, you can add images to a web page using code that looks like this:

// create canvas
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext("2d");

// get zombie image
let img = new Image();
img.src = "zombie.gif";

// when all images loaded, start drawing
window.addEventListener('load', () => {
context.drawImage(img, 0, 0);
});

This code loads an image of a zombie and adds it to the top-left corner of the canvas. The image is drawn by calling the context.drawImage() method with the image and the x and y coordinates of where you want the image to be drawn.

In order for this code to work, you need a <canvas> element on your page:

<canvas id="myCanvas" width="800" height="500"></canvas>

Here are the basic requirements for the game:

• A randomly generated maze should appear each time you play the game.
• When you click the up, down, right, or left arrow keys then your character should move in that direction.
• Each turn, all of the zombies should move in a particular direction.
• If your character and a zombie occupy the same space then your character should die a horrible death.