こんにちは、WEBエンジニアのとうふです。
私がプログラミング初心者のころ困ったのが、
でした。
ifやforeach、配列がどういうものか書き方はわかったけど、実際WEBサービスを作るときにどんな役割をするのか、イメージし辛いんですよね。
そのとき、何か練習問題がもっとあればいいのに…と感じていました。
今回はプログラミング講座の第1弾として、初心者でも基本を学びながら簡単に作ることができる「じゃんけんゲーム」の練習問題ソースコードと、解説を紹介したいと思います！
目次
じゃんけんゲーム：デモページ
今回は、じゃんけんの手を選んで「勝負する！」をクリックするとコンピューターとじゃんけんできるゲームを作りたいと思います！
最後にHTMLソースも用意しているので、コピーして使ってくださいね！
デモページはこちら↓
じゃんけんゲーム
実装するときの2つのポイント
このじゃんけんゲームの大まかな処理の流れは、
- プレイヤーがじゃんけんの手を選ぶ
- 「勝負する！」をクリックして値をPOSTする
- POSTを受け取ったらコンピューターの手をランダムで選ぶ (配列)
- プレイヤーとコンピューターで勝負する (条件分岐)
- 勝敗とプレイヤー、コンピューターの手を画面に表示する
のようになっています。
①、②はHTMLのformからPOSTするだけなので、すでにソースに記述しています。
今回実装してもらうのは、③〜⑤の部分になります。
① コンピューターの手をランダムで選ぶ
まず第一に必要な処理が、コンピューターが出す手をグー・チョキ・パーの値の中からランダムで選ぶ処理です。
ランダムで選ぶ処理にも様々なパターンがありますが、今回は配列の練習を兼ねて、配列使って実装してみてください！
配列以外にも、より良い処理を思いつけばそれを実装してもOKです！
② 勝敗を判定する条件分岐
じゃんけんゲームの核となる勝敗判定の処理をどのように処理するかが重要です。
プレイヤーとコンピューターの手が出揃ったら、その2つを比較して勝敗を決めます。
- 両者が同じ手なら「あいこ」
- プレイヤーがパー、コンピューターがグーなら「勝ち」
- プレイヤーがチョキ、コンピューターがグーなら「負け」
のように、プレイヤーの勝敗を条件分岐を使って判定しましょう。
条件分岐はifまたはswitch、どちらを使っても構いません。
分かりやすく・行数が少なく・スマートな分岐を考えてみましょう！
PHPを基礎から理解したいときは、書籍を一通り読んでみると良いでしょう。
わからない時にすぐ復習できたり、コードの理解が深まるので習得度もグンと上がりますよ！
＼今回の練習問題あたりの勉強をやるなら下記の書籍がおすすめです！／
サンプルコード（PHP・HTML・CSS）
ローカル環境で作る場合の開発環境準備
下記の記事を参考にしてください！難しいインストール不要で開発を始められますよ！
サンプルコードを使ってゲーム画面を作ってみよう
今回は3つのファイルを用意しました。
ゲーム画面のindex.phpとstyle.cssは下記のソースをコピーして使ってください。
ファイルは全て同じディレクトリ階層に配置すればOKです。
- index.php (スタート画面)
- battle.php (じゃんけん勝負の処理・結果表示画面)
- style.css (見た目用)
★style.cssは長いのでこちらからコピーして使ってください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>じゃんけん</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<div class="header-logo">ゆるグラミング講座</div>
</header>
<main>
<h1>練習問題(1) じゃんけん</h1>
出す手を選んで勝負してください。
<div class="form-box">
<form action="battle.php" method="post">
<label>
<input type="radio" title="playerHand" name="playerHand" value="グー" checked>グー
</label>
<label>
<input type="radio" title="playerHand" name="playerHand" value="チョキ">チョキ
</label>
<label>
<input type="radio" title="playerHand" name="playerHand" value="パー">パー
</label>
<button type="submit" class="battle-button">勝負する！</button>
</form>
</div>
</main>
<footer>
<small>©yurugramming!!</small>
</footer>
</div>
</body>
</html>
<?php
/**
(1) 勝敗（勝ち・負け・あいこ）は$resultに代入してください
(2) プレイヤーの手は$playerHandに代入してください
(3) コンピューターの手は$pcHandに代入してください
**/
// ここから処理を記述
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>じゃんけん</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<div class="header-logo">ゆるグラミング講座</div>
</header>
<main>
<h1>結果は・・・</h1>
<div class="result-box">
<p class="result-word"><?= $result ?>！</p>
あなた：<?= $playerHand ?><br>
コンピューター：<?= $pcHand ?><br>
<p><a class="red" href="index.php">>>もう一回勝負する</a></p>
</div>
</main>
<footer>
<small>©yurugramming!!</small>
</footer>
</div>
</body>
</html>
サンプルコードの解説：プログラムを書いてみよう！
じゃんけんの勝敗を判定するプログラムをbattle.phpの上部に書いてみましょう！
【注意点】
ソースにも記載していますが、battle.phpで勝敗と両者の手を表示するため、下記を決められた変数に代入してください。
- 勝敗（勝ち・負け・あいこ）は$resultに代入
- プレイヤーの手は$playerHandに代入
- コンピューターの手は$pcHandに代入
また、表示の部分で
あなた：<?= $playerHand ?>のように書いていますが、これはechoのショートタグで、
<?php echo $playerHand; ?>
<?= $playerHand ?>この2つは同じ動作になります。
HTML内にPHPを記述する場合、ごちゃついて読みにくくなってしまいがちです。
ショートコードを使う方が「綺麗で読みやすいソース = 可読性が良いソース」になりますね。
じゃんけんゲーム：PHPサンプルコード例
処理の書き方は様々なので、ここに記載したものよりもっとスマートでかっこいい処理の書き方も必ずあります。
あくまで1例として参考にしていただけたらと思います！
<?php
// じゃんけんの手を配列に代入
$hands = ['グー', 'チョキ', 'パー'];
// プレイヤーの手がPOSTされたら
if (isset($_POST['playerHand'])) {
// プレイヤーの手を代入
$playerHand = $_POST['playerHand'];
// PCの手をランダムで選択
$key = array_rand($hands);
$pcHand = $hands[$key];
// 勝敗を判定
switch ($playerHand) {
case ($playerHand === $pcHand):
$result = 'あいこ';
break;
case 'グー':
$result = ($pcHand === 'チョキ') ? '勝ち' : '負け';
break;
case 'チョキ':
$result = ($pcHand === 'パー') ? '勝ち' : '負け';
break;
case 'パー':
$result = ($pcHand === 'グー') ? '勝ち' : '負け';
break;
}
}この場合、グー・チョキ・パーを入れた配列($hands)を元に、array_rand()を使ってランダムなキーを取得してコンピューターの手を決めています。
勝敗の条件分岐ではswitch文を使い、
- プレイヤーとコンピューターが同じ手なら「あいこ」
- プレイヤーが「グー」のとき：
コンピューターが「チョキ」なら「勝ち」そうでなければ「負け」 - プレイヤーが「チョキ」のとき：
コンピューターが「パー」なら「勝ち」そうでなければ「負け」 - プレイヤーが「パー」のとき：
コンピューターが「グー」なら「勝ち」そうでなければ「負け」
プレイヤーの手が〇〇だったときコンピューターがXXなら勝ちor負けを判定しています。
あいこを先に判定すれば、残りの結果は「勝ち」か「負け」のどちらかになりますよね。
また、見慣れない方もいるかもしれませんが、
$result = ($pcHand === 'グー') ? '勝ち' : '負け';これは三項演算子といって、
$resultの値を式($pcHand === ‘グー’)がtrueなら「勝ち」、falseなら「負け」とする比較演算子です。
これをifで書くと、このようになります。
if ($pcHand === 'グー') {
$result = '勝ち';
} else {
$result = '負け';
}三項演算子を使うと逆に可読性が悪くなることもありますが、じゃんけんのようにたくさんの分岐が必要な場合にはソースも短くなり有効です。
今回はswitchと三項演算子を使いましたが、ifのみで書くことも可能です。
まとめ：不明な点あればご連絡ください！
いかがでしたでしょうか？
もっと回答サンプルよこせ！
動かないんですけど？
解説、よくわからん
間違ってるぞこのやろー！
などなどありましたら、コメントまたはとうふのTwitterまでご連絡ください。
できる限り対応したいと思います！
練習問題を気軽にローカル環境で試したい方は、以下の記事もご参考ください。
サクッとMacで今回のコードを動かすことができますよ〜！
