Please start the webcam controller before beginning!
```
### style.css
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html, body {
width: 75vw;
height: 100vh;
position: fixed;
padding: 0;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
font-family: 'Poppins', sans-serif;
}
#view {
margin-top: 30px;
}
#mazeContainer {
top: 100px;
opacity: 0;
display: inline-block;
margin: auto;
border-radius: 10px;
}
#mazeContainer #mazeCanvas {
margin: 0;
display: block;
border: solid 2px black;
height: 400px;
}
input, select {
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;
}
input:hover, select:hover {
background-color: rgba(0, 0, 0, 0.70);
}
input:active, select:active {
background-color: black;
}
input:focus, select:focus {
outline: none;
}
.custom-select {
display: inline-block;
}
.custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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;
background-color: rgba(0, 0, 0, 0.30);
z-index: 1;
}
#Message-Container #message {
width: 300px;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
#page {
text-align: center;
height: auto;
width: auto;
margin: auto;
}
#page #menu {
margin: auto;
padding: 10px;
height: 65px;
box-sizing: border-box;
}
#page #menu h1 {
margin: 0;
margin-bottom: 10px;
font-weight: 600;
font-size: 3.2rem;
}
#page #view {
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
}
.border {
border: 10px black solid;
border-radius: 10px;
}
#instructions {
margin-top: 400px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
input, select {
width: 120px;
}
}
```
### script.js
```javascript
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]];
}
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";
}
}
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;
};
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 = {
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) {
//Carve through walls from this tile to next
mazeMap[pos.x][pos.y][direction] = true;
mazeMap[nx][ny][modDir[direction].o] = true;
//Set Currentcell as next cells Prior visited
mazeMap[nx][ny].priorPos = pos;
//Update Cell position to newly visited location
pos = {
x: nx,
y: ny
};
cellsVisited++;
//Recursively call this method on the next tile
move = true;
break;
}
}
}
if (!move) {
// If it failed to find a direction,
// move the current position back to the prior cell and Recall the method.
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;
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;
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();
ctx.moveTo(x, y);
ctx.lineTo(x, y + cellSize);
ctx.stroke();
}
}
function drawMap() {
for (x = 0; x < map.length; x+
[truncated — 15468 more characters]
```