Click here for free DL of the app version that can save data.

No:5239

4730

←

Prev Next

→

ニコニコ動画コメントをランダムに生成し、表示エリア内を右から左に流れるアニメーションで表示します..ALL
Developer anonymous｜Date and time 70/1/1 9:38:25
Build time unknown sec｜Game capacity 2.305KB｜

Script

了解しました。以下に、スマホで遊べるニコニコ動画風のコメントアニメーションを実装したゲームの例を示します。

コメントアニメーションゲーム

このプログラムでは、指定したコメントを一定の感覚で生成し、表示エリア内を右から左に流れるアニメーションで表示します。コメントは配列に事前に用意しておき、その中からランダムに選ばれます。新たなコメントを生成する感覚は`setInterval`関数で設定しています。コメントは`div`要素として生成され、`comment`クラスが追加され、アニメーションが適用されます。スタイルはCSSで指定しています。このプログラムを実行すれば、スマホで遊ぶことができます。コメントが画面内を流れる様子を楽しむことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

了解しました。以下に、スマホで遊べるニコニコ動画風のコメントアニメーションを実装したゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>コメントアニメーションゲーム</title>
  <style>
    #commentArea {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
    }
    .comment {
      position: absolute;
      top: 0;
      right: 0;
      white-space: nowrap;
      font-size: 20px;
      animation: commentAnimation 10s linear infinite;
    }
    @keyframes commentAnimation {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }
  </style>
</head>
<body>
  <h1>コメントアニメーションゲーム</h1>
  <div id="commentArea"></div>

const comments = [
      'ニコニコダヨー',
      '楽しいゲームですね',
      'これは面白いアニメーション！',
      'スマホで遊びやすいです！',
      'コメントが流れるのが面白い',
      'ゲーム化されたニコニコ動画みたい！'
    ];

function generateComment() {
      const comment = comments[Math.floor(Math.random() * comments.length)];
      const commentElement = document.createElement('div');
      commentElement.classList.add('comment');
      commentElement.innerText = comment;
      commentArea.appendChild(commentElement);
    }

setInterval(generateComment, 2000);
  </script>
</body>
</html>
```

このプログラムを実行すれば、スマホで遊ぶことができます。コメントが画面内を流れる様子を楽しむことができます。