🌊

【初心者向け】FontAwesomeを使ったサイコロ コロコロ

1 min read

概要

この記事では、PHPで書かれたサイコロをFontAwesomeで表現した処理を紹介します。
初めてプログラムを学習するのに最適な、ランダム処理や分岐処理を利用しています。

表示イメージ

利用イメージ

  • ゲームサイトでサイコロを使ったランダムな処理を行う事ができます
  • 応用する事でじゃんけんおみくじといったものを作ることができます

コード

説明は省略しますが、XAMPP等のPHPのサーバーが構築されている事を前提としています。

dice.php
<?php
    // 変数にサイコロの目をランダムに代入
    $r = rand(1,6);
    // 変数にサイコロの目に応じてFontAwesomeを代入
    switch($r){
        case 1:
            $dice = '<i class="fas fa-dice-one"></i>';
            break;
        case 2:
            $dice = '<i class="fas fa-dice-two"></i>';
            break;
        case 3:
            $dice = '<i class="fas fa-dice-three"></i>';
            break;
        case 4:
            $dice = '<i class="fas fa-dice-four"></i>';
            break;
        case 5:
            $dice = '<i class="fas fa-dice-five"></i>';
            break;
        case 6:
            $dice = '<i class="fas fa-dice-six"></i>';
            break;
    }
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Dice koro x2 ...</title>
    <!-- FontAwesomeを読み込み -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<style>
    /* 表示位置のバランス調整 */
    body{margin: 100px;}
    /* サイコロのサイズを指定 */
    i{font-size: 50px;}
</style>
<body>
    <!-- PHPで$diceに代入した内容を出力 -->
    <?= $dice ?>
</body>
</html>

解説

  1. PHPの部分で1~6までのランダムな数字を生成しています。
  2. 生成された1~6の数字に応じたFontAwesomeを$dice変数に代入しています。
  3. HTML部分でFontAwesomeを出力しています。

応用

この処理を応用すると、おみくじの様な処理を行う事もできます。
また、敵グラフィックをランダムに表示させる処理を行う事もできます。

Discussion

ログインするとコメントできます