Maze Game

MAZE GAME

Submitted by

PRISHA MEERA M.S (211501069)

SAHANA.S (211501084)

SOWMYA.S (211501101)

FULL STACK DEVELOPMENT INTERNSHIP

5th January 2023 to 10nd January 2023

Industry Institute Interaction Cell

Rajalakshmi Engineering College, Thandalam

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
2

Bonafide Certificate

This is to certify that the Mini project work titled “Maze Game” done by
“Prisha Meera M.S (211501069)”, “Sahana.S (211501084)” and “Sowmya.S
(211501101)” is a record of bonafide work carried out by him/her under my
supervision as a part of full stack development internship program organized by
industry institute interaction cell in association with department of information
technology.

PRINCIPAL Head/IIIC

Date:

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
3

INDEX

C.No. CHAPTER HEADING P.No.

Abstract 4

1. Introduction 5
1.1 Problem Statement
1.2 Objective of the project
1.3 Organization of the report
2. System Design 7
2.1. System Architecture
2.1.1. Architecture Diagram
2.3. System specification 8
2.3.1. Software requirements
2.3.2. Hardware requirements
2.4. Tools / Platforms 8

3. Implementation
3.1. Coding 9
3.2. Output Images 34

4. Conclusion 36

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
4

ABSTRACT

For more than several decades, computer games continue being the most popular media for
exciting and fascinating entertainment and fun and, on the other side, an effective tool facilitating
traditional activities in areas such as education, professional training, manufacturing, military
deal, rehabilitation, advertising, and many other. Digital games of this type are called “serious”
or “applied” because they are produced, marketed, or used for purposes other than pure
entertainment as per Egenfeldt-Nielsen et al., 2008. The same authors also underline that
theoretically any computer game can be viewed as a serious depending on the perception of the
players about gaming experiences. Modern digital games are designed predominantly as 2D and
3D video game and, unlike traditional media as books and movies, provide a highly interactive
entertainment.

The high of interactivity provided together with an immersive and intriguing virtual environment
make game playing an engaging and motivated process, which leads naturally to an adoption of
different skills and abilities, such as spatial thinking and cognition, strategic skills and
possibilities for memory enhancement. Hence, serious games continue to be used more and more
broadly in many spheres of the social life especially when applied for educational purpose.
Serious video games applied for learning purposes play a significant and important role for the
modern technology enhanced education. This project report explains the maze game design
process, the educational tasks embedded into the maze, and a practical experiment conducted
with the generated game. The initial results obtained from these experiments are very positive
and encouraging with regard of playability of such educational mazes.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
5

CHAPTER 1

INTRODUCTION

Maze game is a game genre description first used by journalists during the 1980s to describe any
game in which the entire playing field is a maze. Quick player action is required to escape
monsters, outrace an opponent, or navigate the maze within a time limit. After the release of
Namco's Pac-Man in 1980, many maze games followed its conventions of completing a level by
traversing all paths and a way of temporarily turning the tables on pursuers.

While the character in a maze would have a limited view, the player is able to see much or all of
the maze. Maze chase games are a specific subset of the overheard perspective. These type of
maze games are called as overhead view maze games. This project is to create one such maze
game which is simple in structure and belongs to the overhead-view maze game type.

A Maze Game can be quite engaging and fun for the user. The general idea of a maze is for the
player to cross the path in the maze area through thoroughly calculated steps to avoid any type of
obstacles and to reach the destination in order to win the game.

Although HTML and CSS are important building blocks in web development, JavaScript is the
show language that transforms websites from functional to entertaining. The major programming
parts involved in creating this game includes HTML, CSS, Javascript .

For the development of this simple web-based gaming project, it is developed using JavaScript to
bring the final output. All the gaming function is set from Javascript whereas HTML and CSS
are set for the layouts and other minor functions.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
6

PROBLEM STATEMENT

The project aims to create a simple maze game with optional difficulty levels to be enjoyed by
players of all ages.

OBJECTIVE OF THE PROJECT

The objective of the game is to navigate through the maze and reach the destination.

It allows the player to choose the difficulty level from the three given options.

This maze game has many purposes as listed below

 Entertainment
 Problem solving
 Executive functioning skills
 Helps to improve visual and motor skills

ORGANIZATION OF THE REPORT

