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

No:926

138

A game in which the characters for 起, 承, 転, and 結 ..ALL
Developer User3192｜Date and time 23/6/17 22:43:02
Build time 41.448 sec｜Game capacity 3.464KB｜

を作成しました。以下が実際のプログラムです。

起承転結ゲーム

このプログラムを保存して、ブラウザで開くと「起承転結ゲーム」というタイトルのページが表示されます。ページには「新しいゲームを始める」ボタンと、「起承転結」が表記された部分があります。「新しいゲームを始める」ボタンをクリックすると、問題がランダムに選ばれ、空欄が表示されます。ここに正しい順序で「起」「承」「転」「結」の文字を入力し、Enterキーを押すことで正誤が判定され、また新しいゲームが始まります。入力中にバックスペースキーを押すことで、最後の文字を削除することができます。絵文字は使用しませんでしたが、なるべくスマホでも操作できるようにフォントサイズを大きくしてあります。また、問題リストには、「起承転結」という単語を含む言葉をランダムに取り出すようにしています。以上が「起承転結ゲーム」の実装になります。

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

を作成しました。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>起承転結ゲーム</title>
    <style>
      body {
        font-size: 2rem;
        text-align: center;
      }
      button {
        font-size: 2rem;
        margin: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>起承転結ゲーム</h1>
    <div id="game-area"></div>
    <button id="new-game">新しいゲームを始める</button>
    <script>
      // 問題のリスト
      const QUESTIONS = [
        "起承転結",
        "承転結",
        "承転",
        "起承転結完",
        "転",
        "起承",
        "起承転",
        "起承転結そして新たな起",
        "結",
        "起まで自由に話してください"
      ];

let question = null;
      let input = "";
      let isCorrect = false;

// ゲーム画面を表示する関数
      function renderGame() {
        const gameArea = document.getElementById("game-area");
        gameArea.innerHTML = `
          <p>${input}</p>
          <p>${isCorrect ? "正解！" : ""}</p>
          <p>${question}</p>
        `;
      }

// 新しいゲームを始める関数
      function newGame() {
        // 問題をランダムに選ぶ
        question = QUESTIONS[Math.floor(Math.random() * QUESTIONS.length)];
        input = "";
        isCorrect = false;
        renderGame();
      }

// キー入力時の処理
      window.addEventListener("keydown", e => {
        if (e.key === "Enter") {
          if (input === question) {
            isCorrect = true;
            newGame();
          } else {
            isCorrect = false;
          }
          input = "";
          renderGame();
        } else if (e.key === "Backspace") {
          // 最後の文字を削除
          input = input.slice(0, -1);
          renderGame();
        } else {
          // 入力を追加
          input += e.key;
          renderGame();
        }
      });

// 新しいゲームを始めるボタンのクリック処理
      const newGameButton = document.getElementById("new-game");
      newGameButton.addEventListener("click", newGame);

// 初回のゲーム開始
      newGame();
    </script>
  </body>
</html>
```

このプログラムを保存して、ブラウザで開くと「起承転結ゲーム」というタイトルのページが表示されます。ページには「新しいゲームを始める」ボタンと、「起承転結」が表記された部分があります。

「新しいゲームを始める」ボタンをクリックすると、問題がランダムに選ばれ、空欄が表示されます。ここに正しい順序で「起」「承」「転」「結」の文字を入力し、Enterキーを押すことで正誤が判定され、また新しいゲームが始まります。入力中にバックスペースキーを押すことで、最後の文字を削除することができます。

絵文字は使用しませんでしたが、なるべくスマホでも操作できるようにフォントサイズを大きくしてあります。また、問題リストには、「起承転結」という単語を含む言葉をランダムに取り出すようにしています。

以上が「起承転結ゲーム」の実装になります。