Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
const mazeGrid = [
[1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ,1 ,1, 1, 1,],
[1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0 ,0 ,0, 0, 1,],
[1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1 ,1 ,1, 1, 1,],
[1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0 ,0 ,1, 0, 1,],
[1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1 ,1 ,1, 0, 1,],
[1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0 ,1 ,0, 0, 1,],
[1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0 ,0 ,0, 1, 1,],
[1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1 ,1 ,0, 0, 1,],
[1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0 ,1 ,0, 1, 1,],
[1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1 ,1 ,0, 0, 1,],
[1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0 ,1 ,1, 0, 1,],
[1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0 ,0 ,1, 0, 1,],
[1, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1 ,0 ,1, 1, 1,],
[1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ,1 ,1, 0, 1,],
[1, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1 ,0 ,0, 0, 1,],
[1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1 ,0 ,1, 0, 1,],
[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1 ,1 ,1, 1, 1,],
[1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0 ,0 ,0, 0, 1,],
[1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1 ,1 ,0, 1, 1,],
[1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0 ,1 ,1, 1, 1,],
[1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0 ,0 ,0, 1, 1,],
[1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0 ,1 ,0, 0, 1,],
[1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0 ,1 ,0, 1, 1,],
[1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1 ,1 ,0, 0, 1,],
[1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0 ,1 ,1, 0, 1,],
[1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1 ,1 ,1, 1, 1,],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0 ,0 ,0, 0, 0,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ,1 ,1, 1, 1,],
];
document.querySelectorAll
const mazeContainer = document.getElementById("maze-container");
const mazeCanvas = document.getElementById("maze-canvas");
document.getElementById("restart-button").addEventListener("click", restartGame);
const context = mazeCanvas.getContext("2d");
const keyPosition = { row: 0, col: 1 };
const homePosition = { row: 26, col: 27 };
const cellSize = 20;
let steps = 0;
const img = new Image();
img.src = "key.png";
const img2 = new Image();
img2.src = "home.png";
function GameStart() {
updateKeyPosition();
}
function updateKeyPosition() {
context.clearRect(0, 0, mazeCanvas.width, mazeCanvas.height);
drawMaze();
context.drawImage(
img,
keyPosition.col * cellSize,
keyPosition.row * cellSize,
cellSize,
cellSize
);
context.drawImage(
img2,
homePosition.col * cellSize,
homePosition.row * cellSize,
cellSize,
cellSize
);
checkWin();
}
let showWalls = false;
function drawMaze() {
mazeGrid.forEach((row, rowIndex) => {
row.forEach((cell, colIndex) => {
if (cell === 1 && showWalls && !isMazeCompleted()) {
context.fillStyle = "#000";
} else {
context.fillStyle = "#fff";
}
// schakel de code hieronder uit om de muren van het doolhof te verbergen
// context.fillStyle = cell === 1 ? "#000" : "#fff";
context.fillRect(
colIndex * cellSize,
rowIndex * cellSize,
cellSize,
cellSize
);
});
});
}
function isMazeCompleted() {
for (let i = 0; i < mazeGrid.length; i++) {
for (let j = 0; j < mazeGrid[0].length; j++) {
if (mazeGrid[i][j] === 0) {
return false;
}
}
}
return true;
}
function toggleWalls() {
showWalls = !showWalls;
updateKeyPosition();
}
function moveKey(direction) {
let newRow = keyPosition.row;
let newCol = keyPosition.col;
if (direction === "up") {
newRow -= 1;
} else if (direction === "down") {
newRow += 1;
} else if (direction === "left") {
newCol -= 1;
} else if (direction === "right") {
newCol += 1;
}
if (
newRow >= 0 &&
newRow < mazeGrid.length &&
newCol >= 0 &&
newCol < mazeGrid[0].length &&
mazeGrid[newRow][newCol] === 0
) {
keyPosition.row = newRow;
keyPosition.col = newCol;
steps++;
updateKeyPosition();
}
}
document.addEventListener("keydown", (event) => {
switch (event.key) {
case "ArrowUp":
moveKey("up");
break;
case "ArrowDown":
moveKey("down");
break;
case "ArrowLeft":
moveKey("left");
break;
case "ArrowRight":
moveKey("right");
break;
default:
break;
}
});
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
let highscore = getCookie("highscore") || 0;
function updateHighscore() {
const highscoreElement = document.getElementById("highscore");
highscoreElement.textContent = `${highscore}`;
}
function updateStepCounter() {
const stepCounterElement = document.getElementById("step-counter");
stepCounterElement.textContent = `${steps}`;
}
function checkWin() {
if (
keyPosition.row === homePosition.row &&
keyPosition.col === homePosition.col
) {
if (steps < highscore || highscore === 0) {
highscore = steps;
setCookie("highscore", highscore, 365);
updateHighscore();
}
context.clearRect(0, 0, mazeCanvas.width, mazeCanvas.height);
context.font = "30px Arial";
context.fillStyle = "black";
const textX = (homePosition.col + 0.5) * cellSize;
const textY = (homePosition.row + 0.5) * cellSize;
context.fillText("Gefeliciteerd!", 150, 100);
context.fillText(`Je hebt ${steps} stappen verplaatst`, 70, 200);
context.fillText(`Highscore: ${highscore} stappen`, 100, 300);
document.body.style.backgroundColor = "whitesmoke";
}
}
function restartGame() {
keyPosition.row = 0;
keyPosition.col = 1;
steps = 0;
updateKeyPosition();
}