l202/site/maze_game.php
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--px: 20px;
--border: 1px;
}
button {
border: 1px solid rgb(0, 0, 0);
background-color: #ffffff;
padding: 10px;
margin: 5px;
cursor: pointer;
}
.maze-container {
display: flex;
flex-direction: column;
align-items: center;
}
.maze-row {
display: flex;
}
.maze-cell {
width: var(--px);
height: var(--px);
border: var(--border) solid rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
.player {
background-color: #ff0000;
}
.wall {
background-color: #607d8b;
}
.exit {
background-color: #00ff40;
}
.obstacle {
background-color: #795548;
}
.controls {
margin-top: 10px;
}
.controls span {
margin-right: 10px;
}
button {
padding: 5px 10px;
}
</style>
<script>
window.onload = main
function main(){
document.getElementById("knop1").onclick = knop1
document.getElementById("knop2_1").onclick = knop2_1
document.getElementById("knop3").onclick = knop3
document.getElementById("knop4").onclick = knop4
document.getElementById("knop5").onclick = knop5
var btn = document.getElementById('knop2_1');
var btn1 = document.getElementById('knop3');
var btn2 = document.getElementById('knop4');
var btn3 = document.getElementById('knop5');
var btn4 = document.getElementById('knop1');
window.onresize = function(){
if (window.innerWidth <= 1240) {
btn.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn4.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn4.style.width = 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = 100 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn1.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn1.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn2.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn2.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn3.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn3.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
}
}
function main_page() {
alert("this is the main page")
}
function knop1() {
}
function knop2_1() {
window.location.href = "home_page.php";
}
function knop3() {
window.location.href = "guess_game.php";
}
function knop4() {
window.location.href = "maze_game.php";
}
function knop5() {
window.location.href = "snake_game.php";
}
setTimeout(function () {
var knop = document.getElementById("knop1");
knop.style.backgroundImage = "url('kaas.jpg')";
knop.style.backgroundRepeat = "no-repeat";
}, 1);
</script>
</head>
<body id="body">
<button id="knop1" style="width: 100px; height: 100px">os & flix</button>
<button id="knop2_1" style="width: 300px; height: 100px">home page</button>
<button id="knop3" style="width: 300px; height: 100px;">guess the number</button>
<button id="knop4" style="width: 300px; height: 100px; background-color: black; color: white;">maze</button>
<button id="knop5" style="width: 300px; height: 100px">snake</button>
<p></p>
<div class="maze-container">
<h1>Maze Game</h1>
<div id="maze"></div>
<div class="controls">
<span id="keys" style="display: none;">Use Arrow keys to move</span>
<button onclick="maze2()" id="reset" style="display: none;">Reset</button>
<h3 id="hola">select a difficulty from 1 to 3</h3>
<input type="text" id="getallen" name="getallen" placeholder="Enter here">
<button onclick="start2()" id="choose">choose</button>
</div>
</div>
<script>
var hoeveel = 0
var r = document.querySelector(':root');
function start2() {
var waarde = document.getElementById("getallen").value;
if (waarde == 1) {
r.style.setProperty('--px', '40px');
hoeveel = 11
var inputElement = document.getElementById("getallen");
inputElement.style.display = "none";
var inputElement2 = document.getElementById("hola");
inputElement2.style.display = "none";
var inputElement3 = document.getElementById("choose");
inputElement3.style.display = "none";
var keys = document.getElementById("keys");
keys.style.display = "initial";
var reset = document.getElementById("reset");
reset.style.display = "initial";
maze2()
} else if (waarde == 2) {
r.style.setProperty('--px', '20px');
hoeveel = 21
var inputElement = document.getElementById("getallen");
inputElement.style.display = "none";
var inputElement2 = document.getElementById("hola");
inputElement2.style.display = "none";
var inputElement3 = document.getElementById("choose");
inputElement3.style.display = "none";
var keys = document.getElementById("keys");
keys.style.display = "initial";
var reset = document.getElementById("reset");
reset.style.display = "initial";
maze2()
} else if (waarde == 3) {
r.style.setProperty('--px', '10px');
hoeveel = 41
var inputElement = document.getElementById("getallen");
inputElement.style.display = "none";
var inputElement2 = document.getElementById("hola");
inputElement2.style.display = "none";
var inputElement3 = document.getElementById("choose");
inputElement3.style.display = "none";
var keys = document.getElementById("keys");
keys.style.display = "initial";
var reset = document.getElementById("reset");
reset.style.display = "initial";
maze2()
} else if (waarde == "impossible") {
r.style.setProperty('--border', '0px');
r.style.setProperty('--px', '5px');
hoeveel = 91
var inputElement = document.getElementById("getallen");
inputElement.style.display = "none";
var inputElement2 = document.getElementById("hola");
inputElement2.style.display = "none";
var inputElement3 = document.getElementById("choose");
inputElement3.style.display = "none";
var keys = document.getElementById("keys");
keys.style.display = "initial";
var reset = document.getElementById("reset");
reset.style.display = "initial";
maze2()
} else {
alert("dan niet")
}
}
function maze2() {
// Generate a random maze
function generateMaze(width, height) {
const maze = [];
const directions = [
{ dx: -1, dy: 0 }, // Left
{ dx: 1, dy: 0 }, // Right
{ dx: 0, dy: -1 }, // Up
{ dx: 0, dy: 1 } // Down
];
// Initialize the maze with walls
for (let y = 0; y < height; y++) {
const row = [];
for (let x = 0; x < width; x++) {
row.push('#');
}
maze.push(row);
}
// Recursive function to create paths
function createPath(x, y) {
maze[y][x] = ' ';
// Shuffle the directions array randomly
const shuffledDirections = directions.sort(() => Math.random() - 0.5);
for (const { dx, dy } of shuffledDirections) {
const nextX = x + dx * 2;
const nextY = y + dy * 2;
if (nextX >= 0 && nextX < width && nextY >= 0 && nextY < height && maze[nextY][nextX] === '#') {
maze[y + dy][x + dx] = ' ';
createPath(nextX, nextY);
}
}
}
createPath(1, 1); // Start creating paths from (1, 1)
maze[height - 2][width - 2] = 'E'; // Set the exit at (width - 2, height - 2)
return maze;
}
// Global variables
const mazeWidth = hoeveel;
const mazeHeight = hoeveel;
let maze;
let playerX;
let playerY;
// Event listener for keyboard arrows
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
movePlayer(0, -1);
} else if (event.key === 'ArrowDown') {
movePlayer(0, 1);
} else if (event.key === 'ArrowLeft') {
movePlayer(-1, 0);
} else if (event.key === 'ArrowRight') {
movePlayer(1, 0);
}
});
// Initialize the game
function initializeGame() {
maze = generateMaze(mazeWidth, mazeHeight);
playerX = 1;
playerY = 1;
displayMaze();
}
// Move the player
function movePlayer(dx, dy) {
const newPlayerX = playerX + dx;
const newPlayerY = playerY + dy;
// Check if the new position is within the maze and not a wall
if (newPlayerX >= 0 && newPlayerX < mazeWidth && newPlayerY >= 0 && newPlayerY < mazeHeight && maze[newPlayerY][newPlayerX] !== '#') {
playerX = newPlayerX;
playerY = newPlayerY;
// Check if the player reached the exit
if (maze[playerY][playerX] === 'E') {
alert('Congratulations! You reached the exit.');
resetGame();
}
displayMaze();
} else {
resetGame(); // Reset the game if the new position is a wall
}
}
// Display the maze on the screen
function displayMaze() {
const mazeContainer = document.getElementById('maze');
mazeContainer.innerHTML = '';
for (let y = 0; y < mazeHeight; y++) {
const row = document.createElement('div');
row.classList.add('maze-row');
for (let x = 0; x < mazeWidth; x++) {
const cell = document.createElement('div');
cell.classList.add('maze-cell');
if (x === playerX && y === playerY) {
cell.classList.add('player');
} else if (maze[y][x] === '#') {
cell.classList.add('wall');
} else if (maze[y][x] === 'E') {
cell.classList.add('exit');
} else if (maze[y][x] === 'O') {
cell.classList.add('obstacle');
}
row.appendChild(cell);
}
mazeContainer.appendChild(row);
}
}
// Reset the game
function resetGame() {
initializeGame();
}
// Initialize the game
initializeGame();
}
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
start2()
}
});
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse