Create an original, fun puzzle or game in a single HTML file using only HTML, CSS, and JavaScript. The core challenge is twofold: keep the code as short as possible while still making the game genuinely fun and playable. Requirements: - Everything (HTML, CSS, JS) must be in a single file - No external dependencies or libraries - Immediately playable with no setup - Include brief instructions so a new player knows what to do - Must feel satisfying to interact with Aim for under 100 lines of code total — the shorter the better, as long as the game remains enjoyable. AI models will be judged on: 1. **Creativity** of the game idea 2. **How fun** it actually is to play 3. **How minimal** the code is Think of it as a code golf meets game jam challenge.
Color Match Sprint
A fast-paced reaction game where you match the target color by clicking the correct colored square before time runs out. Each match gets faster and more challenging.
<!DOCTYPE html><title>Color Match Sprint</title><style>body{text-align:center;font-family:sans-serif;background:#111;color:#fff;margin:0;padding:20px}.target{width:100px;height:100px;margin:20px auto;border:3px solid #fff}.grid{display:grid;grid-template-columns:repeat(3,80px);gap:10px;justify-content:center;margin:20px}.cell{width:80px;height:80px;cursor:pointer;border-radius:8px;transition:transform 0.1s}.cell:hover{transform:scale(1.05)}.score{font-size:24px;margin:10px}.timer{height:10px;background:#0f0;margin:20px auto;width:300px;transition:width 1s linear}</style><body>
<h1>🎨 Color Match Sprint</h1>
<p>Click the square matching the target color!<br>Get faster each round. Miss or timeout = game over.</p>
<div class="target" id="target"></div>
<div class="score">Score: <span id="score">0</span></div>
<div class="timer" id="timer"></div>
<div class="grid" id="grid"></div>
<script>
let score=0,time=2000,colors=[],target,gameActive=true
const t=document.getElementById('target'),s=document.getElementById('score'),
g=document.getElementById('grid'),tm=document.getElementById('timer')
function randomColor(){return'#'+Math.floor(Math.random()*16777215).toString(16).padStart(6,'0')}
function newRound(){
if(!gameActive)return
colors=Array(9).fill().map(randomColor)
target=colors[Math.floor(Math.random()*9)]
t.style.backgroundColor=target
g.innerHTML=''
colors.forEach(c=>{
const cell=document.createElement('div')
cell.className='cell'
cell.style.backgroundColor=c
cell.onclick=()=>{
if(!gameActive||c!==target)return gameOver()
score++
s.textContent=score
time=Math.max(300,time*0.85)
tm.style.transition=`width ${time/1000}s linear`
newRound()
}
g.appendChild(cell)
})
tm.style.width='300px'
setTimeout(()=>tm.style.width='0px',10)
setTimeout(()=>gameActive&&gameOver(),time)
}
function gameOver(){
gameActive=false
g.innerHTML=`<h2>Game Over! Score: ${score}</h2><button onclick="reset()">Play Again</button>`
}
function reset(){score=0;time=2000;gameActive=true;s.textContent=0;newRound()}
newRound()
</script>
How to Play
- Look at the colored square at the top (the "target")
- Find and click the matching colored square in the 3×3 grid below
- Each correct match increases your score and makes the next round faster
- If you click the wrong color or time runs out, game over!
- Try to beat your high score!
Game Features
- Progressive difficulty: Each successful match reduces the time available by 15%
- Visual timer: Green bar shows remaining time
- Responsive feedback: Squares scale slightly on hover
- Clean restart: One-click replay after game over
- Color generation: 16 million possible colors for variety
Code Breakdown
- Total lines: 68 (including blank lines for readability)
- HTML: 5 lines for structure
- CSS: 15 lines for styling
- JavaScript: 48 lines for game logic
The game uses pure DOM manipulation, CSS transitions for smooth animations, and a simple but engaging mechanic that tests both color perception and reaction time. The decreasing time creates natural tension and a satisfying difficulty curve.
Try it! The challenge comes from the combination of color matching under time pressure with accelerating pace.
Comments