こちらは、PHP×MAMPでHigh&Lowゲームを作ろう①MAMPのインストールと設定。
の続きとなります。
もしまだお読みになられていない場合は、上記環境設定等を終えてからこちらをお読みください。
こんには Tsubasa です。
今回は High & Low ゲームの続きをやっていきます。
ごめんなさい…
今回で完成までやって行こうと思いますので、是非お付き合いください
カードゲームを始める準備
それではまず、ファイルを作成します。
今回使用するのはたった 2 つ。select.php と winOrLose.php です。
各ファイルの使用用途は以下です。
select.php ：トランプデッキの初期化と、プレイヤーが「 High 」or 「 Lose 」を選択する。
winOrLose.php：ゲームの結果画面。select.php から受け取ったカードを元に勝敗を決定する。
<?php
$suits = [
"♠︎", "❤︎", "♣︎", "♦︎"
];
// まず、トランプのマークの配列を作成します。
$faces = [];
for ($i=2; $i<11; $i++) {
$faces[] = $i;
}
$faces[] = 'J';
$faces[] = 'Q';
$faces[] = 'K';
$faces[] = 'A';
// 次に、for文を用いて、トランプの数字の配列を作成しました。
コメントでも記載しましたが、まずは
マークの配列、数字の配列を作成しました。
お、なるほど。マークの配列と数字の配列を掛け合わせたらトランプが完成しそうだな。
そうです！配列を掛け合わせればトランプの山札が完成しますね。
それではトランプの山札を作ります
$deck = array();
//デッキの配列を初期化
foreach ($suits as $suit) {
//数字の配列を foreach で反復処理
foreach ($faces as $key => $face) {
//マークの配列を foreach で反復処理
$deck[] = ["key"=>$key, "face"=>$face, "suit"=>$suit];
}
}
foreach を マーク、数字と重ねることでトランプのデッキの配列を作成しています。
PHPの配列について詳しく知りたい方はhttps://www.php.net/manual/ja/language.types.array.php
ドキュメントを読んでみよう。
それでは、山札ができたので「プレイヤー」と「相手：ディーラー」にカードを配りましょう。
shuffle($deck); // shuffle関数は配列をシャッフルします $cardPlayer = array_shift($deck); $cardOpp = array_shift($deck); // array_shift()関数は配列の先頭から要素を一つ取り出す ?>
先ほど作成したデッキをシャッフルして、カードを配りました。
また、select.php に記入する PHP はこちらで最後になりますので、終了タグをわすれずに。
PHPにはシャッフル関数なんてあるのか。
便利な関数があるもんだな。
ここまでの作業内容は動画にもまとめておりますので、ぜひご参考にしてください。
スタート画面を作る
それでは、次に簡単にスタート画面を作りましょう。
簡単なHTMLを作ります。
// select.php に続きで書いてください
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>High & Lowゲーム</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
// bootstrapを使用するために読み込みを行っています。
</head>
<body>
<div class="text-center">
<h1>High & Lowゲーム</h1>
<hr>
<form action="winOrLose.php" method="post">
<?php
echo <<< EOM
相手のカード：
{$cardOpp['suit']}{$cardOpp['face']}
<input type="hidden" name="leftCardFace" value="{$cardOpp['face']}">
<input type="hidden" name="leftCardSuit" value="{$cardOpp['suit']}">
<input type="hidden" name="leftCardKey" value="{$cardOpp['key']}">
<input type="hidden" name="rightCardFace" value="{$cardPlayer['face']}">
<input type="hidden" name="rightCardSuit" value="{$cardPlayer['suit']}">
<input type="hidden" name="rightCardKey" value="{$cardPlayer['key']}">
EOM;
//識別子はインデントしない
?>
<br><br><br>
<input type="radio" name="select" value="High" required>High
<input type="radio" name="select" value="Low">Low
<br><br><br>
<input type="submit" value="決定" class="btn btn-secondary">
</form>
</div>
</body>
</html>
echo <<< EOM は ヒアドキュメント構文と呼ばれます。
また、ヒアドキュメント内で変数を展開する場合には { } を使用します。
文字列を区切る別の方法としてヒアドキュメント構文 (“<<<“) があります。この場合、ある ID (と、それに続けて改行文字) を
PHP ドキュメント https://www.php.net/manual/ja/language.types.string.php#language.types.string.syntax.heredoc<<<の後に指定し、文字列を置いた後で、同じ ID を括りを閉じるために置きます。
識別子はインデントしてはいけません。（動画ではインデントしておりますが間違いです。失礼いたしました。）
formのアクションで、winOrLose.phpを設定して、内容をPOSTしているのか。
こうすれば、このページで配ったユーザー、ディーラーのカード情報を結果ページに渡すことができるな。
そうです！
フォームの処理については次のドキュメントを読んでみましょう。
https://www.php.net/manual/ja/tutorial.forms.php
ここまでの内容は以下の動画にあります。
スタート画面を実際にブラウザに表示する
それではここまでの作業内容を実際にブラウザに表示してみましょう。
ではまず、MAMPを立ち上げ「Open WebStart page」をクリックしてください。
立ち上がった画面の「MY WEBSITE」をクリックしましょう。
ここには htdocs に作成したディレクトリが一覧表示されます。
・high_and_low/
を選択、select.php をクリックしてください。
すると。
select.php でコーディングした HTMLが表示されたぞ！
これ実際にゲームで遊ぼうとするとどうなるんだ？
試しに押してみてください。
action 先で指定した winOrLose.php はまだ何も書いていないので白紙のページが表示されるはずです。
結果画面を作成する
それでは最後に、winOrLose.php を作成していきましょう。
<?php $cardOppFace = $_POST['leftCardFace']; $cardOppSuit = $_POST['leftCardSuit']; $cardOppKey = $_POST['leftCardKey']; $cardPlayerFace = $_POST['rightCardFace']; $cardPlayerSuit = $_POST['rightCardSuit']; $cardPlayerKey = $_POST['rightCardKey']; $highOrLow = $_POST['select']; ?>
$_POSTってなんだ？
このページで定義していないし、なんだか特殊な変数に見える
$_POST は スーパーグローバル変数と呼ばれるPHPでの定義済み変数の一つです。
今回は select.php の form で POST メソッドを使用して私た変数を連想配列で受け取っています。
なるほど。定義済みの一つと言うからには他にもあるのか？
あります！気になる方は下記のドキュメントをみてみてください。https://www.php.net/manual/ja/language.variables.superglobals.php
select.php から渡した変数を受け取ることができたので勝敗を決めていきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High & Low ゲーム</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div align="center">
<h1>High & Low ゲーム</h1>
<hr>
<?php
echo <<< EOM
相手のカード：
{$cardOppSuit}{$cardOppFace}<br>
「{$highOrLow}」を選択しました。<br><br>
あなたのカード：
{$cardPlayerSuit}{$cardPlayerFace}<br>
EOM;
//トランプの数値を比較→keyがカードの強さ。
if ($cardOppKey < $cardPlayerKey) {
$result = "High";
} elseif ($cardOppKey > $cardPlayerKey) {
$result = "Low";
} else {
$result = $highOrLow;
}
//ラジオボタン
if ($highOrLow === $result) {
echo 'You win!!';
} else {
echo 'You lose!!';
}
?>
<br>
<a href="select.php">もう一度挑戦する</a>
</div>
</body>
</html>
なるほど、if文を用いて カードの強さを比較。
結果を $result に代入しているのか。
そうです！同点だった場合にはユーザーの勝ちというロジックで作成しています。
ここまでコーディングできればブラウザで遊ぶことができると思います！
ぜひ遊んでみてください！
また以下に動画を貼っておきますので、よろしけれご参考にしてください。
勉強方法
PHP でゲームを作成してみましたがいかがだったでしょうか。
次に勉強する内容でおすすめなの本は下記のリンクに飛んでいただいたPHPの教材になりますのでご参考にしていただければと思っております。
PHP のフレームワーク Laravel を使って WEBアプリケーションを作成したい方は下記の記事から学習を進めてください！
それではお疲れ様でした！
お疲れ様でした！！
asa
おいおい、何ヶ月ぶりだよ。
①やってから進まなくて困っていたぞ。