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 を応援していただければ幸いです。

以下もご興味があるかもしれません: