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

No:1746

2889

Dragon Quest
Developer User3400｜Date and time 23/6/19 0:00:19
Build time 78.426 sec｜Game capacity 7.274KB｜

この課題には制限時間があるため、ドラゴンクエストのような遊びやすくスマホ対応の大規模なアプリを作ることは難しいでしょう。代わりに、簡単な数当てゲームを作ってみましょう。 HTMLファイル

数当てゲーム

1〜100の数字を当てよう！

5回まで挑戦できます。

このHTMLファイルは、数当てゲームを実装し、スタイルを設定しています。フォントにはGoogle FontsからNoto Sans JPを使っています。背景色は#f5f5f5、ボタンの色は#2ecc71になっています。 JavaScriptの実装
このJavaScriptコードは、ゲームのロジックです。`start()`関数は、新しいゲームを始めるときに呼び出されます。`Math.random()`を使って1〜100のランダムな数字を生成し、`answer`変数に代入します。また、`chance`変数には残りの挑戦回数5を代入します。`result`要素を空にし、`btnStart`ボタンを無効にして、`inputNumber`要素を有効にします。 `guess()`関数は、入力された数字をチェックして、正解かどうかを判断します。まず、1〜100の範囲外や数字でない場合はエラーメッセージを表示して、戻ります。次に、`chance`変数を減らします。もし入力された数字が正解なら、`result`要素に「正解！」と表示して、`btnStart`ボタンを有効にし、`inputNumber`要素を無効にします。そうでない場合、`chance`変数が0になるまで挑戦が続くので、残り回数を表示します。最後に、`inputNumber`要素を空にして、フォーカスを当てます。 `inputNumber`要素では、Enterキーを押すことで`guess()`関数を呼び出すように設定しています。これで、数当てゲームが完成しました。スマホで操作する場合は、縦画面に最適化されているため、横画面ではレイアウトが崩れる可能性があります。また、`alertHisa()`関数を使わないで、`result`要素にメッセージを表示しています。絵文字は使っていませんが、背景色やボタンの色が目立つように設定しました。

→ 　

1　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

この課題には制限時間があるため、ドラゴンクエストのような遊びやすくスマホ対応の大規模なアプリを作ることは難しいでしょう。代わりに、簡単な数当てゲームを作ってみましょう。

HTMLファイル

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>数当てゲーム</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
      * {
        font-family: 'Noto Sans JP', sans-serif;
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background-color: #f5f5f5;
      }
      .container {
        margin: 10px auto;
        text-align: center;
      }
      h1 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 5px;
      }
      input {
        padding: 5px;
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
      }
      button {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 5px;
        border: none;
        background-color: #2ecc71;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>数当てゲーム</h1>
      <p>1〜100の数字を当てよう！</p>
      <p>5回まで挑戦できます。</p>
      <input id="inputNumber" type="number" placeholder="数字を入力してください">
      <br>
      <button id="btnStart" onclick="start()">ゲームを始める</button>
      <br>
      <div id="result"></div>
    </div>
    <script>
      let answer;
      let chance;
      
      function start() {
        answer = Math.ceil(Math.random() * 100);
        chance = 5;
        document.getElementById('result').innerHTML = '';
        document.getElementById('btnStart').disabled = true;
        document.getElementById('inputNumber').disabled = false;
        document.getElementById('inputNumber').focus();
      }
      
      function guess() {
        let input = document.getElementById('inputNumber').value;
        if (input < 1 || input > 100 || isNaN(input)) {
          document.getElementById('result').innerHTML = '1〜100の数字を入力してください。';
          return;
        }
        
        chance--;
        if (input == answer) {
          document.getElementById('result').innerHTML = '正解！';
          document.getElementById('btnStart').disabled = false;
          document.getElementById('inputNumber').disabled = true;
          return;
        } else if (chance == 0) {
          document.getElementById('result').innerHTML = '残念。正解は ' + answer + ' でした。';
          document.getElementById('btnStart').disabled = false;
          document.getElementById('inputNumber').disabled = true;
          return;
        } else if (input < answer) {
          document.getElementById('result').innerHTML = 'もっと大きい数です。あと ' + chance + ' 回挑戦できます。';
        } else {
          document.getElementById('result').innerHTML = 'もっと小さい数です。あと ' + chance + ' 回挑戦できます。';
        }
        
        document.getElementById('inputNumber').value = '';
        document.getElementById('inputNumber').focus();
      }
      
      document.getElementById('inputNumber').addEventListener('keyup', function(event) {
        if (event.keyCode === 13) {
          event.preventDefault();
          document.getElementById('btnGuess').click();
        }
      });
    </script>
  </body>
</html>
```

このHTMLファイルは、数当てゲームを実装し、スタイルを設定しています。フォントにはGoogle FontsからNoto Sans JPを使っています。背景色は#f5f5f5、ボタンの色は#2ecc71になっています。

JavaScriptの実装

```javascript
let answer;
let chance;

function start() {
  answer = Math.ceil(Math.random() * 100);
  chance = 5;
  document.getElementById('result').innerHTML = '';
  document.getElementById('btnStart').disabled = true;
  document.getElementById('inputNumber').disabled = false;
  document.getElementById('inputNumber').focus();
}

function guess() {
  let input = document.getElementById('inputNumber').value;
  if (input < 1 || input > 100 || isNaN(input)) {
    document.getElementById('result').innerHTML = '1〜100の数字を入力してください。';
    return;
  }

chance--;
  if (input == answer) {
    document.getElementById('result').innerHTML = '正解！';
    document.getElementById('btnStart').disabled = false;
    document.getElementById('inputNumber').disabled = true;
    return;
  } else if (chance == 0) {
    document.getElementById('result').innerHTML = '残念。正解は ' + answer + ' でした。';
    document.getElementById('btnStart').disabled = false;
    document.getElementById('inputNumber').disabled = true;
    return;
  } else if (input < answer) {
    document.getElementById('result').innerHTML = 'もっと大きい数です。あと ' + chance + ' 回挑戦できます。';
  } else {
    document.getElementById('result').innerHTML = 'もっと小さい数です。あと ' + chance + ' 回挑戦できます。';
  }

document.getElementById('inputNumber').value = '';
  document.getElementById('inputNumber').focus();
}

document.getElementById('inputNumber').addEventListener('keyup', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById('btnGuess').click();
  }
});
```

このJavaScriptコードは、ゲームのロジックです。`start()`関数は、新しいゲームを始めるときに呼び出されます。`Math.random()`を使って1〜100のランダムな数字を生成し、`answer`変数に代入します。また、`chance`変数には残りの挑戦回数5を代入します。`result`要素を空にし、`btnStart`ボタンを無効にして、`inputNumber`要素を有効にします。

`guess()`関数は、入力された数字をチェックして、正解かどうかを判断します。まず、1〜100の範囲外や数字でない場合はエラーメッセージを表示して、戻ります。次に、`chance`変数を減らします。もし入力された数字が正解なら、`result`要素に「正解！」と表示して、`btnStart`ボタンを有効にし、`inputNumber`要素を無効にします。そうでない場合、`chance`変数が0になるまで挑戦が続くので、残り回数を表示します。最後に、`inputNumber`要素を空にして、フォーカスを当てます。

`inputNumber`要素では、Enterキーを押すことで`guess()`関数を呼び出すように設定しています。

これで、数当てゲームが完成しました。スマホで操作する場合は、縦画面に最適化されているため、横画面ではレイアウトが崩れる可能性があります。また、`alert()`関数を使わないで、`result`要素にメッセージを表示しています。絵文字は使っていませんが、背景色やボタンの色が目立つように設定しました。