果物落として進化する's game

<!DOCTYPE html>
<html>
<head>
  <title>Fruit Evolution Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </sty has>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
かな
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let fruits = [];
    let score = 0;

function Fruit(x, y, size, color) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.color = color;
      this.speed = Math.random() * 3 + 1;

this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.size, this.size);
      }

this.update = function() {
        this.y += this.speed;

if (this.y > canvas.height) {
          this.y = 0;
          this.x = Math.random() * (canvas.width - this.size);
        }

if (this.size < 50 && this.size >= 30) {
          this.color = '🍎';
        } else if (this.size >= 50) {
          this.color = '🍍';
        }

this.draw();
      }
    }

function createFruit() {
      const x = Math.random() * (canvas.width - 30);
      const size = Math.random() * 20 + 10;
      const color = '🍋';

fruits.push(new Fruit(x, 0, size, color));
    }

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

fruits.forEach((fruit, index) => {
        fruit.update();

if (fruit.y + fruit.size > canvas.height) {
          if (fruit.size < 50) {
            score += 10;
          } else {
            score += 20;
          }

fruits.splice(index, 1);
        }
      });

ctx.fillStyle = 'black';
      ctx.font = '24px Arial';
      ctx.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(gameLoop);
    }

setInterval(createFruit, 1000);
    gameLoop();
  </script>
</body>
</html>