Ein ball der gegen andere bälle kämpft's game

Click here for free DL of the app version that can save data.

No:17926

←

Prev Next

→

Ein ball der gegen andere bälle kämpft
Developer User7832｜Date and time 23/9/25 6:46:31
Build time 23.961 sec｜Game capacity 2.442KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<style>
.canvas {
  border: 1px solid black;
}
</style>
</head>
<body>

// Ball class
class Ball {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.dx = Math.random() * 2 - 1; // random horizontal velocity
    this.dy = Math.random() * 2 - 1; // random vertical velocity
  }

draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

update(canvas) {
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }
    
    this.x += this.dx;
    this.y += this.dy;
  }
}

// Game initialization
function startGame() {
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  
  const playerBall = new Ball(canvas.width / 2, canvas.height / 2, 15, "blue");
  
  const enemyBalls = [];
  for (let i = 0; i < 10; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const radius = Math.random() * 10 + 5;
    const color = "red";
    enemyBalls.push(new Ball(x, y, radius, color));
  }
  
  // Main game loop
  function gameLoop() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // Update and draw player ball
    playerBall.update(canvas);
    playerBall.draw(context);
    
    // Update and draw enemy balls
    for (let i = 0; i < enemyBalls.length; i++) {
      const enemyBall = enemyBalls[i];
      enemyBall.update(canvas);
      enemyBall.draw(context);
    }
    
    // Check collision between player ball and enemy balls
    for (let i = 0; i < enemyBalls.length; i++) {
      const enemyBall = enemyBalls[i];
      const dx = playerBall.x - enemyBall.x;
      const dy = playerBall.y - enemyBall.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < playerBall.radius + enemyBall.radius) {
        // Collision occurred, implement game logic here...
        alert("Game over!");
        return; // Stop the game loop
      }
    }
    
    requestAnimationFrame(gameLoop);
  }
  
  gameLoop();
}

startGame();

</script>

</body>
</html>