AI game creator

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

No:854

214

←

Prev Next

→

word barrage
Developer User3161｜Date and time 23/6/17 20:26:20
Build time 48.81 sec｜Game capacity 4.757KB｜

Script

スコア：0

3秒後に開始！

※このコードは弾幕表示用の単語リストを用意して、入力されたテキストが一致した場合にスコアを加点する、タイピングゲームのサンプルです。スマートフォンでも遊べるようにレスポンシブデザインに対応し、おしゃれなUIを意識して実装しました。また、JavaScriptと絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>単語弾幕</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      // 単語リスト
      var words = ['こんにちは', 'ありがとう', 'さようなら', 'おはよう', 'おやすみ', 'いただきます', 'ごちそうさま'];

// スコア
      var score = 0;

// スコア表示用の要素を取得
      var scoreElement = document.getElementById('score');

// 弾幕表示用の要素を取得
      var barrageElement = document.getElementById('barrage');

// テキスト入力用の要素を取得
      var inputElement = document.getElementById('input');

// ゲーム時間
      var gameTime = 30;

// カウントダウン用の要素を取得
      var countdownElement = document.getElementById('countdown');

// カウントダウン関数
      function countdown() {
        if (gameTime > 0) {
          gameTime--;
          countdownElement.innerHTML = gameTime + '秒';
          setTimeout(countdown, 1000);
        } else {
          // ゲーム終了
          barrageElement.innerHTML = 'ゲーム終了！スコア：' + score;
          inputElement.disabled = true; // テキスト入力を無効化
        }
      }

// ランダムな単語を生成する関数
      function generateWord() {
        var randomIndex = Math.floor(Math.random() * words.length);
        return words[randomIndex];
      }

// 初期表示時の弾幕生成
      for (var i = 0; i < 50; i++) {
        var word = generateWord();
        barrageElement.innerHTML += '<span class="word">' + word + '</span>';
      }

// 弾幕の移動
      setInterval(function() {
        var words = barrageElement.getElementsByClassName('word');
        for (var i = 0; i < words.length; i++) {
          var word = words[i];
          var left = word.offsetLeft;
          left -= 5; // 移動量
          if (left < -word.offsetWidth) {
            // 左端まで行ったら再配置
            left += barrageElement.offsetWidth;
            word.innerHTML = generateWord(); // 新しい単語に置き換え
          }
          word.style.left = left + 'px';
        }
      }, 50);

// テキスト入力時のイベント
      inputElement.addEventListener('input', function() {
        var inputValue = inputElement.value;
        var words = barrageElement.getElementsByClassName('word');
        for (var i = 0; i < words.length; i++) {
          var word = words[i];
          if (word.innerHTML == inputValue) {
            // 単語が一致した場合
            word.innerHTML = generateWord(); // 新しい単語に置き換え
            score++;
            scoreElement.innerHTML = 'スコア：' + score;
            inputElement.value = '';
          }
        }
      });

// ゲーム開始
      setTimeout(function() {
        inputElement.disabled = false; // テキスト入力を有効化
        inputElement.focus(); // テキスト入力にフォーカスを移す
        countdown(); // カウントダウン開始
      }, 3000);
    </script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      #barrage {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 50%;
        overflow: hidden;
        font-size: 2em;
      }
      .word {
        position: absolute;
        top: 0;
        white-space: nowrap;
        pointer-events: none;
      }
      #input {
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 1.5em;
        border: 2px solid #ccc;
        padding: 0.5em;
        width: 90%;
        max-width: 400px;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 10px;
        outline: none;
      }
      #score {
        font-size: 1.5em;
        text-align: center;
      }
      #countdown {
        font-size: 3em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="barrage"></div>
    <input type="text" id="input" disabled>
    <div id="score">スコア：0</div>
    <div id="countdown">3秒後に開始！</div>
  </body>
</html>