Build & Deploy a Colorful Snake Game Using Git + Codex CLI

*A Workflow Tutorial*

This tutorial will teach you:

• How to set up your development environment
• How to use Git properly
• How to use Codex CLI to generate code
• How to deploy your project publicly
• How to work like a real developer using branches

By the end, you will have:

• A colorful Snake game
• Hosted publicly on GitHub Pages
• A professional Git workflow

Let’s begin.

---

PART 1 — One-Time Setup (Only Once Ever)

1️⃣ Install Required Software

Install Git

Download from:

https://git-scm.com/downloads

After installation, open **Git Bash** and verify:

bash
 1  git --version

If a version number appears, Git is installed correctly.

---

Install Node.js (Required for Codex CLI)

Download from:

https://nodejs.org

After installation, verify:

bash
 1  node -v
 2  npm -v

If both show versions, you’re ready.

---

Install Codex CLI

Now install Codex globally:

bash
 1  npm install -g @openai/codex

Verify installation:

bash
 1  codex --version

If a version appears → you're ready.

---

PART 2 — Create the Snake Game Project

2️⃣ Create Project Folder

bash
 1  mkdir snake-codex
 2  cd snake-codex

---

3️⃣ Initialize Git

bash
 1  git init

This starts version control.

---

4️⃣ Configure Git (Only If First Time)

bash
 1  git config --global user.name "Md Nazmul Islam"
 2  git config --global user.email "your_email_here"

---

5️⃣ Create `.gitignore`

bash
 1  cat > .gitignore << 'EOF'
 2  .DS_Store
 3  Thumbs.db
 4  node_modules/
 5  EOF

This prevents unnecessary files from being tracked.

---

6️⃣ First Commit (Project Checkpoint)

bash
 1  git add .
 2  git commit -m "chore: initialize project"

✔ Git is now working.

You officially started a project like a professional.

---

PART 3 — Generate Snake Game Using Codex CLI

7️⃣ Start Codex Inside Project

bash
 1  codex

If prompted to login, complete authentication.

---

8️⃣ Generate the Snake Game

Paste this prompt inside Codex:

 1  Create a colorful Snake game as a simple static web app.
 2  
 3  Files needed:
 4  - index.html
 5  - style.css
 6  - script.js
 7  
 8  Requirements:
 9  - Use HTML Canvas (600x600)
10  - Grid based movement
11  - Controls: Arrow keys + WASD
12  - Add Start/Restart button
13  - Score display
14  - Game Over overlay
15  - Snake grows after eating food
16  - Speed increases gradually
17  - Prevent reversing direction
18  - Add Pause using Spacebar
19  - Use modern UI with gradient background and neon snake colors
20  - Comment the code clearly

Approve changes when Codex asks.

---

Run The Game

On Windows:

bash
 1  explorer.exe index.html

Or double-click the file.

If the game runs → success.

---

🔟 Save With Git

Before committing, always review:

bash
 1  git status

Then:

bash
 1  git add .
 2  git commit -m "feat: colorful snake game v1"

Now your work is safely saved.

---

🔵 PART 4 — Push To GitHub

1️⃣1️⃣ Create Repository on GitHub

Go to:

https://github.com

Create a new repository:

snake-codex

Make it Public.

---

1️⃣2️⃣ Connect Local Repo to GitHub

Usually GitHub shows:

bash
 1  git branch -M main
 2  git remote add origin https://github.com/YOUR_USERNAME/snake-codex.git
 3  git push -u origin main

If push succeeds → your code is online.

---

PART 5 — Deploy Free Using GitHub Pages

1️⃣3️⃣ Enable GitHub Pages

Go to:

Repo → Settings → Pages

Select:

• Source → Deploy from branch
• Branch → main
• Folder → / (root)

Save.

---

1️⃣4️⃣ Access Your Live Game

After 1–2 minutes:

 1  https://YOUR_USERNAME.github.io/snake-codex/

Boom.

You deployed a game publicly.

---

PART 6 — Learn Git Like a Professional

Now we stop coding randomly.

We use feature branches.

---

Quick Safety Check (Before Every Session)

bash
 1  git status
 2  git pull
 3  git log --oneline --max-count=5

• status → What changed
• pull → Get latest updates
• log → See commit history

---

🔹 Upgrade 1 — High Score + Settings Panel

Create Feature Branch

bash
 1  git checkout main
 2  git pull
 3  git checkout -b feature/highscore-settings

---

Ask Codex

Run:

bash
 1  codex

Paste:

 1  Add a “High Score” that persists using localStorage.
 2  Add a small Settings panel with:
 3  - grid size (10/15/20)
 4  - speed (slow/normal/fast)
 5  - theme (Neon, Retro, Ocean)
 6  The settings should apply on Restart.
 7  Keep code clean and comment the new parts.
 8  Update UI in index.html + style.css as needed.

Test locally.

---

Review Before Commit

bash
 1  git status
 2  git diff

If good:

bash
 1  git add .
 2  git commit -m "feat: high score + settings panel"
 3  git push -u origin feature/highscore-settings

You just learned feature branch workflow.

---

Merge Properly

bash
 1  git checkout main
 2  git pull
 3  git merge feature/highscore-settings
 4  git push

Your deployed site updates automatically.

---

🔹 Upgrade 2 — Power-ups

bash
 1  git checkout -b feature/powerups

Codex prompt:

 1  Add power-ups that spawn randomly:
 2  - “Slow” power-up: slows snake for 5 seconds
 3  - “Ghost” power-up: snake can pass through itself for 5 seconds (still dies on wall)
 4  Show a small status indicator (e.g., “SLOW 3s”).
 5  Keep it balanced and simple.

Commit:

bash
 1  git add .
 2  git commit -m "feat: add timed power-ups"
 3  git checkout main
 4  git merge feature/powerups
 5  git push

---

🔹 Upgrade 3 — Sound Toggle

bash
 1  git checkout -b feature/sound

Codex prompt:

 1  Add simple sound effects using Web Audio API (no external files):
 2  - eat sound
 3  - game over sound
 4  Add a sound ON/OFF toggle in the UI, default ON.

Commit:

bash
 1  git add .
 2  git commit -m "feat: add sound effects toggle"

---

If Something Breaks — Safe Undo

bash
 1  git checkout main
 2  git pull
 3  git revert HEAD
 4  git push

This creates a safe undo commit.

You learned revert.

---

What You Just Practiced

• Git init
• Commit discipline
• Feature branching
• Merge workflow
• Revert safety
• Codex-assisted development
• Static deployment

This is real development workflow.

---

Final Thought

This tutorial is not about Snake.

It is about:

• Thinking in features
• Writing clean commits
• Building in branches
• Deploying confidently
• Using AI as a coding partner

That is how modern developers build software.

Perfect 😄

Let’s add your live link in a funny but confident way at the end of the blog.

You can paste this as the final section:

---

🎮 And Now… The Moment of Truth

After all that Git branching, Codex prompting, merging, deploying, and pretending we’re serious engineers…

The Snake is alive.

You can play it here:

👉 **https://mdnazmulislam0087.github.io/snake/**

Yes.

That little moving neon creature is the result of:

• Version control discipline
• AI-assisted development
• Proper branching
• Deployment confidence

And probably a few moments of “why is this not moving?” 😄

---

If you break it, don’t worry.

That’s what Git is for.

If it works beautifully, don’t worry.

That’s what Codex is for.

Either way…

You just deployed a real web application to the public internet.

And that’s not small.

Now go play it.

But don’t get addicted — we have bigger systems to build.