This report describes the design and implementation of a game called Maze. The system
requirements, techniques used, implementation, output, summarization are all listed together for
the understanding of the project “Maze Game.”

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
7

CHAPTER 2

SYSTEM DESIGN

SYSTEM ARCHITECTURE

Fig 2.1 Architecture Diagram

The Player starts the game by selecting the difficulty level out of the four given options.i.e) Easy,
Medium , Hard , Extreme. This feature helps all the age group of people to be eligible for this

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
8

game. The Movements possible are horizontal and vertical , so the player takes each step either
horizontally or vertically inorder to reach the destination. After reaching the destination, the
game displays a Congratulations message along with the Number of steps taken by the player in
that specific game .

SYSTEM SPECIFICATIONS

Hardware requirements:

CPU: Quad-core Intel or AMD processor, 2.5 GHz or faster.

Graphics card: NVIDIA GeForce 470 GTX or AMD Radeon 6870 HD series card or higher.

Windows: 7, 8, 10 (64-Bit)

CPU: Intel Core i3-330E or higher

Software requirements:

Storage capacity : 4 GB available space.

TOOLS/ PLATFORMS

HTML : Hyper Text Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document. With HTML
constructs, images and other objects such as interactive forms may be embedded into the
rendered page.

CSS : Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML. CSS is designed to
enable the separation of content and presentation, including layout, colors, and fonts. This
separation can improve content accessibility; provide more flexibility and control in the
specification of presentation characteristics.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
9

JAVASCRIPT : JavaScript abbreviated as JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. It is a high-level, often just-in-
time compiled language. JS has dynamic typing, prototype-based object-orientation, and first-
class functions. It is multi-paradigm, supporting event-driven, functional, and imperative
programming styles.

CHAPTER 3

IMPLEMENTATION

CODING

HTML CODE

<html lang="en-GB">
<head>
<meta charset="utf-8">
<body>
<div id="gradient"></div>
<div id="page">
<div id="Message-Container">
<div id="message">
<h1>Congratulations!</h1>
<p>You are done.</p>
<p id="moves"></p>
<input id="okBtn" type="button" onclick="toggleVisablity('Message-Container')" value="Cool!"
/>
</div>
</div>

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
10

<div id="menu">
<div class="custom-select">
<select id="diffSelect">
<option value="10">Easy</option>
<option value="15">Medium</option>
<option value="25">Hard</option>
<option value="38">Extreme</option>
</select>
</div>
<input id="startMazeBtn" type="button" onclick="makeMaze()" value="Start" />
</div>
<div id="view">
<div id="mazeContainer">
<canvas id="mazeCanvas" class="border" height="1100" width="1100"></canvas>
</div>
</div>
</div>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>
</body>
</html>

CSS CODE

$menuHeight: 65px+10px;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
11

@mixin transition {
transition-property: background-color opacity;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

html,
body {
width: 100vw;
height: 100vh;
position: fixed;
padding: 0;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: $menuHeight;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
12

margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
}
}

input,
select {
@include transition;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.30);
height: 45px;
width: 150px;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
display: inline-block;
font-size: 15px;
text-align: center;
text-decoration: none;
appearance: none;
&:hover {
background-color: rgba(0, 0, 0, 0.70);
}

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
13

&:active {
background-color: black;
}
&:focus {
outline: none;
}
}
.custom-select {
display: inline-block;
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image:
url('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQ
VQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1oz
Jlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/
BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/
DxGbKB7CAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 125px center;
}
}
#Message-Container {
visibility: hidden;
color: white;
display: block;
width: 100vw;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
14

height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.30);
z-index: 1;
#message {
width: 300px;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
}
#page {
font-family: "Segoe UI", Arial, sans-serif;
text-align: center;
height: auto;
width: auto;
margin: auto;
#menu {
margin: auto;
padding: 10px;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
15

height: 65px;
box-sizing: border-box;
h1 {
margin: 0;
margin-bottom: 10px;
font-weight: 600;
font-size: 3.2rem;
}
}
#view {
position: absolute;
top:65px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
}
}
.border {
border: 1px black solid;
border-radius: 5px;
}
#gradient {
z-index: -1;
position: fixed;
top: 0;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
16

bottom: 0;
width: 100vw;
height: 100vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
input, select{
width: 120px;
}
}

