利用冒泡功能算法實現海底之魚 the fish of ocean

時間 2020-08-28

原文原文鏈接

該項目效果

核心算法

function movbulb(){
//擴展this的做用域鏈
with (this) {
  //ec控制  xx = (xm - x0) / 8與yy = (ym - y0) / 8 執行20次
if(ec < 20){
  //math.abc 絕對值
  //x0爲0, y0爲-1000
  //xm爲0， ym爲9999
if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){
xx = (xm - x0) / 8;
yy = (ym - y0) / 8;
ec++;
}
}
//xx爲初始0，yy初始爲0
xx *= 0.99;
yy *= 0.99;
//
x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx;
y0+= yy - v;
if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){
y0 = ny + N + h * 2;
x0 = nx/2-100 + Math.random() * 500;
ec = 0;
}
obj.style.top  = y0 - h -350;
obj.style.left = x0 - w - 100;
}
}

前端代碼

<body>
  <div class="father_box">
    <audio class="music" src="./mp3/大魚.mp3" autoplay="autoplay" controls loop></audio>
    <!--下面是浮動的桃心-->
    <div class="bigBox">
      <div id="bubbles" style="visibility:hidden">
        <img src="./images/bluefish.png">
        <img src="./images/banfish.png">
        <img src="./images/jingfish.png">
      </div>
    </div>
  </div>
</body>

該算法代碼是實現 fixed元素由下向上冒泡，img元素會左右而且不斷向上浮動。在前端代碼中，把fixed元素的父盒子body,添加style屬性，transform:rotate(90deg),img由左向右~~~~，上下浮動。便造成了魚的遊動。前端