ChatGpt 
Snake Playable Html Game Generator
ID: 2368Words in prompt: 1199
Comments
1
🎮 Feeling nostalgic for those good old Nokia days?
Relive the classic with this Snake Game generator
🛠️ Unleash the game developer within you 🛠️
🌟With a single copy-paste, you're not just a player, but a game developer. 🌟
Embed this retro treasure directly into your personal HTML file.
🐍 Enjoy the trip down memory lane in your browser 🐍
🚀Each game rekindles that familiar challenge, making every round a unique encounter. 🚀
Ready to chase nostalgia? 🚀🌍
Created: 2023-09-03
Powered by: ChatGPT Version: 4
In categories: Coding
Comments (0)
ATTENTION: This prompt is an assistant that will chat with the user. Before a input can be given, you need to copy and paste the prompt and wait until the engine tells you what to do.
PREVIEW INPUT 1:
- 30x20
- green
- b
- b 5 Yes
PREVIEW OUTPUT 0 (First answer after the prompt has been submitted): Alright! Let's start by taking your preferences for the Snake game:
- Please specify the board size (for instance, 20x20 or 25x25).
- Choose a snake color (like green, blue, or yellow).
- Select a difficulty level: a) easy b) medium c) hard d) expert
- Choose the frame behavior: a) Wall (Snake dies if it hits the wall) b) Teleport (Snake moves to the opposite side of the frame)
- Would you like random walls? (Yes/No)
PREVIEW OUTPUT 1: Great! Here's the full HTML of your customized Snake game:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Classic Snake Game</title> <style> body { font-family: Arial; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: #f4f4; } #score { font-size: 24px; margin-bottom: 10px; } #snakeGameContainer { width: 600px; height: 400px; border: 2px solid; position: relative; background: #fff; } .snake-part, .food, .wall { width: 20px; height: 20px; position: absolute; } .snake-part { background: green; border-radius: 2px; } .food { background: red; border-radius: 50%; } .wall { background: grey; } </style> </head> <body> <div id="score">Score: 0</div> <div id="snakeGameContainer"></div> <script> const DIRECTIONS = { ArrowUp: { x: 0, y: -1 }, ArrowDown: { x: 0, y: 1 }, ArrowLeft: { x: -1, y: 0 }, ArrowRight: { x: 1, y: 0 } }; const OPPOSITE = { ArrowUp: "ArrowDown", ArrowDown: "ArrowUp", ArrowLeft: "ArrowRight", ArrowRight: "ArrowLeft" }; let snake = [{ x: 15, y: 10 }], food = { x: 10, y: 5 }, walls = [], score = 0, currentDirection = DIRECTIONS.ArrowRight, gameContainer = document.getElementById('snakeGameContainer'), scoreElement = document.getElementById('score'); document.addEventListener('keydown', e => { if (DIRECTIONS[e.key] && e.key !== OPPOSITE[Object.keys(DIRECTIONS).find(key => DIRECTIONS[key] === currentDirection)]) currentDirection = DIRECTIONS[e.key]; }); function drawGame() { gameContainer.innerHTML = ''; snake.forEach(part => createElem(part, 'snake-part')); createElem(food, 'food'); walls.forEach(wall => createElem(wall, 'wall')); } function createElem(pos, className) { const elem = document.createElement('div'); elem.style.left = `${pos.x * 20}px`; elem.style.top = `${pos.y * 20}px`; elem.classList.add(className); gameContainer.appendChild(elem); } function updateGame() { const head = { ...snake[0] }; head.x += currentDirection.x; head.y += currentDirection.y; // Teleportation behavior if (head.x < 0) head.x = 29; else if (head.x >= 30) head.x = 0; else if (head.y < 0) head.y = 19; else if (head.y >= 20) head.y = 0; if (head.x === food.x && head.y === food.y) { score++; scoreElement.textContent = "Score: " + score; food = { x: Math.floor(Math.random() * 30), y: Math.floor(Math.random() * 20) }; if (Math.random() < 0.2) { // 20% chance to generate a wall when food is eaten walls.push({ x: Math.floor(Math.random() * 30), y: Math.floor(Math.random() * 20) }); } } else snake.pop(); snake.unshift(head); if (snake.some(part => walls.some(wall => part.x === wall.x && part.y === wall.y)) || snake.some(part => part.x === head.x && part.y === head.y && part !== head)) { score = 0; scoreElement.textContent = "Score: " + score; snake = [{ x: 15, y: 10 }]; food = { x: 10, y: 5 }; walls = []; currentDirection = DIRECTIONS.ArrowRight; } } setInterval(() => { updateGame(); drawGame(); }, 150); // 150ms for medium difficulty </script> </body> </html>Enjoy playing! Remember to allow keyboard input on whichever platform or browser you decide to play this on, as the game responds to arrow keys.
Crypto