ダッシュで奪取

レガシーSIer → webエンジニア(見習い) 新しく知ったことのメモを書いています。

【PHP】おみくじプログラムを書いた

簡単なおみくじを作りました。

サンプルページ

目次

  1. 全体像
  2. おみくじ配列を作る
  3. おみくじの個数を数える
  4. 乱数を生成する
  5. ランダムにおみくじを取り出す
  6. 2〜5をまとめる

1.全体像

<?php
    // おみくじ配列を作る
    $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];

    // 乱数を生成
    $fortune = mt_rand(0,count($omikuji)-1);

    // おみくじを引く
    echo $omikuji[$fortune].PHP_EOL;
?>

2.おみくじ配列を作る

<?php
    // おみくじ配列を作る
    $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];
    echo $omikuji[2].PHP_EOL;
?>

実行結果

中吉

最初のおみくじから順番に、0, 1, 2 ...の連番が振られています。
カウントは0から始まるので、2番目を取り出すと3個目の「中吉」が表示されます。

3.おみくじの個数を数える

<?php
    $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];
    // おみくじの個数を数える
    echo count($omikuji).PHP_EOL;
?>

実行結果

7

おみくじの個数を確認。
次の「乱数を生成する」で使用します。

4.乱数を生成する

<?php
    $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];

    // 乱数を生成する
    $fortune = mt_rand(0,count($omikuji)-1);
    echo $fortune.PHP_EOL;
?>

表示結果

3
4
0

0〜6の範囲で乱数が生成されることを確認。
配列は0から始まるので、1〜7では駄目。
mt_rand(0,6)と書いてもいいのですが、count($omikuji)を使用することで常におみくじの数で乱数を生成できるようになり、
後で突然おみくじの種類を追加したくなった時も、この部分のソースを修正せずに済みます。

5.ランダムにおみくじを取り出す

<?php
    $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];
    $fortune = mt_rand(0,count($omikuji)-1);

    // ランダムにおみくじを取り出す
    echo $omikuji[$fortune].PHP_EOL;
?>

実行結果

吉
中吉
凶

乱数を使用して、ランダムにおみくじを引くことができました。

6.2〜5をまとめる

ここまでに作ったものを組み合わせて、表示できるようにしました。
ページをリロードする度におみくじの結果が変わります。

<?php
    $omikuji = [ '大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];
    $fortune = mt_rand(0,count($omikuji)-1);
    $result  = $omikuji[$fortune].PHP_EOL;
?>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>おみくじ PHP</title>
    </head>
    <body>
        <div class="test20190420">
            <h1>おみくじサンプル</h1>
            <p>あなたの運勢は…<span id="omikuji"><?php echo $result; ?></span>!!</p>
        </div>
    </body>
</html>

style.css

body {
    background:    #fff;
    margin:        20px;
    padding:       0px;
}

.test20190420 h1 {
    border-top:    solid 3px #ffb6c1;
    border-bottom: solid 3px #ffb6c1;
}

#omikuji {
    color:         #ff0000;
    font-weight:   bold;
    border-bottom: double #ff0000;
}

使い回すためとはいえ、すごいクラス名…
次はこれをボタンで引き直せるようにします。