canvas实现多种炸弹爆炸动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现多种炸弹爆炸动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
            display: flex;
            flex-direction: row;
        }
        
        #buttons {
            margin: 10px;
            /* padding: 10px; */
            display: flex;
            flex-direction: column;
        }
        #colors {
            margin: 10px;
            /* padding: 10px; */
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            /* background: grey; */
        }
        
        .box {
            width: 20px;
            height: 20px;
        }
        .red {
            background: red;
        }
        .green {
            background: green;
        }
        
        .blue {
            background: blue;
        }
    </style>



</head>

<body>
    <div>
        <canvas id="canvas" width=800 height=600></canvas>
    </div>
    <div id="buttons">
        <button id="explosion">Explosion</button>
        <button id="fallout">Nuclear Fallout</button>
        <button id="spin">Galaxy formation</button>
        <button id="amoeba">Amoeba</button>
        <div id="colors">
            <div class="red box"></div>
            <div class="green box"></div>
            <div class="blue box"></div>
        </div>
        <button>Number of particles:<br><i id="particles">0</i></button>
        <input type="range" min="1" max="10000" value="2000" id="slider">

    </div>


    <script>
        class PixelManipulation {
          constructor(canvas) {
            this.context = canvas.getContext("2d");
            this.width = canvas.width;
            this.height = canvas.height;
            this.image = this.context.getImageData(0, 0, this.width, this.height);
          }
          getImage() {
            this.image = this.context.getImageData(0, 0, this.width, this.height);
          }
          setImage() {
            this.context.putImageData(this.image, 0, 0);
          }
        
          setPixel(x, y, red, green, blue) {
            const pixelIndex = (y * this.width + x) * 4;
            this.image.data[pixelIndex] = red;
            this.image.data[pixelIndex + 1] = green;
            this.image.data[pixelIndex + 2] = blue;
        
          }
          fillColor(red, green, blue, alpha = 255) {
            for (let i = 0; i < this.width * this.height * 4; i += 4) {
              this.image.data[i] = red;
              this.image.data[i + 1] = green;
              this.image.data[i + 2] = blue;
              this.image.data[i + 3] = alpha;
            }
          }}
        
        
        class Particle {
          constructor() {
            this.x;
            this.y;
            this.direction;
            this.speed;
            this.init;
            this.update;
          }}
        
        
        class Swarm {
          constructor(canvas, amount = 10000, color = 1) {
            this.size = amount;
            this.particles = [];
            this.pixels = new PixelManipulation(canvas);
            this.color = color;
            this.style = this.initSpin;
            this.update = this.updateSpin;
          }
        
          setPattern(pattern) {
            switch (pattern) {
              case "fallout":{
                  this.style = this.initFallout;
                  this.update = this.updateFallout;
                  break;
                }
              case "spin":{
                  this.style = this.initSpin;
                  this.update = this.updateSpin;
                  break;
                }
              case "amoeba":{
                  this.style = this.initAmoeba;
                  this.update = this.updateAmoeba;
                  break;
                }
              case "explosion":{
                  this.style = this.initExplosion;
                  this.update = this.updateExplosion;
                  break;
                }}
        
            this.init();
          }
        
          setColor(color) {
            this.color = color;
          }
          setParticles(value) {
            this.size = value;
            this.init();
          }
          init() {
            ; // 0 = red, 1 = green, 2 = blue
        
            this.particles = [];
            for (let i = 0; i < this.size; i++) {
              this.particles.push(new Particle());
              // this.particles[i].update = this.particles[i].updateSpin;
              this.particles[i].update = this.update;
              this.particles[i].init = this.style;
              this.particles[i].init();
            }
            this.pixels.fillColor(0, 0, 0);
            this.pixels.setImage();
          }
        
          initFallout() {
            this.direction = 2 * Math.PI * Math.random();
            this.speed = 0.02 * Math.random();
            this.x = 0;
            this.y = 0;
            // this.update = this.updateFallout;
          }
          updateFallout(delta) {
            const xspeed = this.speed * Math.cos(this.direction);
            const yspeed = this.speed * Math.sin(this.direction);
        
            this.x += xspeed * delta;
            this.y += yspeed * delta;
            if (this.x <= -1.0 || this.x >= 1.0 || this.y <= -1.0 || this.y >= 1.0) {
              this.x = -1.10;
              this.y = -1.10;
            }
          }
       .........完整代码请登录后点击上方下载按钮下载查看