打ち上げ花火画面をタップすると、JavaScriptによって線画された花火が打ち上がります。たくさん画面をタップして、画面を花火でいっぱいにしましょう！！'s game

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

No:3732

4372

←

Prev Next

→

打ち上げ花火画面をタップすると、JavaScriptによって線画された花火が打ち上がります。 ..ALL
Developer もちきなこ｜Date and time 23/6/26 12:36:33
Build time 20.042 sec｜Game capacity 2.219KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<html>
  <head>
    <meta charset="UTF-8">
    <title>打ち上げ花火</title>
    <style>
      body {
        background-color: black;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
      var canvas = document.querySelector('canvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');
      ctx.lineWidth = 10;

var particles = [];
      var colors = ['red', 'pink', 'orange', 'yellow', 'white'];

canvas.addEventListener('click', function(event) {
        var x = event.clientX;
        var y = event.clientY;
        for (var i = 0; i < 30; i++) {
          particles.push(createParticle(x, y));
        }
      });

function createParticle(x, y) {
        var particle = {};
        particle.x = x;
        particle.y = y;
        particle.color = colors[Math.floor(Math.random() * colors.length)];
        particle.angle = Math.random() * Math.PI * 2;
        particle.speed = Math.random() * 5 + 3;
        particle.acceleration = 0.97;
        particle.radius = Math.random() * 10 + 2;

particle.update = function() {
          this.speed *= this.acceleration;
          this.x += Math.cos(this.angle) * this.speed;
          this.y += Math.sin(this.angle) * this.speed;
          this.radius *= this.acceleration;
        };

particle.draw = function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.strokeStyle = this.color;
          ctx.stroke();
        };

return particle;
      }

function loop() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particles.length; i++) {
          particles[i].update();
          particles[i].draw();
        }

particles = particles.filter(function(particle) {
          return particle.radius > 1;
        });

requestAnimationFrame(loop);
      }

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