冒泡气球

最新推荐文章于 2022-04-28 15:48:47 发布

moonlight201868

最新推荐文章于 2022-04-28 15:48:47 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/moonlight201868/article/details/81227030

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 1200px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
   <div class="box">
       <canvas width="1150" height="550" id="ocanvas" style="border:1px solid #c3c3c3"></canvas>
   </div>

   <script>
       let ocanvas=document.getElementById("ocanvas");
       let ctx=ocanvas.getContext("2d");
       let arr=[];
       class ball{
           constructor(x,y){
               this.x=x;
               this.y=y;
               this.r=30;
               this.color=`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
               this.dx=Math.random()*10-5;
               this.dy=Math.random()*10-5;
               arr.push(this);
           }
           draw(){
               ctx.beginPath();
               ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
               ctx.fillStyle=this.color;
               ctx.fill();
               ctx.closePath();
           }
           update(){
               this.x+=this.dx;
               this.y+=this.dy;
               if(this.r>=1){
                   this.r--;
               }
               else{
                   ctx.clearRect(0,0,1150,550)
               }
           }
       }
       let time1=setInterval(function () {
           ctx.clearRect(0,0,1150,550);
           for(let i=0;i<arr.length;i++){
               arr[i].draw();
               arr[i].update();
           }
       },50);

      ocanvas.οnmοusemοve=function (e) {
          let ev=e||window.event;
          let x=ev.clientX;
          let y=ev.clientY;
          let ox=ocanvas.offsetLeft;
          let oy=ocanvas.offsetTop;
         new ball(x-ox,y-oy)
      }
   </script>
</body>
</html>