イルミネーションと花火's game

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

No:40915

←

Prev Next

→

イルミネーションと花火
Developer User18209｜Date and time 24/2/4 15:44:50
Build time 13.535 sec｜Game capacity 3.395KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>イルミネーションと花火</title>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#canvas {
  display: block;
  margin: 0 auto;
}

</style>
</head>
<body>
<canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let fireworks = [];
let particles = [];

class Firework {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = canvas.height;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * -10 - 10;
    this.color = getRandomColor();
    this.radius = 3;
    this.distanceToTarget = Math.hypot(this.x - canvas.width / 2, this.y - canvas.height / 2);
    this.shrink = this.distanceToTarget / 200;
    this.angle = Math.atan2(canvas.height / 2 - this.y, canvas.width / 2 - this.x);
    this.explosionSpeed = Math.hypot(this.vx, this.vy) / this.distanceToTarget;
    this.isExploded = false;
    this.particles = [];
  }
  
  update() {
    if (!this.isExploded) {
      this.x += this.vx;
      this.y += this.vy;
      this.vy += 0.1;
      
      if (this.distanceToTarget < 20) {
        this.isExploded = true;
        this.explode();
      }
    } else {
      for (let i = 0; i < this.particles.length; i++) {
        this.particles[i].update();
        
        if (this.particles[i].radius <= 0) {
          this.particles.splice(i, 1);
          i--;
        }
      }
      
      if (this.particles.length === 0) {
        fireworks.splice(fireworks.indexOf(this), 1);
      }
    }
    
    this.draw();
  }
  
  draw() {
    if (!this.isExploded) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
    } else {
      for (let i = 0; i < this.particles.length; i++) {
        this.particles[i].draw();
      }
    }
  }
  
  explode() {
    for (let i = 0; i < 30; i++) {
      const particle = new Particle(this.x, this.y, this.color);
      this.particles.push(particle);
    }
  }
}

class Particle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.vx = Math.random() * 6 - 3;
    this.vy = Math.random() * 6 - 3;
    this.radius = 3;
    this.opacity = 1;
  }
  
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.radius -= 0.05;
    this.opacity -= 0.03;
  }
  
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.opacity;
    ctx.fill();
  }
}

function createFirework() {
  const firework = new Firework();
  fireworks.push(firework);
}

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function update() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  for (let i = 0; i < fireworks.length; i++) {
    fireworks[i].update();
  }
  
  requestAnimationFrame(update);
}

document.addEventListener("click", (event) => {
  const x = event.clientX;
  const y = event.clientY;
  
  if (y > canvas.height / 3) {
    createFirework();
  }
});

update();
</script>
</body>
</html>