JAVASCRIPT CODE

function rand(max) {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
17

return Math.floor(Math.random() * max);

}
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function changeBrightness(factor, sprite) {
var virtCanvas = document.createElement("canvas");
virtCanvas.width = 500;
virtCanvas.height = 500;
var context = virtCanvas.getContext("2d");
context.drawImage(sprite, 0, 0, 500, 500);
var imgData = context.getImageData(0, 0, 500, 500);
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = imgData.data[i] * factor;
imgData.data[i + 1] = imgData.data[i + 1] * factor;
imgData.data[i + 2] = imgData.data[i + 2] * factor; }
context.putImageData(imgData, 0, 0);
var spriteOutput = new Image();
spriteOutput.src = virtCanvas.toDataURL();
virtCanvas.remove();
return spriteOutput;}
function displayVictoryMess(moves) {
document.getElementById("moves").innerHTML = "You Moved " + moves + " Steps.";

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
18

toggleVisablity("Message-Container"); }
function toggleVisablity(id) {
if (document.getElementById(id).style.visibility == "visible") {
document.getElementById(id).style.visibility = "hidden";
} else {
document.getElementById(id).style.visibility = "visible";
}}
function Maze(Width, Height) {
var mazeMap;
var width = Width;
var height = Height;
var startCoord, endCoord;
var dirs = ["n", "s", "e", "w"];
var modDir = {
n: {
y: -1,
x: 0,
o: "s" },
s: {
y: 1,
x: 0,
o: "n” },
e: {
y: 0,
x: 1,
o: "w" },
w: {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
19

y: 0
x: -1,
o: "e" }
};
this.map = function() {
return mazeMap; };
this.startCoord = function() {
return startCoord;
};
this.endCoord = function() {
return endCoord;
};
function genMap() {
mazeMap = new Array(height);
for (y = 0; y < height; y++) {
mazeMap[y] = new Array(width);
for (x = 0; x < width; ++x) {
mazeMap[y][x] = {
n: false,
s: false,
e: false,
w: false,
visited: false,
priorPos: null
};
}} }
function defineMaze() {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
20

var isComp = false;

var move = false;
var cellsVisited = 1;
var numLoops = 0;
var maxLoops = 0;
var pos = {
x: 0,
y: 0 };
var numCells = width * height;
while (!isComp) {
move = false;
mazeMap[pos.x][pos.y].visited = true;
if (numLoops >= maxLoops) {
shuffle(dirs);
maxLoops = Math.round(rand(height / 8));
numLoops = 0; }
numLoops++;
for (index = 0; index < dirs.length; index++) {
var direction = dirs[index];
var nx = pos.x + modDir[direction].x;
var ny = pos.y + modDir[direction].y;
if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
//Check if the tile is already visited
if (!mazeMap[nx][ny].visited) {
mazeMap[pos.x][pos.y][direction] = true;
mazeMap[nx][ny][modDir[direction].o] = true;
mazeMap[nx][ny].priorPos = pos;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
21

pos = {
x: nx,
y: ny
};
cellsVisited++;
move = true;
break; }}}
if (!move) {
pos = mazeMap[pos.x][pos.y].priorPos; }
if (numCells == cellsVisited) {
isComp = true; } } }
function defineStartEnd() {
switch (rand(4)) {
case 0:
startCoord = {
x: 0,
y: 0
};
endCoord = {
x: height - 1,
y: width - 1
};
break;
case 1:
startCoord = {
x: 0,
y: width - 1

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
22

};
endCoord = {
x: height - 1,
y: 0
};
break;
case 2:
startCoord = {
x: height - 1,
y: 0
};
endCoord = {
x: 0,
y: width - 1
};
break;
case 3:
startCoord = {
x: height - 1,
y: width - 1
};
endCoord = {
x: 0,
y: 0
};
break;} }
genMap();

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
23

defineStartEnd();
defineMaze();}
function DrawMaze(Maze, ctx, cellsize, endSprite = null) {
var map = Maze.map();
var cellSize = cellsize;
var drawEndMethod;
ctx.lineWidth = cellSize / 40;
this.redrawMaze = function(size) {
cellSize = size;
ctx.lineWidth = cellSize / 50;
drawMap();
drawEndMethod();
};
function drawCell(xCord, yCord, cell) {
var x = xCord * cellSize;
var y = yCord * cellSize;
if (cell.n == false) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + cellSize, y);
ctx.stroke(); }
if (cell.s === false) {
ctx.beginPath();
ctx.moveTo(x, y + cellSize);
ctx.lineTo(x + cellSize, y + cellSize);
ctx.stroke(); }
if (cell.e === false) {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
24

ctx.beginPath();
ctx.moveTo(x + cellSize, y);
ctx.lineTo(x + cellSize, y + cellSize);
ctx.stroke() }
if (cell.w === false) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + cellSize);
ctx.stroke(); } }
function drawMap() {
for (x = 0; x < map.length; x++) {
for (y = 0; y < map[x].length; y++) {
drawCell(x, y, map[x][y]);
} } }
function drawEndFlag() {
var coord = Maze.endCoord();
var gridSize = 4;
var fraction = cellSize / gridSize - 2;
var colorSwap = true;
for (let y = 0; y < gridSize; y++) {
if (gridSize % 2 == 0) {
colorSwap = !colorSwap; }
for (let x = 0; x < gridSize; x++) {
ctx.beginPath();
ctx.rect(
coord.x * cellSize + x * fraction + 4.5,
coord.y * cellSize + y * fraction + 4.5,

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
25

fraction,
fraction );
if (colorSwap) {
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
} else {
ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; }
ctx.fill();
colorSwap = !colorSwap;} } }
function drawEndSprite() {
var offsetLeft = cellSize / 50;
var offsetRight = cellSize / 25;
var coord = Maze.endCoord();
ctx.drawImage(
endSprite,
2,
2,
endSprite.width,
endSprite.height,
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight
); }
function clear() {
var canvasSize = cellSize * map.length;
ctx.clearRect(0, 0, canvasSize, canvasSize); }
if (endSprite != null) {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
26

drawEndMethod = drawEndSprite;
} else {
drawEndMethod = drawEndFlag; }
clear();
drawMap();
drawEndMethod();}
function Player(maze, c, _cellsize, onComplete, sprite = null) {
var ctx = c.getContext("2d");
var drawSprite;
var moves = 0;
drawSprite = drawSpriteCircle;
if (sprite != null) {
drawSprite = drawSpriteImg; }
var player = this;
var map = maze.map();
var cellCoords = {
x: maze.startCoord().x,
y: maze.startCoord().y };
var cellSize = _cellsize;
var halfCellSize = cellSize / 2;
this.redrawPlayer = function(_cellsize) {
cellSize = _cellsize;
drawSpriteImg(cellCoords); };
function drawSpriteCircle(coord) {
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
27

(coord.x + 1) * cellSize - halfCellSize,

(coord.y + 1) * cellSize - halfCellSize,
halfCellSize - 2,
0,
2 * Math.PI );
ctx.fill();
if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
onComplete(moves);
player.unbindKeyDown(); } }
function drawSpriteImg(coord) {
var offsetLeft = cellSize / 50;
var offsetRight = cellSize / 25;
ctx.drawImage(
sprite,
0,
0,
sprite.width,
sprite.height,
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight );
if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
onComplete(moves);
player.unbindKeyDown(); }}
function removeSprite(coord) {
var offsetLeft = cellSize / 50;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
28

var offsetRight = cellSize / 25;

ctx.clearRect(
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight
); }
function check(e) {
var cell = map[cellCoords.x][cellCoords.y];
moves++;
switch (e.keyCode) {
case 65:
case 37: // west
if (cell.w == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x - 1,
y: cellCoords.y };
drawSprite(cellCoords);}
break;
case 87:
case 38: // north
if (cell.n == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x,
y: cellCoords.y - };

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
29

drawSprite(cellCoords);}
break;
case 68:
case 39: // east
if (cell.e == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x + 1,
y: cellCoords.y };
drawSprite(cellCoords) }
break;
case 83:
case 40: // south
if (cell.s == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x,
y: cellCoords.y + 1
};
drawSprite(cellCoords);
}
break; }}
this.bindKeyDown = function() {
window.addEventListener("keydown", check, false);
$("#view").swipe({
swipe: function(
event,

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
30

direction,
distance,
duration,
fingerCount,
fingerData
){
console.log(direction);
switch (direction) {
case "up":
check({
keyCode: 38
});
break;
case "down":
check({
keyCode: 40
});
break;
case "left":
check({
keyCode: 37
});
break;
case "right":
check({
keyCode: 39
});

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
31

break;
}
},
threshold: 0
});
};
this.unbindKeyDown = function() {
window.removeEventListener("keydown", check, false);
$("#view").swipe("destroy")};
drawSprite(maze.startCoord());
this.bindKeyDown();}
var mazeCanvas = document.getElementById("mazeCanvas");
var ctx = mazeCanvas.getContext("2d");
var sprite;
var finishSprite;
var maze, draw, player;
var cellSize;
var difficulty;
// sprite.src = 'media/sprite.png';
window.onload = function() {
let viewWidth = $("#view").width();
let viewHeight = $("#view").height();
if (viewHeight < viewWidth) {
ctx.canvas.width = viewHeight - viewHeight / 100;
ctx.canvas.height = viewHeight - viewHeight / 100;
} else {
ctx.canvas.width = viewWidth - viewWidth / 100;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
32

ctx.canvas.height = viewWidth - viewWidth / 100; }

//Load and edit sprites
var completeOne = false;
var completeTwo = false;
var isComplete = () => {
if(completeOne === true && completeTwo === true) {
console.log("Runs");
setTimeout(function(){
makeMaze();
}, 500); }; };
sprite = new Image();
sprite.src =
"https://image.ibb.co/dr1HZy/Pf_RWr3_X_Imgur.png" +
"?" +
new Date().getTime();
sprite.setAttribute("crossOrigin", " ");
sprite.onload = function() {
sprite = changeBrightness(1.2, sprite);
completeOne = true;
console.log(completeOne);
isComplete(); };
finishSprite = new Image();
finishSprite.src = "https://image.ibb.co/b9wqnJ/i_Q7m_U25_Imgur.png"+
"?" +
new Date().getTime();
finishSprite.setAttribute("crossOrigin", " ");
finishSprite.onload = function() {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
33

finishSprite = changeBrightness(1.1, finishSprite);

completeTwo = true;
console.log(completeTwo);
isComplete(); }}
window.onresize = function() {
let viewWidth = $("#view").width();
let viewHeight = $("#view").height();
if (viewHeight < viewWidth) {
ctx.canvas.width = viewHeight - viewHeight / 100;
ctx.canvas.height = viewHeight - viewHeight / 100;
} else {
ctx.canvas.width = viewWidth - viewWidth / 100;
ctx.canvas.height = viewWidth - viewWidth / 100; }
cellSize = mazeCanvas.width / difficulty;
if (player != null) {
draw.redrawMaze(cellSize);
player.redrawPlayer(cellSize); }};
function makeMaze() {
//document.getElementById("mazeCanvas").classList.add("border");
if (player != undefined) {
player.unbindKeyDown();
player = null; }
var e = document.getElementById("diffSelect");
difficulty = e.options[e.selectedIndex].value;
cellSize = mazeCanvas.width / difficulty;
maze = new Maze(difficulty, difficulty);
draw = new DrawMaze(maze, ctx, cellSize, finishSprite);

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
34

player = new Player(maze, mazeCanvas, cellSize, displayVictoryMess, sprite);

if (document.getElementById("mazeContainer").style.opacity < "100") {
document.getElementById("mazeContainer").style.opacity = "100"; }}

OUTPUT IMAGES

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
35

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
36

CHAPTER 4

CONCLUSION

A Maze game is not only used for entertainment purpose but also for improving reflexes and
presence of mind and many other motor functionings. HTML can embed programs written in a
scripting language such as JavaScript, which affects the behavior and content of web pages. The
inclusion of CSS defines the look and layout of content. The World Wide Web Consortium ,
former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the
use of CSS over explicit presentational HTML since 1997.The combination of the HTML, CSS
and JS has helped to achieve all the advantages together in creating a game.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game
37

This project helped to create a simple maze game made from HTML,CSS and JS code which
serves the purpose. We have used the HTML for creating the page and CSS for setting the
layouts. But the main building block of this project is the Javascript which makes the game
function and brings out the final output. As the final product, a fun and entertaining maze game
is created.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning