Maze Game

A fun game

by Phoebe Jeske

HTML

<canvas id="myCanvas" width="480" height="320"></canvas>
<div id="stuff">DON'T RUN
  <br> INTO ME!!!! </div>
<p id = "gameOver">GAME OVER. Now why didn't you just follow the instructions?</p>  
<p id = "count"></p>

CSS

div {
  position: fixed;
  background-color: red;
  top: 0;
  width: 200px;
  height: 100px;
  font-size: 150%;
}
#gameOver {
  visibility : hidden;
}

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

//to move

var ballHeight = 10;
var ballWidth = 10;
var ballX = 300;
var ballY = 300;
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

$( "myCanvas" ).on( "keydown", function( event ) {
  $( "stuff" ).html( event.type + ": " +  event.which );
});
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  }
  if (e.keyCode == 38) {
  upPressed = true;
  } else if (e.keyCode == 40) {
  downPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  }
  if (e.keyCode == 38) {
    upPressed = false;
  } else if (e.keyCode == 40) {
    downPressed = false;
  }
}


function drawBall() {
  ctx.beginPath();
  ctx.rect(ballX, ballY, ballWidth, ballHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}


function draw() {
if ((ballX == 200 && ballY < 95) || (ballY == 95 && ballX <= 200)) {
document.getElementById("gameOver").style.visibility = "visible";
}
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawBall();


  if (rightPressed && ballX < canvas.width - ballWidth) {
    ballX += 1;
  } else if (leftPressed && ballX > 0) {
    ballX -= 1;
  }
  if (upPressed && ballY < canvas.height - ballHeight) {
    ballY -= 1;
  } else if (downPressed && ballY > 0) {
    ballY += 1;
  }

}

setInterval(draw, 10);