Concept:
Sketch Link: p5.js Web Editor | Labyrinth Final (p5js.org)
Inspired by the Greek myth of Theseus, who navigated the labyrinth to defeat the Minotaur, I envisioned a game that captures the thrill of navigating a maze to reach a goal. In this two-player game, only one can survive the labyrinth. Players must race to the safe zone at the center of the maze while avoiding touching the walls of the maze. The first player to reach the center wins, while the other faces death. Alternatively, if a player touches the walls at any point, they are immediately eliminated, granting victory to their opponent by default. This intense competition fosters a sense of urgency and strategy as players navigate the ever-changing labyrinth.
Design features:
- Dynamic Maze Generation: Each time a new game begins, the maze layout changes, ensuring that no two playthroughs are the same. This feature keeps the gameplay fresh, challenging players to adapt to new environments every time they enter the labyrinth.
- Boundary Enforcement: Players are confined to the game canvas, ensuring they stay within the limits of the maze. Exiting the bounds is not an option.
- Customizable Player Names: Players can personalize their experience by entering their own names before starting a match. For those who prefer to jump right into the action, the game also offers default character names, maintaining a smooth and accessible start.
- Animated Player Sprites and Movement Freedom: Each player is represented by a sprite that shows movement animations. The game allows Movement in 8 directions.
- Fullscreen Mode: For a more immersive experience, players can opt to play the game in Fullscreen mode.
- Collision Detection: The game includes collision detection, where touching the maze walls results in instant disqualification. Players must carefully navigate the labyrinth, avoiding any contact with the walls or face elimination.
Process:
The most challenging and time-consuming aspect of this game was designing the maze. The logic used to ensure that a new maze is generated with every iteration involves several key steps:
Maze Initialization: The process begins by drawing six concentric white circles at the center of a black canvas, with each subsequent circle having a radius that decreases by 60pt. This creates the foundational layout of the maze.
let numCircles = 6; // Number of white circles in the maze
let spacing = 50; // Spacing between circles
// Loop to draw white circles
for (let i = 0; i < numCircles; i++) {
let radius = (i + 1) * spacing; // Calculate radius for each circle
noFill();
stroke(255);
strokeWeight(2);
ellipse(width / 2, height / 2, radius * 2, radius * 2); // Draw each circle
}
Black Circle Placement: Black circles are then placed randomly on top of the white circles. The innermost black circle is erased to create a clear entrance. The number of black circles on each white circle increases as we move outward, adding complexity to the maze design.
// Function to generate positions for the black circles
function generateBlackCircles() {
// Loop through each circle in the maze
for (let i = 0; i < numCircles; i++) {
let radius = (numCircles - i) * spacing; // Start with the outermost circle first
let maxBlackCircles = numCircles - i; // Outermost gets 6 circles, innermost gets 1
// Generate random positions for the black circles
for (let j = 0; j < maxBlackCircles; j++) {
let validPosition = false;
let angle;
// Keep generating a random angle until it is far enough from other circles
while (!validPosition) {
angle = random(TWO_PI); // Generate a random angle
validPosition = true; // Assume it's valid
// Check if the angle is far enough from previously placed angles
for (let k = 0; k < placedAngles.length; k++) {
let angleDifference = abs(angle - placedAngles[k]);
angleDifference = min(angleDifference, TWO_PI - angleDifference);
if (angleDifference < minAngleDifference) {
validPosition = false; // Too close, generate again
break;
}
}
}
// Calculate the coordinates and store them
let x = width / 2 + radius * cos(angle);
let y = height / 2 + radius * sin(angle);
blackCircles.push({ x: x, y: y, angle: angle, radius: radius });
placedAngles.push(angle); // Save the angle for future spacing
}
}
}
Collision Detection for Black Circles: An overlap function checks to ensure that no two black circles spawn on top of one another. This is crucial for maintaining the integrity of the maze entrances.
// Function to check if the midpoint of a line is overlapping with a black circle
function isOverlapping(circle, x1, y1, x2, y2) {
let { midX, midY } = calculateMidpoint(x1, y1, x2, y2);
let distance = dist(midX, midY, circle.x, circle.y);
return distance < circleRadius; // Return true if overlapping
}
Maze Line Generation: For each black circle, a white maze line is generated that is perpendicular to the white circles. Another overlap function checks whether the maze lines overlap with the black circles, adjusting their positions as necessary.
// Function to draw the lines from the edge of the black circle
function drawMazeLines() {
stroke(255); // Set the stroke color to white
for (let i = 1; i < blackCircles.length - 2; i++) {
let circle = blackCircles[i];
// Calculate starting and ending points for the line
let startX = circle.x - (50 * cos(circle.angle));
let startY = circle.y - (50 * sin(circle.angle));
let endX = startX + (50 * cos(circle.angle));
let endY = startY + (50 * sin(circle.angle));
// Check for overlap and adjust rotation if necessary
while (isAnyCircleOverlapping(startX, startY, endX, endY)) {
// Rotate the line around the origin
let startVector = createVector(startX - width / 2, startY - height / 2);
let endVector = createVector(endX - width / 2, endY - height / 2);
startVector.rotate(rotationStep);
endVector.rotate(rotationStep);
// Update the coordinates
startX = startVector.x + width / 2;
startY = startVector.y + height / 2;
endX = endVector.x + width / 2;
endY = endVector.y + height / 2;
}
line(startX, startY, endX, endY); // Draw the line
}
}
Test Sketch:
Final Additions:
- Player Integration: I introduced two player characters to the canvas. Each player was assigned different movement keys and given 8 degrees of movement as players needed to utilize their movement skills effectively while avoiding collisions with the maze walls.
- Collision Detection: With the players in place, I implemented collision detection between the players and the maze structure.
- Game States: I established various game states to manage different phases of the gameplay, such as the start screen, gameplay, and game over conditions. This structure allowed for a more organized flow and made it easier to implement additional features like restarting the game.
- Player Name Input: To personalize the gaming experience further, I incorporated a mechanism for players to input their names before starting the game. Additionally, I created default names for the characters, ensuring that players could quickly jump into the action without needing to set their names.
- Sprite Movement: I dedicated time to separately test the sprite sheet movement in a different sketch to ensure smooth animations. Once the movement was working perfectly, I replaced the placeholder player shapes with the finalized sprites, enhancing the visual appeal and immersion of the game.
- Audio and Visual Enhancements: Finally, I added background music to create an engaging atmosphere, along with a game-ending video to show player death. Additionally, I included background image to the game screen.
Final Sketch:
Future Improvements:
One significant challenge I encountered with the game was implementing the fullscreen option. Initially, the maze generation logic relied on the canvas being a perfect square, which restricted its adaptability. To address this, I had to modify the maze generation logic to allow for resizing the canvas.
However, this issue remains partially unresolved. While the canvas no longer needs to be a perfect square, it still cannot be dynamically adjusted for a truly responsive fullscreen mode. To accommodate this limitation, I hardcoded a larger overall canvas size of 1500 by 800 pixels. As a result, the game can only be played in fullscreen, which may detract from the user experience on smaller screens or varying aspect ratios.
Moving forward, I aim to refine the canvas resizing capabilities to enable a fully responsive fullscreen mode.