Prompt Details
Model
Chat - GPT-4o (gpt-4o)
Token size
529 ($0.02645 / call)
Example input
[question 1]: Want a snake game that keeps track of scores and is functional in a browser.
[question 2]: score tracking and display, speed increases everytime the snake eats a fruit at an increasing level as you go further.
[question 3]: recommend for me
[question 4]: personal project for now
Example output
Step 2 – Recommend a Tech Stack
Since you want to build a browser-based Snake game with:
Score tracking and display
Speed increases as fruit is eaten
Level increases over time
And it's a personal project (so simplicity is key)
I recommend the following tech stack:
✅ Tech Stack Recommendation
Layer Technology Why it’s recommended
Frontend HTML + CSS + JavaScript Easy to use, runs natively in any browser, and perfect for a game like Snake
Game Engine Canvas API Lets you draw and animate shapes for the game board, snake, and fruit efficiently
State Mgmt Vanilla JavaScript Keeps it simple – no need for React or other libraries at this stage
Hosting GitHub Pages or Netlify Free and easy to deploy small static websites like this game
Storage localStorage Built into the browser and perfect for storing high scores
This stack keeps things beginner-friendly, fast to set up, and easy to understand and extend later.
“If you are unsure, provide more information and I will ensure the tech stack works for your specific application.”
Let me know if you confirm this tech stack, and I will continue with the high-level build process.
---
**Step 3 – High-Level Overview of Build Process**
**I. High-Level Overview**
Step 1: Set up your project folder structure
Step 2: Create `index.html` with the game layout and canvas
Step 3: Create `styles.css` to style the game area and score display
Step 4: Set up the game logic in `script.js`
Step 5: Implement the Snake movement logic
Step 6: Add collision detection (walls, self, and fruit)
Step 7: Handle food generation and snake growth
Step 8: Increase game speed and level with each fruit
Step 9: Track and display current score and high score using `localStorage`
Step 10: Add game over and restart logic
Step 11: Deploy your game using GitHub Pages
---
**Step 4 – Detailed Instructions**
**II. Detailed Instructions**
---
**1. Project Structure**
Create the following folder and file structure:
```
📁 SnakeGame
├── 📁 public
│ ├── 📄 index.html
│ └── 📄 styles.css
├── 📁 src
│ └── 📄 script.js
```
---
**2. index.html**
Create the HTML structure and canvas:
```html
<!-- 📄 SnakeGame/public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Snake Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Snake Game</h1>
<div class="scoreboard">
<p>Score: <span id="score">0</span></p>
<p>High Score: <span id="highScore">0</span></p>
<p>Level: <span id="level">1</span></p>
</div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="../src/script.js"></script>
</body>
</html>
```
---
**3. styles.css**
Add basic styling to center the canvas and display the scores:
```css
/* 📄 SnakeGame/public/styles.css */
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #111;
color: white;
font-family: Arial, sans-serif;
}
h1 {
margin-top: 20px;
}
.scoreboard {
margin: 10px;
font-size: 18px;
display: flex;
gap: 20px;
}
canvas {
background-color: #222;
border: 2px solid #fff;
}
```
---
**4. script.js**
Add full game logic:
```javascript
// 📄 SnakeGame/src/script.js
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };
let fruit = { x: 5, y: 5 };
let score = 0;
let highScore = localStorage.getItem("highScore") || 0;
let level = 1;
let speed = 200;
let gameInterval;
document.getElementById("highScore").innerText = highScore;
document.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowUp":
if (direction.y === 0) direction = { x: 0, y: -1 };
break;
case "ArrowDown":
if (direction.y === 0) direction = { x: 0, y: 1 };
break;
case "ArrowLeft":
if (direction.x === 0) direction = { x: -1, y: 0 };
break;
case "ArrowRight":
if (direction.x === 0) direction = { x: 1, y: 0 };
break;
}
});
function resetGame() {
clearInterval(gameInterval);
alert("Game Over!");
if (score > highScore) {
highScore = score;
localStorage.setItem("highScore", highScore);
document.getElementById("highScore").innerText = highScore;
}
score = 0;
level = 1;
speed = 200;
snake = [{ x: 10, y: 10 }];
direction = { x: 0, y: 0 };
fruit = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
startGame();
}
function startGame() {
gameInterval = setInterval(gameLoop, speed);
}
function gameLoop() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// Collision with wall
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
return resetGame();
}
// Collision with self
for (let part of snake) {
if (part.x === head.x && part.y === head.y) return resetGame();
}
snake.unshift(head);
// Fruit collision
if (head.x === fruit.x && head.y === fruit.y) {
score += 10;
level = Math.floor(score / 50) + 1;
speed = Math.max(50, 200 - level * 10);
clearInterval(gameInterval);
startGame();
fruit = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount),
};
} else {
snake.pop();
}
// Drawing
ctx.fillStyle = "#222";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "lime";
for (let part of snake) {
ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize - 2, gridSize - 2);
}
ctx.fillStyle = "red";
ctx.fillRect(fruit.x * gridSize, fruit.y * gridSize, gridSize - 2, gridSize - 2);
document.getElementById("score").innerText = score;
document.getElementById("level").innerText = level;
}
startGame();
```
---
**11. Deploy using GitHub Pages**
1. Go to GitHub and create a new repository (e.g., `snake-game`).
2. Push your project files:
- The `public` folder should be the root of the repo.
3. In GitHub, go to the repository → **Settings** → **Pages** → set the source to the `main` branch and root.
4. It will give you a link to your game online.
---
> “If you need any further assistance, please provide a step number for more detail.”
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
3
Favorites
78
Views
GPT-4O
Seamlessly create your very own applications with vibe coding. We have refined this prompt over numerous generations to get us the best results with the least amount of input. Simply answer it's questions and let it loose.
...more
Added over 1 month ago
