GameDev 1
Ein Maze-Game (Labyrinthspiel) in JavaScript zu erstellen, ist ein tolles Projekt, um grundlegende Programmierkenntnisse und die Arbeit mit dem DOM zu erlernen. Hier ist eine Schritt-für-Schritt-Anleitung, um ein einfaches Maze-Game zu erstellen:
Schritt 1: HTML-Grundstruktur
Erstelle eine HTML-Datei, die das Spielfeld und die notwendigen Elemente enthält.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Game</title>
<style>
#gameBoard {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-template-rows: repeat(10, 30px);
gap: 2px;
}
.cell {
width: 30px;
height: 30px;
background-color: lightgrey;
}
.wall {
background-color: black;
}
.start {
background-color: green;
}
.end {
background-color: red;
}
.player {
background-color: blue;
}
</style>
</head>
<body>
<div id="gameBoard"></div>
<script src="maze.js"></script>
</body>
</html>
Schritt 2: Maze-Layout definieren
Definiere das Layout des Labyrinths in einer 2D-Array-Form. Speichere diese Daten in einer JavaScript-Datei (maze.js
).
const maze = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 1, 1, 1, 1, 1, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 1, 0, 0, 0, 1],
[1, 1, 1, 1, 0, 1, 1, 1, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
const start = { x: 1, y: 1 };
const end = { x: 8, y: 8 };
let player = { ...start };
function createBoard() {
const gameBoard = document.getElementById('gameBoard');
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');
if (maze[y][x] === 1) {
cell.classList.add('wall');
}
if (x === start.x && y === start.y) {
cell.classList.add('start');
}
if (x === end.x && y === end.y) {
cell.classList.add('end');
}
gameBoard.appendChild(cell);
}
}
updatePlayerPosition();
}
function updatePlayerPosition() {
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => cell.classList.remove('player'));
const playerCell = document.querySelector(`#gameBoard > div:nth-child(${player.y * 10 + player.x + 1})`);
playerCell.classList.add('player');
}
function movePlayer(dx, dy) {
const newX = player.x + dx;
const newY = player.y + dy;
if (maze[newY][newX] !== 1) {
player.x = newX;
player.y = newY;
updatePlayerPosition();
if (newX === end.x && newY === end.y) {
alert('You win!');
}
}
}
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
movePlayer(0, -1);
break;
case 'ArrowDown':
movePlayer(0, 1);
break;
case 'ArrowLeft':
movePlayer(-1, 0);
break;
case 'ArrowRight':
movePlayer(1, 0);
break;
}
});
createBoard();
Erklärung der Schritte
-
HTML-Grundstruktur:
- Ein
div
-Element mit der IDgameBoard
dient als Container für das Spielfeld. - Ein eingebettetes Stylesheet definiert das Layout und die Farben der Zellen (Spieler, Wände, Start, Ziel).
- Ein
-
JavaScript:
- Das
maze
-Array definiert das Layout des Labyrinths.1
steht für Wände,0
für freie Wege. start
undend
definieren die Start- und Endpositionen des Spielers.- Die Funktion
createBoard
erzeugt das Spielfeld und fügt die entsprechenden Klassen zu den Zellen hinzu. updatePlayerPosition
aktualisiert die Position des Spielers auf dem Spielfeld.movePlayer
bewegt den Spieler in die gewünschte Richtung und prüft, ob die Bewegung möglich ist.- Ein
keydown
-Event-Listener ermöglicht die Steuerung des Spielers mit den Pfeiltasten.
- Das
Weitere Ideen zur Erweiterung
- Hinzufügen von Hindernissen oder beweglichen Elementen.
- Implementierung eines Timer-Systems.
- Erstellung verschiedener Level mit zunehmendem Schwierigkeitsgrad.
- Hinzufügen von Soundeffekten und Animationen.
Dieses Grundgerüst bietet eine solide Basis, auf der du weiter aufbauen und das Spiel nach Belieben erweitern kannst. Viel Spaß beim Programmieren!
Das Generieren von Maps (Labyrinthe) für ein Maze-Spiel kann auf verschiedene Weisen erfolgen, je nach gewünschtem Schwierigkeitsgrad und Stil des Spiels. Hier sind einige der häufigsten und effektivsten Methoden zur Maze-Generierung:
1. Rekursive Tiefensuche (Depth-First Search, DFS)
Die rekursive Tiefensuche ist eine einfache und effektive Methode zur Generierung von Labyrinthen. Sie funktioniert durch das Backtracking-Verfahren.
function generateMaze(width, height) {
const maze = Array.from({ length: height }, () => Array(width).fill(1));
const stack = [];
const startX = 1;
const startY = 1;
maze[startY][startX] = 0;
stack.push({ x: startX, y: startY });
const directions = [
{ x: 0, y: -2 }, // up
{ x: 2, y: 0 }, // right
{ x: 0, y: 2 }, // down
{ x: -2, y: 0 } // left
];
while (stack.length > 0) {
const current = stack.pop();
const shuffledDirections = directions.sort(() => Math.random() - 0.5);
for (const direction of shuffledDirections) {
const nx = current.x + direction.x;
const ny = current.y + direction.y;
if (nx > 0 && ny > 0 && nx < width - 1 && ny < height - 1 && maze[ny][nx] === 1) {
maze[ny][nx] = 0;
maze[current.y + direction.y / 2][current.x + direction.x / 2] = 0;
stack.push({ x: nx, y: ny });
}
}
}
return maze;
}
const maze = generateMaze(21, 21); // Beispiel für ein 21x21 Maze
console.log(maze);