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.
๐ฏ "Orbit Catch" โ A Single-File Browser Game
Concept: You control a planet orbiting a sun. Tap/click to reverse orbit direction and catch falling stars while dodging red comets. Simple, addictive, satisfying.
<!DOCTYPE html><html><body style="margin:0;overflow:hidden;background:#111">
<canvas id=c></canvas><script>
let W,H,c=document.getElementById('c'),x=c.getContext('2d'),ang=0,dir=1,score=0,
lives=3,items=[],t=0,best=0,dead=0,cx,cy,R=90,pr=8,speed=.03;
function resize(){W=c.width=innerWidth;H=c.height=innerHeight;cx=W/2;cy=H/2}
resize();onresize=resize;
onclick=ontouchstart=()=>{if(dead)return dead=0,score=0,lives=3,items=[];dir*=-1};
function spawn(){if(Math.random()<.04+score*.001){let a=Math.random()*Math.PI*2,
isStar=Math.random()>.3;items.push({x:cx+Math.cos(a)*300,y:cy+Math.sin(a)*300,
s:isStar,r:isStar?6:5,a})}}
function upd(){t++;ang+=speed*dir;spawn();
let px=cx+Math.cos(ang)*R,py=cy+Math.sin(ang)*R;
for(let i=items.length;i--;){let o=items[i],dx=cx-o.x,dy=cy-o.y,
d=Math.sqrt(dx*dx+dy*dy);o.x+=dx/d*1.5;o.y+=dy/d*1.5;
let hx=px-o.x,hy=py-o.y;if(Math.sqrt(hx*hx+hy*hy)<pr+o.r){
items.splice(i,1);if(o.s){score++;speed=.03+score*.002}else if(--lives<=0)
{dead=1;best=Math.max(best,score)}}else if(d<12)items.splice(i,1)}}
function draw(){x.fillStyle='#111';x.fillRect(0,0,W,H);
// stars bg
if(t==1)for(var i=0;i<80;i++){x.fillStyle='rgba(255,255,255,.3)';
x.fillRect(Math.random()*W,Math.random()*H,1,1)}
// sun glow
let g=x.createRadialGradient(cx,cy,5,cx,cy,40);
g.addColorStop(0,'#fa0');g.addColorStop(1,'transparent');
x.fillStyle=g;x.beginPath();x.arc(cx,cy,40,0,7);x.fill();
x.fillStyle='#fc0';x.beginPath();x.arc(cx,cy,12,0,7);x.fill();
// orbit ring
x.strokeStyle='rgba(255,255,255,.08)';x.lineWidth=1;
x.beginPath();x.arc(cx,cy,R,0,7);x.stroke();
// planet
let px=cx+Math.cos(ang)*R,py=cy+Math.sin(ang)*R;
x.fillStyle='#4af';x.beginPath();x.arc(px,py,pr,0,7);x.fill();
x.fillStyle='#6cf';x.beginPath();x.arc(px-2,py-2,3,0,7);x.fill();
// items
items.forEach(o=>{x.fillStyle=o.s?'#ff0':'#f33';x.beginPath();
if(o.s){for(let i=0;i<5;i++){let a=i*1.257-.785,b=a+.628;
x.lineTo(o.x+Math.cos(a)*o.r,o.y+Math.sin(a)*o.r);
x.lineTo(o.x+Math.cos(b)*3,o.y+Math.sin(b)*3)}x.fill()}
else{x.arc(o.x,o.y,o.r,0,7);x.fill();
x.fillStyle='#a00';x.beginPath();x.arc(o.x,o.y,3,0,7);x.fill()}});
// HUD
x.fillStyle='#fff';x.font='18px monospace';x.textAlign='left';
x.fillText('โญ '+score,15,30);x.fillText('โค๏ธ'.repeat(lives),15,55);
if(dead){x.textAlign='center';x.font='bold 32px monospace';
x.fillText('GAME OVER',cx,cy-30);x.font='18px monospace';
x.fillText('Score: '+score+' Best: '+best,cx,cy+5);
x.fillText('Click to restart',cx,cy+35)}
if(score==0&&!dead){x.textAlign='center';x.font='14px monospace';
x.fillStyle='rgba(255,255,255,.6)';
x.fillText('Click/tap to reverse orbit โข Catch โญ โข Dodge ๐ด',cx,H-30)}}
function loop(){if(!dead)upd();draw();requestAnimationFrame(loop)}loop()
</script></body></html>
~65 lines | Zero dependencies | Instant play
How It Works
- ๐ Your planet orbits the sun automatically
- Click/tap anywhere to reverse direction โ your only control
- โญ Yellow stars fall toward the sun โ catch them for points
- ๐ด Red comets also fall in โ dodge them or lose a life
- Speed increases as you score โ it gets frantic fast
Why It's Fun
| Element | Design Choice |
|---|---|
| One-button control | Dead simple to learn, hard to master |
| Escalating speed | Natural difficulty curve from speed = .03 + score * .002 |
| Risk/reward | Stars and comets share the same space โ greed kills |
| Juice | Sun glow, star shapes, orbit trail, satisfying collection |
| Replayability | High score tracking, "one more try" loop |
The core mechanic โ reversing orbit to position yourself โ creates surprisingly deep moment-to-moment decisions as objects approach from all angles simultaneously.
Comments