HTML5 Maze Game

Jiwon Choi · December 2, 2017

I am a grade 10 student.

I had to create a HTML5 maze game for my design project.

However, my product didn't work.

I want to know what the problem is.

This is the code I wrote:

<html>

<head>

<h1>Level 1</h1>

</head>

<body>

<canvas width="616" height="556" id="mazecanvas">Can't load the maze game, because your browser doesn't support HTML5.</canvas>
<noscript>JavaScript is not enabled. To play the game, you should enable it.</noscript>
<script>
var canvas = document.getElementById("mazecanvas");
var context = canvas.getContext("2d");
var currRectX = 425;
var currRectY = 3;
var mazeWidth = 556;
var mazeHeight = 556;
var intervalVar;
function drawMazeAndRectangle(rectX, rectY) {
makeWhite(0, 0, canvas.width, canvas.height);
var mazeImg = new Image();
mazeImg.onload = function () {
context.drawImage(mazeImg, 0, 0);
drawRectangle(rectX, rectY, "#0000FF");
context.beginPath();
context.arc(542, 122, 7, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = '#00FF00';
context.fill();
};
mazeImg.src = "maze.gif";
}
function drawRectangle(x, y, style) {
makeWhite(currRectX, currRectY, 15, 15);
currRectX = x;
currRectY = y;
context.beginPath();
context.rect(x, y, 15, 15);
context.closePath();
context.fillStyle = style;
context.fill();
}
function moveRect(e) {
var newX;
var newY;
var movingAllowed;
e = e || window.event;
switch (e.keyCode) {
case 38: // arrow up key
case 87: // W key
newX = currRectX;
newY = currRectY - 3;
break;
case 37: // arrow left key
case 65: // A key
newX = currRectX - 3;
newY = currRectY;
break;
case 40: // arrow down key
case 83: // S key
newX = currRectX;
newY = currRectY + 3;
break;
case 39: // arrow right key
case 68: // D key
newX = currRectX + 3;
newY = currRectY;
break;
default: return;
}
movingAllowed = canMoveTo(newX, newY);
if (movingAllowed === 1) {
drawRectangle(newX, newY, "#0000FF");
currRectX = newX;
currRectY = newY;
}
else if (movingAllowed === 2) {
clearInterval(intervalVar);
makeWhite(0, 0, canvas.width, canvas.height);
context.font = "40px Arial";
context.fillStyle = "blue";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Congratulations!", canvas.width / 2, canvas.height / 2);
window.removeEventListener("keydown", moveRect, true);
}
}
function canMoveTo(destX, destY) {
var imgData = context.getImageData(destX, destY, 15, 15);
var data = imgData.data;
var canMove = 1;
if (destX >= 0 && destX <= mazeWidth - 15 && destY >= 0 && destY <= mazeHeight - 15) {
for (var i = 0; i < 4 * 15 * 15; i += 4) {
if (data === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
canMove = 0;
break;
}
else if (data === 0 && data[i + 1] === 255 && data[i + 2] === 0) {
canMove = 2;
break;
}
}
}
else {
canMove = 0;
}
return canMove;
}
function createTimer(seconds) {
intervalVar = setInterval(function () {
makeWhite(mazeWidth, 0, canvas.width - mazeWidth, canvas.height);
if (seconds === 0) {
clearInterval(intervalVar);
window.removeEventListener("keydown", moveRect, true);
makeWhite(0, 0, canvas.width, canvas.height);
context.font = "40px Arial";
context.fillStyle = "red";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Time's up!", canvas.width / 2, canvas.height / 2);
return;
}
context.font = "20px Arial";
if (seconds <= 10 && seconds > 5) {
context.fillStyle = "orangered";
}
else if (seconds <= 5) {
context.fillStyle = "red";
}
else {
context.fillStyle = "green";
}
context.textAlign = "center";
context.textBaseline = "middle";
var minutes = Math.floor(seconds / 60);
var secondsToShow = (seconds - minutes * 60).toString();
if (secondsToShow.length === 1) {
secondsToShow = "0" + secondsToShow;
}
context.fillText(minutes.toString() + ":" + secondsToShow, mazeWidth + 30, canvas.height / 2);
seconds--;
}, 1000);
}
function makeWhite(x, y, w, h) {
context.beginPath();
context.rect(x, y, w, h);
context.closePath();
context.fillStyle = "white";
context.fill();
}
drawMazeAndRectangle(425, 3);
window.addEventListener("keydown", moveRect, true);
createTimer(30);
</script>
</body>

</html>

Sign In

HTML5 Maze Game

Recommended Posts

Jiwon Choi

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity