素数判定関数を使って簡単なゲームを作った話③

ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700

前回の内容については、こちらからどうぞ。

https://qiita.com/hitoki_univ/items/5893785797243794d33a

# 今回やること
第2回では、ゲームのタイトル画面を作成しました。
今回は、タイトル画面からのリダイレクト先である、プレイヤー名と制限時間を設定する画面を作成します。

# プレイヤー名、制限時間の設定画面
前回作成したページでは、選択したプレイヤー人数に応じて異なるページにリダイレクトするようにしました。
今回はそのリダイレクト先のページを作成するので、複数のページを作成します。しかし、基本構造はどのページも同じなので、今回は2人用のページを主に確認していきます。

### HTML
``` html
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="player_name.css">
    <title>プレイヤー名入力</title>
    <script>
      // フォームのバリデーションを行う関数
      function validateForm() {
        // プレイヤー1とプレイヤー2の入力値を取得
        var player1 = document.getElementById("player1").value;
        var player2 = document.getElementById("player2").value;
        // タイマーの入力値を取得
        var timer = document.getElementById("timer").value;
        // プレイヤー名が入力されていない場合はアラートを表示し、送信を中止
        if (player1 == "" || player2 == "") {
          alert("すべてのプレイヤー名を入力してください");
          return false;
        }
        // タイマーが入力されていない場合はアラートを表示し、送信を中止
        if (timer == ""){
          alert("タイマーの設定時間(秒)を入力してください");
          return false;
        }
        // 入力値に問題がなければ送信を許可
        return true;
      }
    </script>
  </head>

  <body>
    <h1>プレイヤー名入力</h1>
    <div class="input_information">
      <!-- フォーム送信時にvalidateForm関数を呼び出し、バリデーションを実行 -->
      <form action="prime_game_2.php" method="post" onsubmit="return validateForm()">
        <label for="player1">プレイヤー1:</label><br>
        <!-- プレイヤー1の名前入力フィールド -->
        <input type="text" id="player1" name="player1" autocomplete="off"><br>
    
        <label for="player2">プレイヤー2:</label><br>
        <!-- プレイヤー2の名前入力フィールド -->
        <input type="text" id="player2" name="player2" autocomplete="off"><br>

        <label for="timer">タイマー時間(秒)</label><br>
        <!-- タイマー設定の数値入力フィールド -->
        <input type="number" id="timer" name="timer"><br>
    
        <!-- ゲーム開始ボタン -->
        <input type="submit" value="ゲーム開始">
      </form>
    
      <!-- タイトル画面に戻るボタン -->
      <button onclick="location.href='title.php'">タイトル画面に戻る</button>
    </div>
  </body>
</html>

```
プレイヤー名と制限時間の入力、ゲーム開始ボタンは、HTMLのformタグを使って作成しました。
3人~5人用ページでは、プレイヤー名入力部分を人数に合わせて増やしてあります。

validateForm関数では、入力のエラーチェックを行っています。
具体的には、プレイヤー名、タイマーの値が入力されていない状態でゲーム開始ボタンを押した際にその旨を知らせる警告を表示しfalseを、問題がなければ送信を許可するのでtrueを返す、という動作をします。
formタグの"onsubmit"でvalidateForm関数の返却値を受け取ることで、データの送信の可否を判断し、データ送信が許可された場合は"action"で指定したPHPファイル(ここでは、prime_game_2.php)にPOST方式でプレイヤー名とタイマーの時間を送信します。

また、人数選択を間違えた時などのために、タイトル画面に戻るボタンも作成しています。

### CSS
``` css
@charset 'UTF-8';

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    text-align: center;
    padding: 20px;
    background-color: #007BFF;
    color: white;
}

.input_information {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

input[type="submit"], button {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}
```

前回も書いた気がしますが、自分はデザインについては全く知識がないので、CSSは特段こだわっていません。強いて言えば、タイトルページなどと印象が変わらないようにだけ気をつけています。


# 表示結果
この文書をブラウザで読み込むと、このような表示になります。
(これは2人プレイ用のページですが、人数が増えてもプレイヤー名を入力する欄が増えるだけなので、省略します。)
![player_name_2 表示結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684916/ff7f7aa1-82e2-b035-310f-9a005f558b64.png)


ゲーム開始ボタンを押すと、ゲームをプレイするためのページ(次回作成します)に、タイトル画面に戻るボタンを押すと、前回作成したゲームタイトルの画面に遷移します。
プレイヤー名やタイマー時間に入力漏れがある状態でゲーム開始ボタンを押すと、アラートが表示されます。

![player_name_2 alert.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684916/f1d5485c-bb00-e733-a05f-7e2daba19abf.png)


# 次の投稿について
次回は満を持して、ゲームの動作部を実装します。
~~投稿次第、リンクを追加するので、ぜひご覧ください。~~
以下リンク先より、ぜひご覧ください。

https://qiita.com/hitoki_univ/items/c47836e9f418af6b1eb8


このプロジェクト全体の内容をご覧になりたい方は、以下のリンク先のまとめページよりご確認ください。

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700

最後までご覧いただき、ありがとうございました。