こんにちは、WEBエンジニアのとうふです。
私がプログラミング初心者のころ困ったのが、
でした。
ifやforeach、配列がどういうものか書き方はわかったけど、実際WEBサービスを作るときにどんな役割をするのか、イメージし辛いんですよね。
そのとき、何か練習問題がもっとあればいいのに…と感じていました。
今回はプログラミング講座の第1弾として、初心者でも基本を学びながら簡単に作ることができる「じゃんけんゲーム」の練習問題ソースコードと、解説を紹介したいと思います！
目次
じゃんけんゲーム：デモページ
今回は、じゃんけんの手を選んで「勝負する！」をクリックするとコンピューターとじゃんけんできるゲームを作りたいと思います！
最後にHTMLソースも用意しているので、コピーして使ってくださいね！
デモページはこちら↓
じゃんけんゲーム
実装するときの2つのポイント
このじゃんけんゲームの大まかな処理の流れは、
- プレイヤーがじゃんけんの手を選ぶ
- 「勝負する！」をクリックして値をPOSTする
- POSTを受け取ったらコンピューターの手をランダムで選ぶ (配列)
- プレイヤーとコンピューターで勝負する (条件分岐)
- 勝敗とプレイヤー、コンピューターの手を画面に表示する
のようになっています。
①、②はHTMLのformからPOSTするだけなので、すでにソースに記述しています。
今回実装してもらうのは、③〜⑤の部分になります。
① コンピューターの手をランダムで選ぶ
まず第一に必要な処理が、コンピューターが出す手をグー・チョキ・パーの値の中からランダムで選ぶ処理です。
ランダムで選ぶ処理にも様々なパターンがありますが、今回は配列の練習を兼ねて、配列使って実装してみてください！
配列以外にも、より良い処理を思いつけばそれを実装してもOKです！
② 勝敗を判定する条件分岐
じゃんけんゲームの核となる勝敗判定の処理をどのように処理するかが重要です。
プレイヤーとコンピューターの手が出揃ったら、その2つを比較して勝敗を決めます。
- 両者が同じ手なら「あいこ」
- プレイヤーがパー、コンピューターがグーなら「勝ち」
- プレイヤーがチョキ、コンピューターがグーなら「負け」
のように、プレイヤーの勝敗を条件分岐を使って判定しましょう。
条件分岐はifまたはswitch、どちらを使っても構いません。
分かりやすく・行数が少なく・スマートな分岐を考えてみましょう！
サンプルコード（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サンプルコード例
処理の書き方は様々なので、ここに記載したものよりもっとスマートな処理の書き方も必ずあります。
今回はじゃんけんの肝となる「勝敗を判定する」部分を2パターン書いてみました。
あくまで1例として参考にしていただけたらと思います！
ifを使った例
<?php
// じゃんけんの手を配列に代入
$hands = ['グー', 'チョキ', 'パー'];
// プレイヤーの手がPOSTされたら
if (isset($_POST['playerHand'])) {
// プレイヤーの手を代入
$playerHand = $_POST['playerHand'];
// PCの手をランダムで選択
$key = array_rand($hands);
$pcHand = $hands[$key];
// 勝敗を判定
if ($playerHand == $pcHand) {
$result ='あいこ';
} elseif ($playerHand == 'グー' && $pcHand == 'チョキ') {
$result = '勝ち';
} elseif ($playerHand == 'チョキ' && $pcHand == 'パー') {
$result = '勝ち';
} elseif ($playerHand == 'パー' && $pcHand == 'グー') {
$result = '勝ち';
} else {
$result = '負け';
}
}まず、グー・チョキ・パーを入れた配列($hands)を元に、array_rand()を使ってランダムなキーを取得してコンピューターの手を決めています。
勝敗を判定する、ifの条件としてはこのようにしています。
- プレイヤーとコンピューターが同じ手なら「あいこ」
- プレイヤーが「グー」のとき：コンピューターが「チョキ」なら「勝ち」
- プレイヤーが「チョキ」のとき：コンピューターが「パー」なら「勝ち」
- プレイヤーが「パー」のとき：コンピューターが「グー」なら「勝ち」
- それ以外の結果はプレイヤーの「負け」
あいこを先に判定すれば、残りの結果は「勝ち」か「負け」のどちらかになるので、そのあとにプレイヤーが勝っているかの判定をして、それ以外は負けの判定を出しています。
elseifは「〜じゃなくて〇〇(条件)だったら」というときに使用します。
switchを使った例
<?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;
}
}こちらは、勝敗の条件分岐でswitch文を使い、プレイヤーの手とコンピューターの手を比べています。
- プレイヤーとコンピューターが同じ手なら「あいこ」
- プレイヤーが「グー」のとき：
コンピューターが「チョキ」なら「勝ち」そうでなければ「負け」 - プレイヤーが「チョキ」のとき：
コンピューターが「パー」なら「勝ち」そうでなければ「負け」 - プレイヤーが「パー」のとき：
コンピューターが「グー」なら「勝ち」そうでなければ「負け」
また、見慣れない方もいるかもしれませんが、
$result = ($pcHand === 'グー') ? '勝ち' : '負け';これは三項演算子といって、
$resultの値を式($pcHand === ‘グー’)がtrueなら「勝ち」、falseなら「負け」とする比較演算子です。
これをifで書くと、このようになります。
if ($pcHand === 'グー') {
$result = '勝ち';
} else {
$result = '負け';
}三項演算子を使うと逆に可読性が悪くなることもありますが、たくさんの分岐が必要な場合にはソースも短なる場合があります。
今回の範囲を学べるおすすめ書籍&レッスン
今回使用した「$_POST」や「if」などがよく分からない…という場合は、ドットインストールの下記のレッスンを受けてみると理解が進むと思います！
まとめ：不明な点あればご連絡ください！
いかがでしたでしょうか？
もっと回答サンプルよこせ！
動かないんですけど？
解説、よくわからん
間違ってるぞこのやろー！
などなどありましたら、コメントまたはとうふのTwitterまでご連絡ください。
できる限り対応したいと思います！
練習問題を気軽にローカル環境で試したい方は、以下の記事もご参考ください。
サクッとMacで今回のコードを動かすことができますよ〜！
