AI game creator

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

No:11903

109

←

Prev Next

→

Firework animation
Developer User4917｜Date and time 23/8/13 2:58:19
Build time 18.829 sec｜Game capacity 2.522KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #firework {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: black;
      }
      #canvas {
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="firework"></div>

FireworkAnimation.prototype.initialize = function () {
        this.canvas = document.getElementById("canvas");
        this.context = this.canvas.getContext("2d");

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

this.createParticles();
        this.animate();
      };

FireworkAnimation.prototype.createParticles = function () {
        const numParticles = 100;
        const colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];

for (let i = 0; i < numParticles; i++) {
          const particle = {
            x: this.canvas.width / 2,
            y: this.canvas.height,
            size: Math.random() * 5 + 1,
            speedX: Math.random() * 8 - 4,
            speedY: Math.random() * -30 - 10,
            color: colors[Math.floor(Math.random() * colors.length)],
            angle: Math.random() * Math.PI * 2,
            angleSpeed: Math.random() * 0.2 - 0.1,
          };

this.particles.push(particle);
        }
      };

FireworkAnimation.prototype.animate = function () {
        const self = this;

setInterval(function () {
          self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);

for (let i = 0; i < self.particles.length; i++) {
            const particle = self.particles[i];

particle.x += particle.speedX;
            particle.y += particle.speedY;
            particle.speedY += 0.2;
            particle.angle += particle.angleSpeed;

self.context.beginPath();
            self.context.arc(
              particle.x,
              particle.y,
              particle.size,
              0,
              Math.PI * 2,
              false
            );
            self.context.fillStyle = particle.color;
            self.context.fill();
          }
        }, 30);
      };

const fireworkAnimation = new FireworkAnimation();
      fireworkAnimation.initialize();
    </script>
  </body>
</html>