【やってみよう】JavaScriptでおみくじを作る

「おみくじ」プログラムを作る！

腕試しとして、jQueryとJavaScriptでシンプルなプログラムを作ってみましょう

まずは要件と実装方法からです！

「おみくじ」プログラムの要件と実装方法は？

「おみくじ」プログラムの要件

• ブラウザ上で動作する
• 「おみくじを引く」ボタンがありそれを押すと結果が表示される
• 「大吉」「吉」「中吉」「小吉」「末吉」「凶」「大凶」のいずれかが表示される
• 上記の出る確率はどれも同じとする（確率に差をつけたければつけても良い）

以上となります。結果の表示にグラフィックや演出をつけると制作が難しくなりますが、今回はテキストで構いません。

技術と実現手段を考える

• HTML/CSS/JavaScriptでブラウザで動くプログラムとする
• jQueryを使用する
• ボタンタグで「おみくじを引く」を配置する
• 結果は「pタグ」に出力する
• 「大吉」「吉」「中吉」「小吉」「末吉」「凶」「大凶」は配列に入れて管理する
• 抽選は「Math.random()」関数を使用する

こんな感じです。

HTML/CSS/JavaScriptで要素を作る

では組んでいきます。

上記を最初のファイルとします。

HTML

 <h1>シンプルおみくじ</h1>
<p>ボタンを押すとおみくじの結果が表示されます</p>
<button id="button">おみくじを引く</button>
<p id="result"></p>

非常にシンプルですね。
ボタンと、結果を表示するpタグがあるだけです。
それだけだと使う人がどんなことをするページかわからないので、見出しと文章で説明をつけています。

結果を表示するJavaScript

一旦は「結果は大吉でした」と必ず表示するようにしてみましょう。

 $("#button").click(function () {
$("#result").html("結果は大吉でした");
});

はい、これで基本の構造はできましたね。
あとは抽選する仕組みをつくります。

まずは結果の入った配列を用意しましょう。

let resultArray = ["大吉", "吉","中吉", "小吉", "末吉", "凶", "大凶"];

あとはどのように抽選すれば良いか、ですが「Math.random()」関数を使用します。
「Math.random()」は0〜1未満の小数による乱数を生成するものです。
配列は6個ですので、0~6までの整数を出力したいです。※配列は0から始まるため

var random = Math.floor( Math.random() * 7 );
console.log(random);

問題なく数値が出力されるか、何回か試してみましょう。
おそらく問題なく、0~6までの数字が出るはずです。
これで配列とこの数値を結びつけます。

let resultArray = ["大吉", "吉","中吉", "小吉", "末吉", "凶", "大凶"];
$("#button").click(function () {
var random = Math.floor(Math.random() * 7);
$("#result").html("結果は" + resultArray[random] + "でした");
});

これで想定した動きとなるはずです。
お疲れ様でした！

完成デモ

html

photogentle.com