コメントの弾幕を達成するための小さなプログラムの開発をmpvue

 

 マップ上の最初の

シンプルな弾幕を送信しています

ページの弾幕エリア：

      <DIV CLASS = "コンテンツ" V-ショー= "doommData.length"> 
        <DIV CLASS = "textLeft"> </ div> 
        <divのクラス= "textItem"> 
          <Pクラス= V- "AONテキスト" の場合 =」 item.display "V- ため = "doommDataで（項目、インデックス）"：キー= "インデックス" ID = "item.id"スタイル=" { 'アニメーション持続時間'：item.time + 's'は、トップ：商品.top + '％'、色： '＃333'、背景：item.result.bgColor} "> 
            <画像：SRC =" item.result.faceImage」クラス= "headImg" /> 
            <スパンクラス= "名前"> {{item.result.name}} </スパン> 
            <スパンクラス= "テキスト"> {{item.result。sendMessage}} </スパン> 
          </ P> 
        </ div> 
      </ div>

弾幕エリアコード・ロジック：

// 弾幕パラメータ
クラスDoomm { 
  コンストラクタ（結果、トップ、タイム、カラー、ID）{ 
    // コンテンツ、トップから、時間を実行している、色、ID（カスタマイズ可能なパラメータの増加）
    / * * 
     *データ構造結果
     *顔画像： ""、
     *はbgColor： "＃57B2FF"、
     *のsendMessage： "66666"、
     * SENDTIME： "2019年11月6日夜03時10分15秒"、
     *名： "イヴ" 
     * 
     * / 
    この .Resultは= 結果;
     この .top = トップ;
     この .time = 時間;
     この .color = 色;
     この .display = trueに、
     この .ID = ID;
  } 
} 
// ランダムフォント色
getRandomColor（）{ 
  せRGB = [];
   のため（LET I = 0; I <3; ++ I）{ 
    せてカラー = Math.floor（Math.random（）* 256）.toString （16 ）; 
    色 = color.length 1 == "0" +。？色：カラー、
    rgb.push（カラー）; 
  } 
  リターン "＃" + rgb.join（ "" ）; 
} 
// スロットル機能の
機能スロットル（FN、待機）{
   VARの canuse = trueに ; // 設定スイッチ
  リターン 機能（項目）{
     IF（！ canuse）{
      リターン falseに; 
    } // スイッチがダウンしていませんオフになっている場合 
    = canuseをfalseに ; // 使用閉鎖は、単にスイッチをオフに来た 
    のsetTimeout（（）=> { 
      ;のFn（項目）
      canuse =をtrueに ; // スイッチが開いて実行していた
    ）、}待ち時間; 
  }; 
} 
    // リスト堰を追加
    barrageCyclic非同期（）{ 
      待つこの .Arr.forEach（（ELE、I）=> {
         // 内部堰リストを追加するためにデータ
        この.doommList.push（
           新新Doomm（
            ELE、
            Math.ceil（Math.random（）  * 70 + 10）、
            Math.floor（Math.random（） * 20 + 10 ）、
            getRandomColor（）、
            I 
          ）
        ）。
      }）; 
      この .doommData = この.doommList。
    }、