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

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

小云云
リリース: 2017-12-22 10:23:05
オリジナル
2282 人が閲覧しました

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 ; このバグは修正されます。

関連する推奨事項:

小さなボールの放物線運動を実装する 2 つの JS メソッド

さまざまなピンインの種類を取得する JS メソッド

生年月日に基づいて年齢を取得する JS メソッド

以上が小球の弾性衝突効果を実現するJSの詳細例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート