JS怎么實(shí)現(xiàn)煙花爆炸效果

發(fā)布時(shí)間：2021-04-19 09:48:43 來源：億速云閱讀：162 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)JS怎么實(shí)現(xiàn)煙花爆炸效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  html, body {
   width: 100%;
   height: 100%;
   background-color: black;
   overflow: hidden;
  }
 </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var content2d = canvas.getContext("2d");
 var balls = []; //存儲對象
 //小球的基本屬性
 function ball() {
  this.x = null;
  this.y = null;
  this.angle = null;
  this.vx=null;
  this.vy=null;
  this.r = null;
  this.color = null;
  this.init = function (x, y) {
   //初始化屬性值
   this.x = x;
   this.y = y;
   //隨機(jī)角度
   this.angle = Math.random() * Math.PI * 2;
   //隨機(jī)小球的大小
   this.r = this.randomNum(10,25);
   this.vx=(this.randomNum(6,12)+Math.random()*0.5)*Math.cos(this.angle);
   this.vy=(this.randomNum(6,12)+Math.random()*0.5)*Math.sin(this.angle);
   this.color = this.randomColor();
  };
  //隨機(jī)小球顏色
  this.randomColor = function () {
   return "#" + parseInt(Math.random() * 16777216).toString(16);
  };
  //隨機(jī)大小
  this.randomNum = function (min, max) {
   return Math.random() * max + min;
  };
  //重繪時(shí)需移動(dòng)
  this.move=function(){
   this.x+=this.vx;
   this.y+=this.vy;
   this.r-=0.3;
   this.vx*=0.93;
   this.vy*=0.93;
  }
 }
 //創(chuàng)建小球
 function createBall(x, y) {
  var count = parseInt(Math.random() * 30 + 10);
  for (var i = 0; i < count; i++) {
   var b = new ball();
   b.init(x, y);
   balls.push(b);
  }
 }
 //畫小球
 function Draw(){
  for(var i=0;i<balls.length;i++){
   var circle=balls[i];
   circle.move();
   content2d.beginPath();
   content2d.fillStyle=circle.color;
   content2d.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
   content2d.fill();
   content2d.closePath();
  }
 }
 //移除小球
 function removeBall(){
  for(var i=0;i<balls.length;i++){
   var circle=balls[i];
   if(circle.r<0.3){
    balls.splice(i,1);
    i--;
   }
  }
 }
 //計(jì)時(shí)器，即重繪
 loop();
 function loop(){
  //清除整個(gè)canvas
  content2d.clearRect(0,0,canvas.width,canvas.height);
  Draw();
  removeBall();
  window.requestAnimationFrame(loop);
 }
 canvas.onmouseup = function (e) {
  var x = e.pageX;
  var y = e.pageY;
  createBall(x, y);
 }
</script>
</body>
</html>

感謝各位的閱讀！關(guān)于“JS怎么實(shí)現(xiàn)煙花爆炸效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

JS怎么實(shí)現(xiàn)煙花爆炸效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