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.