ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。
前回の内容については、こちらからどうぞ。
今回やること
第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人プレイ用のページですが、人数が増えてもプレイヤー名を入力する欄が増えるだけなので、省略します。)
ゲーム開始ボタンを押すと、ゲームをプレイするためのページ(次回作成します)に、タイトル画面に戻るボタンを押すと、前回作成したゲームタイトルの画面に遷移します。
プレイヤー名やタイマー時間に入力漏れがある状態でゲーム開始ボタンを押すと、アラートが表示されます。
次の投稿について
次回は満を持して、ゲームの動作部を実装します。
投稿次第、リンクを追加するので、ぜひご覧ください。
以下リンク先より、ぜひご覧ください。
このプロジェクト全体の内容をご覧になりたい方は、以下のリンク先のまとめページよりご確認ください。
最後までご覧いただき、ありがとうございました。