Write. Vote. Dominate.
A 5-round browser meme-captioning game — no framework, no server, no build step. Just open and play.
MemeBattle drops a random meme in front of you and gives you 30 seconds to write the funniest caption you can. Submit it, and a simulated crowd of voters likes, dislikes, and LOLs at your caption. Your score is calculated, your rank badge is assigned, and your name goes up on the leaderboard — all without a single server request.
Built entirely with vanilla HTML, CSS, and JavaScript. No npm. No webpack. No React. Just five files and a browser.
| Feature | Description |
|---|---|
| 🎲 Random Memes | 9 classic meme templates, no repeats per session |
| ⏱️ 30s Timer | SVG ring countdown with danger animation at ≤10s |
| 🗳️ AI Vote Simulation | Likes, Dislikes & LOLs generated from caption quality |
| 🏆 Live Leaderboard | Persists across sessions via localStorage |
| 🎖️ Rank System | Rookie → Rising Star → Meme Pro → Meme Legend |
| 🏅 Achievements | Caption God, On Fire, Hot Start & more |
| 📱 Responsive | Works on desktop and mobile |
SCORE = (Likes × 10) + (LOLs × 8) − (Dislikes × 5) + (TimeLeft × 3) + LengthBonus
LengthBonus = +50if your caption is longer than 30 characters. Write fast and write something funny — both matter.
0 – 999 → 🥉 Rookie
1000 – 1499 → ⭐ Rising Star
1500 – 1999 → 🔥 Meme Pro
2000+ → 👑 Meme Legend
Meme-Battle-Caption-Challenge-Game/
├── index.html → Home page — hero, stats, leaderboard, forum
├── play.html → Game page — username, arena, voting, results
├── style.css → All shared styles (CSS custom properties)
├── home.js → Leaderboard rendering & stats logic
└── play.js → Core game engine — timer, votes, scoring, saves
Zero dependencies. Zero build step. Open index.html and it runs.
const quality = caption.length > 20 ? Math.random() * 0.6 + 0.4 : Math.random() * 0.4;
const base = Math.floor(Math.random() * 80) + 20;
const likes = Math.floor(base * quality);
const dislikes = Math.floor(base * (1 - quality) * 0.6);
const funny = Math.floor(likes * (0.3 + Math.random() * 0.7));Longer captions → higher quality → more likes → more LOLs. Short captions get penalised. The algorithm rewards effort.
git clone https://github.com/adityak9822/Meme-Battle-Caption-Challenge-Game.git
cd Meme-Battle-Caption-Challenge-Game
# Open index.html in your browser — that's it.No npm install. No terminal running in the background. Just a browser.
- HTML5 — semantic structure across two pages
- CSS3 — custom properties, flexbox, SVG animations, responsive breakpoints
- Vanilla JS (ES6+) — game engine, vote simulation, score formula, countUp animator
- localStorage — leaderboard persistence (
memeLBkey, top 20 entries)
Made with 🧠 and absolutely zero servers
