Maze Game 1

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
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 .

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 8

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.

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.

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 9

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>
<div id="menu">
<div class="custom-select">
<select id="diffSelect">
<option value="10">Easy</option>
<option value="15">Medium</option>

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 10

<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;
@mixin transition {
transition-property: background-color opacity;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 11

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);
margin: auto;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 12

}
}

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);
}
&:active {
background-color: black;
}
&:focus {
outline: none;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 13

}
}
.custom-select {
display: inline-block;
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/
9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEAT
lgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16Ltn
DELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAA
ElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 125px center;
}
}
#Message-Container {
visibility: hidden;
color: white;
display: block;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 14

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;
height: 65px;
box-sizing: border-box;
h1 {
margin: 0;
margin-bottom: 10px;
font-weight: 600;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 15

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;
bottom: 0;
width: 100vw;
height: 100vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 16

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) {
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]];

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 17

}
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.";
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";

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 18

}}
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: {
y: 0
x: -1,
o: "e" }
};
this.map = function() {
return mazeMap; };

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 19

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() {
var isComp = false;
var move = false;
var cellsVisited = 1;
var numLoops = 0;
var maxLoops = 0;
var pos = {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 20

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;
pos = {
x: nx,
y: ny
};
cellsVisited++;
move = true;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 21

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
};
endCoord = {
x: height - 1,
y: 0
};
break;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 22

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();
defineStartEnd();
defineMaze();}
function DrawMaze(Maze, ctx, cellsize, endSprite = null) {
var map = Maze.map();
var cellSize = cellsize;
var drawEndMethod;

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 23

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) {
ctx.beginPath();
ctx.moveTo(x + cellSize, y);
ctx.lineTo(x + cellSize, y + cellSize);
ctx.stroke() }
if (cell.w === false) {
ctx.beginPath();

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 24

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,
fraction,
fraction );
if (colorSwap) {
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
} else {
ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; }

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 25

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) {
drawEndMethod = drawEndSprite;
} else {
drawEndMethod = drawEndFlag; }
clear();
drawMap();
drawEndMethod();}

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 26

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(
(coord.x + 1) * cellSize - halfCellSize,
(coord.y + 1) * cellSize - halfCellSize,
halfCellSize - 2,
0,
2 * Math.PI );
ctx.fill();

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 27

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;
var offsetRight = cellSize / 25;
ctx.clearRect(
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 28

); }
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 - };
drawSprite(cellCoords);}
break;
case 68:
case 39: // east
if (cell.e == true) {
removeSprite(cellCoords);

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 29

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,
direction,
distance,
duration,
fingerCount,
fingerData
){

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 30

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
});
break;
}
},
threshold: 0
});
};

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 31

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;
ctx.canvas.height = viewWidth - viewWidth / 100; }
//Load and edit sprites
var completeOne = false;
var completeTwo = false;
var isComplete = () => {
if(completeOne === true && completeTwo === true) {

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 32

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() {
finishSprite = changeBrightness(1.1, finishSprite);
completeTwo = true;
console.log(completeTwo);
isComplete(); }}
window.onresize = function() {
let viewWidth = $("#view").width();

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 33

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);
player = new Player(maze, mazeCanvas, cellSize, displayVictoryMess, sprite);
if (document.getElementById("mazeContainer").style.opacity < "100") {
document.getElementById("mazeContainer").style.opacity = "100"; }}

Rajalakshmi Engineering College Artificial Intelligence and Machine Learning

Maze Game 34

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.

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