Building a Real-World Snake Game Project

[@AzadRasul1977]

Building a Real-World Snake Game Project
________________________________________
Project Structure
snake_game/
├── manage.py
├── db.sqlite3
├── snake/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations/
│ ├── models.py
│ ├── tests.py
│ ├── views.py
│ ├── urls.py
│ └── templates/
│ └── snake/
│ └── game.html
│ └── static/
│ └── snake/
│ ├── css/
│ │ └── style.css
│ └── js/
│ └── game.js
├── snake_game/
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
________________________________________
Step 1: Project Setup
1.1 Create a Django Project
django-admin startproject snake_game
cd snake_game
1.2 Create a Django App
python manage.py startapp snake
1.3 Register the App
Add the snake app to the INSTALLED_APPS list in snake_game/settings.py:
INSTALLED_APPS = [
...
'snake',
]
And at the end add:
import os
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
________________________________________
Step 2: Frontend Implementation
2.1 Create the Template
Inside the snake app, create a folder structure for templates and static files:
snake/
├── templates/
│ └── snake/
│ └── game.html
├── static/
└── snake/
├── css/
│ └── style.css
└── js/
└── game.js
Create game.html:
{% load static %}


Hungry Snake Game





2.2 Add CSS Styles
Create static/snake/css/style.css to style the game:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1d3557;
}
.game-container {
position: relative;
width: 500px;
height: 500px;
border: 2px solid #457b9d;
background-color: #a8dadc;
}
2.3 Add JavaScript
Create static/snake/js/game.js for game logic:
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const tileSize = 20;
const canvasSize = 500;
let snake = [{ x: 240, y: 240 }];
let food = getRandomFoodPosition();
let direction = { x: 0, y: -tileSize };
function draw() {
ctx.fillStyle = "#1d3557";
ctx.fillRect(0, 0, canvasSize, canvasSize);
// Draw the snake
ctx.fillStyle = "#e63946";
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, tileSize, tileSize);
});
// Draw the food
ctx.fillStyle = "#f1faee";
ctx.fillRect(food.x, food.y, tileSize, tileSize);
}
function update() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// Check collision with walls
if (head.x < 0 || head.x >= canvasSize || head.y < 0 || head.y >= canvasSize) {
resetGame();
return;
}
// Check collision with self
if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
resetGame();
return;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = getRandomFoodPosition();
} else {
snake.pop();
}
}
function getRandomFoodPosition() {
return {
x: Math.floor(Math.random() * (canvasSize / tileSize)) * tileSize,
y: Math.floor(Math.random() * (canvasSize / tileSize)) * tileSize
};
}
function resetGame() {
snake = [{ x: 240, y: 240 }];
direction = { x: 0, y: -tileSize };
food = getRandomFoodPosition();
}
function changeDirection(event) {
const keyMap = {
ArrowUp: { x: 0, y: -tileSize },
ArrowDown: { x: 0, y: tileSize },
ArrowLeft: { x: -tileSize, y: 0 },
ArrowRight: { x: tileSize, y: 0 }
};
const newDirection = keyMap[event.key];
if (newDirection && (newDirection.x !== -direction.x || newDirection.y !== -direction.y)) {
direction = newDirection;
}
}
document.addEventListener("keydown", changeDirection);
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 150);
}
gameLoop();
________________________________________
Step 3: Backend Implementation
3.1 Create a View
Edit snake/views.py to render the game:
from django.shortcuts import render
def game(request):
return render(request, 'snake/game.html')
3.2 Add URLs
Create snake/urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.game, name='game'),
]
Update snake_game/urls.py to include the app’s URLs:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('snake.urls')),
]
________________________________________
Step 4: Run the Server
4.1 Collect Static Files
python manage.py collectstatic
4.2 Start the Server
Run the development server:
python manage.py runserver
Access your game at 127.0.0.1:8000/.

[@AzadRasul1977]

www.udemy.com/course/mastering-django/?referralCode=43DF73452FECC31E90FC