Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
63 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Certainly! Here's an example of code for an interactive 3D maze using HTML, CSS, and JavaScript. It includes a restart button that only affects the user who presses it. The design is kept simple, modern, and minimalist.
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Maze Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maze-container">
<div id="player" class="player"></div>
<div id="exit" class="exit"></div>
</div>
<button id="restart-button">Restart Game</button>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
margin: 0;
padding: 0;
perspective: 800px;
perspective-origin: 50% 50%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
}
.maze-container {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(20deg) rotateY(-20deg);
}
.player {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: #FF5722;
transform: translateZ(10px);
}
.exit {
position: absolute;
top: 280px;
left: 280px;
width: 20px;
height: 20px;
background-color: #4CAF50;
transform: translateZ(10px);
}
button {
margin-top: 10px;
}
button:focus {
outline: none;
}
```
JavaScript (script.js):
```javascript
const player = document.getElementById("player");
const restartButton = document.getElementById("restart-button");
let isPlayerMoving = false;
document.addEventListener("keydown", (event) => {
if (!isPlayerMoving) {
isPlayerMoving = true;
movePlayer(event.key);
}
});
restartButton.addEventListener("click", () => {
player.style.transform = "translateZ(10px)";
});
function movePlayer(direction) {
const currentPosition = parseFloat(player.style.transform.match(/-?\d+/)[0]);
if (direction === "ArrowUp") {
player.style.transform = `translateZ(${currentPosition - 20}px)`;
} else if (direction === "ArrowDown") {
player.style.transform = `translateZ(${currentPosition + 20}px)`;
}
setTimeout(() => {
isPlayerMoving = false;
checkWin();
}, 400);
}
function checkWin() {
const playerZPosition = parseFloat(player.style.transform.match(/-?\d+/)[0]);
const exitZPosition = parseFloat(exit.style.transform.match(/-?\d+/)[0]);
if (playerZPosition === exitZPosition) {
alert("Congratulations! You reached the exit!");
}
}
```
Make sure to save the HTML code in a file named `index.html`, the CSS code in `style.css`, and the JavaScript code in `script.js`, all in the same directory. You can open the `index.html` file in a web browser to see and interact with the 3D maze.
Note that this example provides a basic structure for a 3D maze game. You'll need to implement the actual maze logic, walls, and navigation based on your specific requirements.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
40
Views
GPT-3.5-TURBO
💎🔥 Create the website of your dreams, including your own interactive 3D mazes between users!
💥 You will have everything you need to create it, such as your own html, css and javascript code.
✨ Workable for any design, GET IT NOW!
...more
Added over 1 month ago
