【jQuery】今年の指針に？！ランダムおみくじ2021を作ってみた

（株）くふうしずおか

2024年7月4日 19:42

今回は、2021年の年明けに公開した「おみくじ」の制作方法をご紹介します。

実装方法

実装方法は、jQueryを使用した単純なものです。
① 1〜3の数字をランダムで決定する
② ①で決まった数字に沿って結果を出力する
③ おみくじを引くボタンを作る
①～③が大まかな内容です。
以下はコードのデモになります。

① 1〜3の数字をランダムで決定する

こちらは以下の方法で実装しています。

const cont = Math.ceil(Math.random()*3);

この書き方は、整数をランダムで出す際によく使われる書き方です。

constとは変数であり、いわば値を入れておくための箱です。
ここにcontという名前をつけ、1〜3の数字をランダムで入れます。

Math.ceilとは、小数点以下を切り上げて返すメソッドです。
Math.randomとは、0 以上 1 未満の範囲で、擬似乱数を返すメソッドです。

0 以上 1 未満の数字に3をかけることで、0〜3の数字を出力できます。
しかしこのままですと、ほぼ0.573や2.773など整数以外が出てきてしまうので、これを整数だけにするために、Math.ceilを使うんですね。つまり0.573なら1、2.773なら3が返って来ます。

かける数字を増やせば、その分出てくる数字も増えます。例えば*9にすると、1～9の数字がランダムで抽選できます。

② ❶で決まった数字に沿って結果を出力する

if(cont == 1){
    $(".omikuji_name”).html("大吉が出ました");
    $(“.omikuji_text”).html("おめでとうございます。大吉が出ました。");
    $(".omikuji_img”).attr('src','common/img/daikichi.jpg');
}

上記はcontの数字が1だった場合です。
html（）では、任意のhtml要素を書き換えています。
attr（）では、任意のhtml要素の属性を取得してsrcの中身のみを書き換えています。

同様に、2の場合、3の場合…と内容を用意していくことで、おみくじの実装が可能です。ここまでがおみくじを抽選するためのコードです。

③ おみくじを引くボタンを作る

最後に、上記のコードを実行するためのボタンを追加します。
まず、おみくじ抽選のコードに名前をつけて、呼び出しができるようにします。

function omikuji() {
//ここに抽選するためのコードを入れる
}

次に、実行用のコードを追加します。

$(".omiguji_btn").on("click",function () {
        omikuji();
    });

html側にボタンを追加し、omiguji_btnというクラス名を追加したら完成です。

実際のページでは、おみくじボタンを押すと結果がポップアップで表示されるようになっていたり、もう一度おみくじを回すというリトライのボタンも追加しています。

まとめ

WEBだからこそできるコンテンツが作れたかな、と思っています。でぜひアクセスしてみてくださいね。

引き続き、くふうしずおかのメディア、コンテンツもよろしくお願いします。