跳ねるボールを実現するネイティブjs

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。

主な方法は、margin-left / top の値を使用して変位させることです。もちろん、配置を使用してこれを行うこともできます。

この場合に使用されるものは次のとおりです。

  • DOM要素の取得
  • DOMスタイルの操作
  • .offsetWidth 要素の幅を取得します
  • .offsetHeight 要素の高さを取得する
  • setInterval() タイマー

コードについて

ネイティブjsを全体的に使用する

<スタイル> //スタイル スタイル* {
            マージン: 0;
            パディング: 0;
        }

        #箱 {
            幅: 500ピクセル;
            高さ: 600px;
            背景色: #eee;
            ボックスシャドウ: 0 0 10px 0 #000;
            マージン: 自動;
            オーバーフロー: 非表示;
            位置: 相対的;
            上マージン: 50px;
        }

        #ボックスdiv{
            幅: 50px;
            高さ: 50px;
            境界線の半径: 50%;
            背景色: #fff;
            位置: 絶対;
        }
    </スタイル>
    <本文>
    <div id="ボックス">
        <div id="cir"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</本文>
<スクリプト>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(ボックス、円、6);
collMove(ボックス、cirs[1]、7);
collMove(ボックス、cirs[2]、8);
collMove(ボックス、cirs[3]、9);
collMove(ボックス、cirs[4]、10);
collMove(ボックス、cirs[5]、10);
collMove(ボックス、cirs[6]、11);
/**
 * 要素は境界に遭遇するとポップアップします* ポップアップ中に要素の色を変更します* @param {取得するコンテナー} ボックス 
 * @param {コンテナ内のバウンス要素を取得する} cir 
 * @param {バウンス速度} 速度 
 */
function collMove(box, cir, speed) { //メソッドのカプセル化 var oDiv = box; //コンテナを取得 var oCir = cir; //コンテナ内の要素を取得 var xMax = oDiv.offsetWidth - oCir.offsetWidth; //コンテナの最大X軸境界 var yMax = oDiv.offsetHeight - oCir.offsetHeight; //コンテナの最大Y軸境界 var motionX = 0; //要素のX軸座標の初期化 var motionY = 0; //要素のY軸座標の初期化 (() => {
        var speedX = speed; //x軸オフセット var speedY = speed; //y軸オフセット setInterval(() => {
            motionX += speedX; //X 軸のオフセットを実行しますmotionY += speedY; //y 軸のオフセットを実行しますif (motionX >= xMax) { //X 軸の右境界に当たったかどうかを確認しますmotionX = xMax; //境界に当たった場合は、X 軸の座標を x 軸の右境界の最大値に設定しますspeedX = -speedX; //x 軸のオフセットを反転しますrandColor(oCir); //色を変更します} else if (motionX <= 0) { //X 軸の左境界に当たったかどうかを確認しますmotionX = 0; //境界に当たった場合は、X 軸の座標を 0、つまり左境界の初期位置に設定しますspeedX = -speedX; //X 軸のオフセットを再度反転しますrandColor(oCir); //以下の上限と下限の検出についても同様です}
            モーションY >= yMaxの場合{
                モーションY = yMax;
                速度Y = -速度Y
                randColor(oCir);
            } それ以外の場合 (motionY <= 0) {
                モーションY = 0;
                速度Y = -速度Y;
                randColor(oCir);
            }
            oCir.style.marginLeft = motionX + "px"; // 要素の X 軸座標を設定します oCir.style.marginTop = motionY + "px"; // 要素の Y 軸座標を設定します }, 10);
    })();

    function randColor(obj) { //ランダムな色をカプセル化し、色を変更して直接呼び出します var op = Math.random() * 7 + 3;

        関数 color() {
            Math.floor(Math.random() * 256) を返します。
        }
        obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})` を返します。
    }
}
</スクリプト>

方法全体の中で最も重要なことは、要素の位置とコンテナの境界の検出と判断を理解することです。この部分を理解すれば、残りは非常に簡単になります。
ヒント:コンテナーを標準の正方形に設定しないでください。そうしないと、角度の関係でボールは左上隅から右下隅までしか往復できなくなります。
メソッド全体がカプセル化されます。必要な場合は、メソッド全体をコピーするかリンクして、対応するパラメータに従ってメソッド名を直接使用するだけです。一度に 1 つの要素を呼び出します。あまり忙しくない場合は、 for ループを直接記述して繰り返し呼び出すこともできます。

レンガを投げる:

(var i = 1; i<=10; i++){
 ボックスを移動します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript+canvasでフレーム内のジャンプボールを実現
  • JavaScript と Canvas を組み合わせてスポーツボールを描画する
  • JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します
  • 動くボールを実現するネイティブjs(衝突検出)
  • jsはページの指定された領域でのボールの動きを実現します
  • jsを使用してボールの自由な移動コードを実現する
  • jsはマウスの動きに追従する小さなボールを実現します
  • JavaScript は正弦曲線に沿ったボールの動きを実現します
  • P5.js 入門チュートリアル: ボールアニメーションのサンプルコード
  • ネイティブjsがバウンドボール効果を実現

<<:  MySQL マルチテーブルクエリの詳細な説明

>>:  Linux で PyCurl のエラーを解決する方法

推薦する

特定の部門 ID に基づいて、すべての下位レベルの複数レベルのサブ部門を照会する MySQL の例

シミュレーションテーブルとデータスクリプト次の SQL ステートメントをコピーして、sys_dept...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

Docker イメージのダウンロードが遅すぎる場合の解決策

Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...

HTML ベース URL タグ

その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...

Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...

HTML でテーブルを分割および結合する (colspan、rowspan)

このコードは水平マージを示しています。 <!DOCTYPE html PUBLIC "...

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...

Win Server 2019 サーバーの IIS 構成と Web サイトの簡単な公開

1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...

MySQL に接続されている IP アドレスを表示する方法の例

具体的な方法:まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...

Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...

Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル

1. muttをインストールするsudo apt-get install mutt 2. msmtp...