In diesem Beispiel entsteht ein kleines Reaktionsspiel mit Canvas, Game Loop und Punktestand. Es benötigt keine Bibliothek und ist ideal für schnelle Iterationen.
Spielidee
Klicke innerhalb von 30 Sekunden möglichst oft auf den wandernden Kreis. Jeder Treffer erhöht den Punktestand.
Startprompt
Baue ein Browser-Spiel in einer HTML-Datei. Zeichne mit Canvas einen zufällig springenden Zielkreis, zähle Treffer und zeige eine 30-Sekunden-Uhr. Unterstütze Maus und Touch.
Vollständige Datei: index.html
<!doctype html><html lang="de"><meta charset="utf-8">
<title>Catch the Dot</title>
<style>body{font:18px system-ui;text-align:center;background:#101522;color:#fff}canvas{max-width:92vw;background:#18243a;border:2px solid #62e6ff;border-radius:12px;touch-action:none}</style>
<h1>Catch the Dot</h1><p>Punkte: <b id="score">0</b> · Zeit: <b id="time">30</b>s</p>
<canvas id="game" width="640" height="360"></canvas>
<script>
const canvas=document.querySelector('#game'),ctx=canvas.getContext('2d');
let x=160,y=120,r=24,score=0,left=30,running=true;
function move(){x=r+Math.random()*(canvas.width-r*2);y=r+Math.random()*(canvas.height-r*2)}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle=running?'#ffce3a':'#64748b';
ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.fill();
requestAnimationFrame(draw);
}
function hit(event){
if(!running)return;
const box=canvas.getBoundingClientRect();
const px=(event.clientX-box.left)*canvas.width/box.width;
const py=(event.clientY-box.top)*canvas.height/box.height;
if(Math.hypot(px-x,py-y)<=r){score++;document.querySelector('#score').textContent=score;move()}
}
canvas.addEventListener('pointerdown',hit);
const timer=setInterval(function(){
left--;document.querySelector('#time').textContent=left;
if(left<=0){running=false;clearInterval(timer)}
},1000);
move();draw();
</script></html>Testen
Öffne die Datei, prüfe Maus und Touch und kontrolliere, dass nach 30 Sekunden keine Treffer mehr gezählt werden.
Nächste Iterationen
- Schwierigkeitsstufen und kleinere Ziele
- Highscore in localStorage
- Partikeleffekt und Sound bei Treffern