Untitled

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Turbo Baller Arena</title>
  <style>
    body {
      margin: 0;
      background: #0f1220;
      color: white;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    canvas {
      background: #1e2240;
      border: 3px solid #fff;
      margin-top: 10px;
    }
    .ui {
      margin-top: 8px;
      font-size: 14px;
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <h2>🚗⚽ Turbo Baller Arena</h2>
  <canvas id="game" width="900" height="450"></canvas>
  <div class="ui">
    Spieler 1: WASD + Shift (Boost) | Bot links | R = Reset
  </div>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');

    const keys = {};
    window.addEventListener('keydown', e => keys[e.key] = true);
    window.addEventListener('keyup', e => keys[e.key] = false);

    const goalHeight = 140; // kleinere Tore

    const car1 = { x: 150, y: 225, w: 50, h: 25, color: 'cyan', vx: 0, vy: 0, boost: 100 };
    const car2 = { x: 700, y: 225, w: 50, h: 25, color: 'orange', vx: 0, vy: 0 };

    const ball = { x: 450, y: 225, r: 14, vx: 0, vy: 0 };

    function reset() {
      car1.x = 150; car1.y = 225; car1.vx = car1.vy = 0; car1.boost = 100;
      car2.x = 700; car2.y = 225; car2.vx = car2.vy = 0;
      ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.vx = ball.vy = 0;
    }

    function updateCar(car, controls) {
      let speed = 0.22; // etwas schneller
      if (controls && keys['Shift'] && car.boost > 0) {
        speed = 0.35;
        car.boost -= 0.6;
      }

      if (controls && keys[controls.up]) car.vy -= speed;
      if (controls && keys[controls.down]) car.vy += speed;
      if (controls && keys[controls.left]) car.vx -= speed;
      if (controls && keys[controls.right]) car.vx += speed;

      car.vx *= 0.94;
      car.vy *= 0.94;
      car.x += car.vx;
      car.y += car.vy;

      car.x = Math.max(0, Math.min(canvas.width - car.w, car.x));
      car.y = Math.max(0, Math.min(canvas.height - car.h, car.y));
    }

    function collideCarBall(car) {
      const cx = car.x + car.w / 2;
      const cy = car.y + car.h / 2;
      const dx = ball.x - cx;
      const dy = ball.y - cy;
      const dist = Math.hypot(dx, dy);
      if (dist < ball.r + 22) {
        // mehr Ballkontrolle: weniger Abprall, mehr Mitnahme
        ball.vx += dx * 0.018;
        ball.vy += dy * 0.018;

        // leichtes "Dribbling" – Ball folgt dem Auto
        ball.vx += car.vx * 0.15;
        ball.vy += car.vy * 0.15;
      }
    }

    function updateBall() {
      ball.x += ball.vx;
      ball.y += ball.vy;
      ball.vx *= 0.99; // etwas schneller, aber kontrollierter
      ball.vy *= 0.99;

      if (ball.y < ball.r || ball.y > canvas.height - ball.r) ball.vy *= -1;

      // richtige Tore
      if (ball.x < 20 && ball.y > canvas.height/2 - goalHeight/2 && ball.y < canvas.height/2 + goalHeight/2) {
        alert('🤖 Bot kassiert ein TOR!');
        reset();
      }
      if (ball.x > canvas.width - 20 && ball.y > canvas.height/2 - goalHeight/2 && ball.y < canvas.height/2 + goalHeight/2) {
        alert('🎉 DU HAST EIN TOR GESCHOSSEN!');
        reset();
      }

      if (ball.x < 0 || ball.x > canvas.width) ball.vx *= -1;
    }

    function drawBoostBar() {
      ctx.fillStyle = '#444';
      ctx.fillRect(20, 20, 200, 10);
      ctx.fillStyle = '#00ffff';
      ctx.fillRect(20, 20, car1.boost * 2, 10);
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Feld
      ctx.strokeStyle = '#555';
      ctx.beginPath();
      ctx.moveTo(canvas.width / 2, 0);
      ctx.lineTo(canvas.width / 2, canvas.height);
      ctx.stroke();

      // Tore
      ctx.strokeStyle = 'white';
      ctx.strokeRect(0, canvas.height/2 - goalHeight/2, 20, goalHeight);
      ctx.strokeRect(canvas.width - 20, canvas.height/2 - goalHeight/2, 20, goalHeight);

      // Autos
      ctx.fillStyle = car1.color;
      ctx.fillRect(car1.x, car1.y, car1.w, car1.h);
      ctx.fillStyle = car2.color;
      ctx.fillRect(car2.x, car2.y, car2.w, car2.h);

      // Boost Effekt
      if (keys['Shift'] && car1.boost > 0) {
        ctx.fillStyle = 'rgba(0,255,255,0.6)';
        ctx.fillRect(car1.x - 10, car1.y + 5, 10, 10);
      }

      // Ball
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
      ctx.fill();

      drawBoostBar();
    }

    function loop() {
      if (keys['r'] || keys['R']) reset();

      updateCar(car1, { up: 'w', down: 's', left: 'a', right: 'd' });

      // intelligenter Bot – bewegt sich in ALLE Richtungen
      const botSpeed = 0.25;

      // Zielpunkt: leicht vor den Ball (Vorhersage)
      const targetX = ball.x + ball.vx * 10;
      const targetY = ball.y + ball.vy * 10;

      if (targetY < car2.y + car2.h / 2) car2.vy -= botSpeed;
      if (targetY > car2.y + car2.h / 2) car2.vy += botSpeed;
      if (targetX < car2.x + car2.w / 2) car2.vx -= botSpeed;
      if (targetX > car2.x + car2.w / 2) car2.vx += botSpeed;

      updateCar(car2, null);

      collideCarBall(car1);
      collideCarBall(car2);
      updateBall();
      draw();
      requestAnimationFrame(loop);
    }

    reset();
    loop();
  </script>
</body>
</html>
Editor is loading...