the solution path should not cross a wall - but just after the start - often (not always) the solution path appears to go through a "wall" that is part of a "radius" - the path does not "bump" off this line - it seems invisible to the solution being created. the charactor can be smaller than is currently is (perhaps 2/3 of the current size)
Here’s a clear, fool-proof circle maze prompt you can reuse whenever you want to generate code. I’ve structured it step-by-step so you don’t lose the design details:
Instructions for ChatGPT:
Create an interactive circle maze game in HTML/CSS/JavaScript with the following features:
The maze is circular with concentric rings.
The maze has 3, 4, 5, or 6 layers (selected by buttons).
The number of rings = layers + 1 (e.g. 4 layers → 5 rings).
Each layer must have:
One entry gap and one exit gap.
One barrier position placed between the two gaps on the longest path around the layer.
The player starts at the outer ring gap.
They are automatically dragged/traced through the maze toward the middle.
A rainbow-coloured trace shows the player’s path as they move inward.
When the player reaches the middle:
Show “CONGRATULATIONS!” in large rainbow gradient font.
Trigger a confetti explosion animation across the whole screen.
The maze should fill the maximum available height of the window.
On the right-hand side of the maze, display buttons:
“3 Layers”
“4 Layers”
“5 Layers”
“6 Layers”
Each button regenerates the maze with the selected number of layers.
The maze should look smooth, colourful, and fun/celebratory.
Animations (trace + confetti) should be fluid and responsive.
The code should be clean, modular, and reusable.
👉 Would you like me to also write a “ready-to-run code generation version” of this prompt (so you can drop it straight into ChatGPT to produce the full HTML/JS code), or do you just want to keep the design-spec prompt as is?
Absolutely — here’s the updated tidy prompt with your requested modification:
Prompt: Circular Maze Generator (Clean Version)
You are an expert front-end developer. Produce a single self-contained HTML file (HTML + CSS + JavaScript) that implements a line-based circular maze generator according to the specification below. Do not include extra commentary — only output the complete HTML file contents.
Layers & Rings
Provide 4 buttons on the right-hand side of the maze labeled: “3 Layers”, “4 Layers”, “5 Layers”, “6 Layers”.
When a button is clicked, regenerate the maze with that many layers.
The number of concentric circles = number of layers + 1 (one extra circle at the center).
Circles & Gaps
Draw all circles as thin lines (~2–4px), not filled bands.
Each circle must have exactly one gap, drawn as a missing segment.
The gap length must be double the radial barrier length for that circle.
Each gap must be positioned more than ±30° away from any radial barrier that touches that circle.
Radial Barriers
Randomly place radial barriers between adjacent circles.
Each barrier is a short line connecting the two adjacent circles.
Barriers are used to define the maze’s path and are the reference for gap placement.
Center Circle
The innermost circle radius = 20% of the largest circle radius.
Layout & Visuals
Canvas must use the maximum available height, horizontally centered.
Buttons remain fixed on the right-hand side (stacked vertically; responsive on narrow screens).
Circles are thin stroked lines, gaps visible, radial barriers drawn as lines.
Functionality
Selecting a button regenerates the maze for that number of layers.
All randomness should be consistent on each redraw.
No player animation required in this prompt — just the static maze with gaps and barriers.
Additional Requirements
Use vanilla JavaScript (no frameworks).
Ensure clean modular code, well-commented, and performant.
Include responsive CSS for mobile and desktop.
This version now ensures gaps are placed more than ±30° away from radial barriers, exactly as you specified.
Do you want me to generate the working HTML file from this updated prompt next?
Perfect — here’s a clean, updated prompt reflecting your latest changes:
Prompt: Circular Maze Generator with Uniform Gaps and Wider Barrier Distance
You are an expert front-end developer. Produce a single self-contained HTML file (HTML + CSS + JavaScript) that implements a line-based circular maze generator according to the specification below. Do not include extra commentary — only output the complete HTML file contents.
Layers & Rings
Provide 4 buttons on the right-hand side of the maze labeled: “3 Layers”, “4 Layers”, “5 Layers”, “6 Layers”.
When a button is clicked, regenerate the maze with that many layers.
The number of concentric circles = number of layers + 1 (one extra circle at the center).
Circles & Gaps
Draw all circles as thin lines (~2–4px), not filled bands.
Each circle, including the innermost circle, must have exactly one gap, drawn as a missing segment.
All gaps must be the same length, including the innermost circle gap.
The gap length must be double the radial barrier length for that circle.
Each gap must be positioned more than ±90° away from any radial barrier that touches that circle.
Radial Barriers
Randomly place radial barriers between adjacent circles.
Each barrier is a short line connecting the two adjacent circles.
Barriers are used to define the maze’s path and are the reference for gap placement.
Center Circle
The innermost circle radius = 20% of the largest circle radius, and it must also have a gap the same size as the others.
Layout & Visuals
Canvas must use the maximum available height, horizontally centered.
Buttons remain fixed on the right-hand side (stacked vertically; responsive on narrow screens).
Circles are thin stroked lines, gaps visible, radial barriers drawn as lines.
Functionality
Selecting a button regenerates the maze for that number of layers.
All randomness should be consistent on each redraw.
No player animation required in this prompt — just the static maze with gaps and barriers.
Additional Requirements
Use vanilla JavaScript (no frameworks).
Ensure clean modular code, well-commented, and performant.
Include responsive CSS for mobile and desktop.
If you want, I can generate the fully working HTML now with:
Innermost circle having a gap same size as all others
Gap placement more than ±90° away from radial barriers
Do you want me to do that next?
Ah — now I understand your exact logic! Let me rephrase it carefully, step by step, so we can write correct code:
Number them 1 to X (outermost = 1, innermost = X).
Each circle is a thin line (not a filled tire).
The innermost circle radius is 20% of the largest circle.
Start with the outermost circle (circle 1). Place a gap randomly.
Record the angular range: 90° before and 90° after the center of the gap.
For the next inner circle (circle 2):
Its gap center must be placed outside the ±90° range of the gap in the previous outer circle, i.e., on the opposite side of the circle.
This ensures gaps are never lining up.
Continue inward:
Each layer’s gap is placed outside the ±90° range of the gap in the layer just outside it.
The gap length is a linear distance, converted to an angular width per circle.
Once all gaps are set, each layer (between two circles) has two gap angles (inner and outer).
Compute the arc between the gaps.
Place the barrier exactly in the middle of that arc.
Barrier is fixed length, shorter than the arc so it doesn’t overlap the gaps.
No randomness — purely calculated from the two gap positions.
✅ This method ensures:
Gaps never line up.
Barriers are always placed correctly.
The maze is guaranteed solvable.
Works for any number of layers.
If you want, I can now write the full self-contained HTML code implementing this deterministic gap-and-barrier placement, so it finally behaves exactly as you intend.
Do you want me to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black and White Circular Maze Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect, useRef } = React;
function CircularMaze() {
const canvasRef = useRef(null);
const [layers, setLayers] = useState(5);
const [seed, setSeed] = useState(Date.now());
const gapWidth = 80;
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const centerX = width / 2;
const centerY = height / 2;
const maxRadius = Math.min(width, height) / 2 - 20;
const minRadiusFraction = 0.2;
const minRadius = maxRadius * minRadiusFraction;
// Clear canvas
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, width, height);
// Simple seeded random
let rngSeed = seed;
const random = () => {
rngSeed = (rngSeed * 9301 + 49297) % 233280;
return rngSeed / 233280;
};
const numCircles = layers + 1;
const radii = [];
for (let i = 0; i < numCircles; i++) {
const t = i / (numCircles - 1);
radii.push(minRadius + t * (maxRadius - minRadius));
}
// Store gaps: { radius, angle, angularWidth }
const gaps = [];
// Generate outermost gap randomly
const outerAngle = random() * 2 * Math.PI;
const outerAngularWidth = gapWidth / radii[numCircles - 1];
gaps.push({
radius: radii[numCircles - 1],
angle: outerAngle,
angularWidth: outerAngularWidth
});
// Generate inner gaps
for (let i = numCircles - 2; i >= 0; i--) {
const outerGap = gaps[gaps.length - 1];
const currentRadius = radii[i];
const currentAngularWidth = gapWidth / currentRadius;
// Place gap in opposite half
const outerMid = outerGap.angle;
let oppositeSide = outerMid + Math.PI;
if (oppositeSide > 2 * Math.PI) oppositeSide -= 2 * Math.PI;
// Random position within opposite half (±π/2 from opposite point)
const offset = (random() - 0.5) * Math.PI;
let newAngle = oppositeSide + offset;
if (newAngle < 0) newAngle += 2 * Math.PI;
if (newAngle > 2 * Math.PI) newAngle -= 2 * Math.PI;
gaps.push({
radius: currentRadius,
angle: newAngle,
angularWidth: currentAngularWidth
});
}
// Draw circles with gaps
ctx.strokeStyle = '#000000';
ctx.lineWidth = 3;
for (let i = 0; i < numCircles; i++) {
const gap = gaps[numCircles - 1 - i];
const startAngle = gap.angle + gap.angularWidth / 2;
const endAngle = gap.angle - gap.angularWidth / 2 + 2 * Math.PI;
ctx.beginPath();
ctx.arc(centerX, centerY, gap.radius, startAngle, endAngle);
ctx.stroke();
}
// Draw barriers
ctx.strokeStyle = '#000000';
ctx.lineWidth = 3;
for (let i = 0; i < layers; i++) {
const outerGap = gaps[i];
const innerGap = gaps[i + 1];
const outerRadius = radii[numCircles - 1 - i];
const innerRadius = radii[numCircles - 2 - i];
// Find midpoint between gaps
const outerMid = outerGap.angle;
const innerMid = innerGap.angle;
// Calculate the two possible arc midpoints
let arc1 = (outerMid + innerMid) / 2;
let arc2 = arc1 + Math.PI;
if (arc2 > 2 * Math.PI) arc2 -= 2 * Math.PI;
// Check which arc is valid (doesn't intersect gaps)
const isInGap = (angle, gap) => {
let gapStart = gap.angle - gap.angularWidth / 2;
let gapEnd = gap.angle + gap.angularWidth / 2;
// Normalize to [0, 2π]
while (gapStart < 0) gapStart += 2 * Math.PI;
while (gapEnd > 2 * Math.PI) gapEnd -= 2 * Math.PI;
while (angle < 0) angle += 2 * Math.PI;
while (angle > 2 * Math.PI) angle -= 2 * Math.PI;
if (gapStart < gapEnd) {
return angle >= gapStart && angle <= gapEnd;
} else {
return angle >= gapStart || angle <= gapEnd;
}
};
let barrierAngle;
if (!isInGap(arc1, outerGap) && !isInGap(arc1, innerGap)) {
barrierAngle = arc1;
} else {
barrierAngle = arc2;
}
// Draw barrier
const x1 = centerX + outerRadius * Math.cos(barrierAngle);
const y1 = centerY + outerRadius * Math.sin(barrierAngle);
const x2 = centerX + innerRadius * Math.cos(barrierAngle);
const y2 = centerY + innerRadius * Math.sin(barrierAngle);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
}, [layers, seed]);
return (
<div className="flex gap-6 p-8 bg-white min-h-screen">
<div className="flex-grow">
<canvas
ref={canvasRef}
width={700}
height={700}
className="border-4 border-black/50 rounded-lg shadow-2xl bg-white"
/>
</div>
<div className="flex flex-col gap-4 w-48">
<h1 className="text-2xl font-bold text-black">Circular Maze</h1>
<button
onClick={() => setLayers(3)}
className="bg-black text-white font-bold py-2 px-4 rounded-lg transition-all transform hover:scale-105"
>
3 Layers
</button>
<button
onClick={() => setLayers(4)}
className="bg-black text-white font-bold py-2 px-4 rounded-lg transition-all transform hover:scale-105"
>
4 Layers
</button>
<button
onClick={() => setLayers(5)}
className="bg-black text-white font-bold py-2 px-4 rounded-lg transition-all transform hover:scale-105"
>
5 Layers
</button>
<button
onClick={() => setLayers(6)}
className="bg-black text-white font-bold py-2 px-4 rounded-lg transition-all transform hover:scale-105"
>
6 Layers
</button>
<button
onClick={() => setSeed(Date.now())}
className="bg-black text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition-all transform hover:scale-105"
>
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 21H3v-5"/></svg>
New Maze
</button>
<div className="text-sm text-black">
<p className="mb-2"><span className="font-bold">Black rings:</span> Concentric circles with one gap each</p>
<p><span className="font-bold">Black barriers:</span> Radial lines between layers</p>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CircularMaze />);
</script>
</body>
</html>