jsを使用してシンプルな弾幕スクリーンシステムを実装する

jsを使用してシンプルな弾幕スクリーンシステムを実装する

この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

実装のアイデア

1. 静的ページのフレームワークを最初に記述する

<div id='父'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" 自動再生ミュートループをコントロールします></video>
            <!-- コントロールは標準のビデオ コントロールを表示します。自動再生ビデオが自動的に再生されます (muted 属性が設定されている場合にのみ自動的に再生されます)
                 ミュート 無音再生 ループ ループ再生 -->
        </div>
        <div id="下">
            <入力タイプ="テキスト" id="txt">
            <input type="button" id="btn" value="送信">
        </div>
</div>

2. シンプルなCSSコードを追加してページをより美しくする

*{
   /*ページの初期化*/
            マージン: 0;
            パディング: 0;
        }
        体{
            背景色: バーリーウッド;
        }
        #父親{
            幅: 800ピクセル;
            高さ: 550px;
            マージン: 50px 自動;
        }
        #トップ{
            幅: 800ピクセル;
            高さ: 500px;
        }
        ビデオ{
            幅: 800ピクセル;
            高さ: 500px;
        }
        #底{
            幅: 800ピクセル;
            高さ: 50px;
            背景色: #000;
            テキスト配置: 中央;
            行の高さ: 50px;
        }

このような単純な静的ページが完成し、残りは JS コードを記述するだけです。

3. 後で使用するためにいくつかの関数をカプセル化しましょう。

 //ランダムに色を生成する関数 rgb () {
        r = Math.floor(Math.random() * 256); とします。
        g = Math.floor(Math.random() * 256); とします。
        b = Math.floor(Math.random() * 256) とします。
        'rgb('+r+','+g+','+b+')' を返します
    }
    //指定された範囲の整数データを生成する function stochastic(max,min){
        Math.floor(Math.random()*(max-min)+min) を返します。
    }

送信する箇条書きコメントはspanタグ内に配置されます。ここでは、span を#topに配置するために位置指定を使用する必要があります (son と father は同じ位置にあります)

 //<div id='#top'></div> に span タグを追加します。function barrage(){
       span = document.createElement("span"); とします。
        span.innerHTML = txt.値;
        span.style.color = rgb(); //箇条書きの色 span.style.fontSize = stochastic(50,12) + 'px'; //フォントサイズ span.style.top = stochastic(420,0) + 'px'; //位置 let right = -2000
        span.style.right = right + 'px' //右からの距離 tops.appendChild(span); //<div id='#top'></div> に span タグを追加 //タイマーを使用して弾幕画面の動きを実現 let tiem = setInterval(()=>{
            右++;
            span.style.right = 右 + 'px' 
            if( 右 > 800 ) {   
                tops.removeChild(span); //弾幕画面が動画から外れたら、要素を直接破棄する clearInterval(tiem); //タイマーをオフにする}
        },10)//速度が遅すぎると思われる場合は、ここで調整できます}

4.関数がカプセル化されたので、次のように呼び出します。

btn = document.getElementById('btn'); とします。
//ボタンにクリックイベントを追加します btn.onclick = ()=>{
        if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。 
        txt.value = ''; // 入力ボックスをクリアします}    
     //キーボードリスニングイベント(Enter)を追加する
    document.addEventListener('keydown', 関数(e) {
        (e.keyCode == 13)の場合{
           if(txt.value=='') 戻り値:
            弾幕();
            txt.値 = '';
        }
    });

最後に、すべてのコードを添付します。お役に立てば幸いです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>js 弾幕効果</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        体{
            背景色: バーリーウッド;
        }
        #父親{
            幅: 800ピクセル;
            高さ: 550px;
            マージン: 50px 自動;
        }
        #トップ{
            幅: 800ピクセル;
            高さ: 500px;
            位置: 相対的;
            overflow:hidden; /*オーバーフロー非表示*/
        }
        ビデオ{
            幅: 800ピクセル;
            高さ: 500px;
            object-fit:fill; /*指定されたコンテナの高さと幅に適応します*/
        }
        #底{
            幅: 800ピクセル;
            高さ: 50px;
            背景色: #000;
            テキスト配置: 中央;
            行の高さ: 50px;
        }
        スパン{
            位置: 絶対;
            右: 0;
            トップ:0;
        }
    </スタイル>
</head>
<本文>
    <div id='父'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" 自動再生ミュートループをコントロールします></video>
        </div>
        <div id="下">
            <入力タイプ="テキスト" id="txt">
            <input type="button" id="btn" value="送信">
        </div>
    </div>
    <スクリプト>
        txt = document.getElementById('txt') とします。
        btn = document.getElementById('btn'); とします。
        tops = document.getElementById('top'); とします。
        //ボタンにクリックイベントを追加します btn.onclick = ()=>{
            if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。
            txt.value = ''; // 入力ボックスをクリアします}    
        //キーボードリスニングイベント(Enter)を追加する
        document.addEventListener('keydown', 関数(e) {
            (e.keyCode == 13)の場合{
                if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。
                txt.value = ''; // 入力ボックスをクリアします}
        });
       //ランダムに色を生成する関数 rgb () {
            r = Math.floor(Math.random() * 256); とします。
            g = Math.floor(Math.random() * 256); とします。
            b = Math.floor(Math.random() * 256) とします。
            'rgb('+r+','+g+','+b+')' を返します
        }
        //指定された範囲の整数データを生成する function stochastic(max,min){
            Math.floor(Math.random()*(max-min)+min) を返します。
        }
        //<div id='#top'></div> に span タグを追加します。function barrage(){
            span = document.createElement("span"); とします。
            span.innerHTML = txt.値;
            span.style.color = rgb();
            span.style.fontSize = stochastic(50,12) + 'px';
            span.style.top = stochastic(420,0) + 'px';
            span.style.right = -200 + 'px';
            トップス.appendChild(span);
            右を -200 にします。
            間隔をsetInterval(()=>{とする
                右++;
                span.style.right = 右 + 'px' 
                if( 右 > 800 ) {
                    tops.removeChild(span); //弾幕画面が動画から外れたら要素を破棄する clearInterval(tiem); //タイマーをオフにする}
            },10)//速度が遅すぎると思われる場合は、ここで調整できます}
    </スクリプト>
</本文>
</html>

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

以下もご興味があるかもしれません:
  • JavaScript の弾丸スクリーン効果のシンプルな実装
  • JavaScript ベースで弾幕特殊効果を実現
  • JS で実装したビデオ弾幕スクリーン効果の例
  • JavaScript ライブコメント連発カット画像機能ポイント収集効果コード
  • 弾丸スクリーンの壁効果を実現する JavaScript
  • ビデオの弾幕効果を実現する JavaScript (2 つのバージョン)
  • 弾幕効果を実現するネイティブ js
  • js cavans が静的スクロール弾丸画面を実現
  • ネイティブ JS で弾幕スクリーン効果を実装するための簡単なガイド
  • 弾丸スクリーンの航空機効果を実現する js

<<:  Linux リダイレクトの使用方法の詳細な説明

>>:  MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

推薦する

JS ES6 非同期ソリューション

目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...

Linuxカーネルとデバイスツリーのコンパイルと書き込みを分析する

目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...

EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

Dockerはコンテナを通じてイメージを生成し、詳細にDockerCommitを送信します

目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

Ubuntu 18.04にPython仮想環境をインストールする

Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...

CocosCreator Typescriptでテトリスゲームを作る

目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...

MySQL ページングパフォーマンスの調査

一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...