1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-01-26

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

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

今回やること

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

プレイヤー名、制限時間の設定画面

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

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

@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

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

player_name_2 alert.png

次の投稿について

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

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

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?