Spiel: Straße sicher überqueren

body { margin: 0; font-family: Arial, sans-serif; background: #cce8cc; text-align: center; } canvas { display: block; margin: auto; background: #8bc34a; } #hud { display: flex; justify-content: space-around; margin: 10px; font-weight: bold; } button { padding: 10px 16px; font-size: 16px; margin: 6px; } .controls { display: flex; justify-content: center; gap: 10px; } #menu { margin-top: 80px; }

🚸 Sicher über die Straße

const canvas = document.getElementById(„game“); const ctx = canvas.getContext(„2d“); let player, cars, level, score, gender; let gameRunning = false; const steps = [„📱 Handy weglegen“,“🎧 Kopfhörer abnehmen“,“👀 Nach links schauen“,“👀 Nach rechts schauen“,“🚶 Ruhig gehen“,“🎒 Kapuze runter“,“🦺 Warnweste anziehen“,“✅ Sicher unterwegs“]; const carColors = [„#d32f2f“, „#1976d2“, „#388e3c“, „#fbc02d“]; function selectPlayer(type){ gender=type; document.getElementById(„menu“).style.display=“none“; document.getElementById(„gameUI“).style.display=“block“; startGame(); } function startGame(){ player = { x:200, y:470, speed:5 }; level=1; score=0; createCars(); updateHUD(); gameRunning=true; } function createCars(){ cars=[]; const baseSpeed=0.7+level*0.1; for(let i=0;i<2;i++){ cars.push({x:120+i*260, y:240, dir:-1, speed:baseSpeed, color:carColors[Math.floor(Math.random()*carColors.length)]}); } for(let i=0;i<2;i++){ cars.push({x:-180-i*260, y:300, dir:1, speed:baseSpeed, color:carColors[Math.floor(Math.random()*carColors.length)]}); } } function drawBackground(){ ctx.fillStyle="#8bc34a"; ctx.fillRect(0,0,canvas.width,canvas.height); for(let i=0;i<6;i++){ ctx.fillStyle="#5d4037"; ctx.fillRect(30+i*70,60,10,30); ctx.beginPath(); ctx.fillStyle="#2e7d32"; ctx.arc(35+i*70,55,18,0,Math.PI*2); ctx.fill(); } ctx.fillStyle="#555"; ctx.fillRect(0,200,canvas.width,160); ctx.strokeStyle="#fff"; ctx.setLineDash([20,15]); ctx.beginPath(); ctx.moveTo(0,280); ctx.lineTo(canvas.width,280); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle="#eee"; for(let i=0;i=7){ ctx.fillStyle=“yellow“; ctx.fillRect(player.x-6,player.y-26,12,26); ctx.fillStyle=“#ccc“; ctx.fillRect(player.x-6,player.y-16,12,3); } ctx.strokeStyle=“#222″; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(player.x-6,player.y-20); ctx.lineTo(player.x-14,player.y-8); ctx.moveTo(player.x+6,player.y-20); ctx.lineTo(player.x+14,player.y-8); ctx.stroke(); ctx.beginPath(); ctx.moveTo(player.x,player.y); ctx.lineTo(player.x-8,player.y+18); ctx.moveTo(player.x,player.y); ctx.lineTo(player.x+8,player.y+18); ctx.stroke(); } function updateCars(){ cars.forEach(car=>{ car.x+=car.speed*car.dir; if(car.dir===1&&car.x>canvas.width+100){ car.x=-200-Math.random()*200; } if(car.dir===-1&&car.x player.xcar.x && player.ycar.y ); } function nextLevel(){ score+=100; level++; if(level>steps.length){ alert(„🎉 Geschafft!\nPunkte: „+score); restartGame(); return; } player.y=470; createCars(); updateHUD(); } function updateHUD(){ document.getElementById(„level“).innerText=level; document.getElementById(„score“).innerText=score; document.getElementById(„info“).innerText=steps[level-1]; } function move(dir){ if(!gameRunning) return; if(dir===“up“) player.y-=8; if(dir===“left“) player.x-=8; if(dir===“right“) player.x+=8; } document.addEventListener(„keydown“,e=>{ if(e.key===“ArrowUp“) move(„up“); if(e.key===“ArrowLeft“) move(„left“); if(e.key===“ArrowRight“) move(„right“); }); function restartGame(){ gameRunning=false; document.getElementById(„gameUI“).style.display=“none“; document.getElementById(„menu“).style.display=“block“; } function gameLoop(){ if(gameRunning){ drawBackground(); cars.forEach(drawCar); updateCars(); drawPlayer(); if(collision()){ alert(„⚠️ Du wurdest vom Auto getroffen – neu versuchen.“); restartGame(); } if(player.y<190) nextLevel(); } requestAnimationFrame(gameLoop); } gameLoop();