ホームページ > 記事 > ウェブフロントエンド > 小球の弾性衝突効果を実現するJSの詳細例

小球の弾性衝突効果を実現するJSの詳細例

小云云オリジナル: 2017-12-22 10:23:052252ブラウズ

JavaScript は、オブジェクトとイベントに基づくクライアント側のスクリプト言語であり、クライアント側の Web 開発で広く使用されているスクリプト言語でもあり、HTML Web ページに動的関数を追加するためによく使用されます。ユーザーのリクエストに応じて。この記事では主に小さなボールの弾性衝突効果を実現するための JS を紹介します。コードはシンプルで理解しやすく、参考になると思います。

1. HTMLコード（ボディ部分）

 <body>
   <!--只需要做一个大p包裹几个小p即可，你想要几个小球碰撞就在内部做几个p即可，这里我们做了6个小球-->
   <p id="main">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
   </p> 
 </body>

上記のボディ部分が完成しました。それでは、ボディ内のpの小さなスタイルをいくつか作成してみましょう。

2. CSS ボールスタイル部分

<style type="text/css">
   /*将body默认的margin和padding部分去掉*/
   *{
     margin: 0px;
     padding: 0px;
    }
    /*采用定位的方式，让小球运动起来*/
    #main{
      margin: 0px auto;
     position: relative;
   }
   /*小球的样式*/
   #main p{
     overflow: hidden;
     position: absolute;
     width: 80px;
     height: 80px;
    opacity: 0.5;
     border-radius: 50%;
     background-color: red;
   }
 </style>

ボールとその親要素に位置を追加し、最後に js を使用してその上下左右の値を変更します。ボールを動かすために。ボールのスタイルが完成したので、次の JS コードが最も重要です。

3.1 Android イベントの基礎知識

実際、上記のコードを通じて小さなボールの衝突検出の機能を完全に実現できます。ただし、上記のコードだけではまだバグが残っています。つまり、Web サイト全体の右側にスクロールバーがある場合、ボールが画面の右側に当たると、一瞬水平スクロールバーが表示されます。はい、水平スクロールバーの外観は醜すぎます。したがって、次のコードで解決できます。

//滚动条宽度计算函数
    function getScrollbarWidth() {
      var oP = document.createElement("p"),
        styles = {
          width: "100px",
          height: "100px",
          overflowY: "scroll"
        }, i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i];
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }

上記はスクロールバーの幅を計算する関数です。この関数は、「ボールの移動スペースを自動的に調整します」で呼び出すだけです。ブラウザウィンドウのサイズ」関数

var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大运动宽度 maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ; このバグは修正されます。

小球の弾性衝突効果を実現するJSの詳細例

関連記事