Javascript

おみくじを作ろう1

箱をクリックしていくと一つだけ当たりが出るおみくじのようなゲームを作ってみます。

  • ランダムな整数値の生成

ランダムな整数値の生成

・では前回までに作ったdiv要素で簡単なゲームを作っていきましょう。今回ボックスをいくつか用意してクリックしたらランダムで文字やアニメーションをして大吉か小吉かを表示するようなおみくじを作っていきたいと思います。

JavaScriptを使ってdivを生成

100個のdiv要素を作る

・まずボックスの数ですが後で個数を変えられるように定数にしておくといいです。今回は5つのボックスを作って行きたいのでconst num = 5;というようにしておくといいでしょう。

・この数字を変えるだけでボックスの個数を指定でき、難易度を簡単に変えることができるようになるのでおすすめです。これに合わせてiのカウンターもnumに変えておきましょう。i < num;と変えればいいです。

・次に大吉の箱をランダムで1個選ぶ命令をしていきましょう。考え方としてはiが0から4までのナンバリングがされているのでその中から0から4までの整数値を選んで行けばいいでしょう。

・やり方としてはMath.random() * numと書いてあげればいいです。これはMath.random()で0から1未満のランダムな数値を生成するのでそれにnumをかけることによって0から5未満のランダムな数値になります。

・しかしこのままだと小数点が入ってしまい整数値ではないのでMath.floor()を使っていきます。これは小数点以下を切り捨ててくれます。Math.floor(Math.random() * num);と書いていきましょう。

・この数値も定数にしておくと便利なので好きな定数名をつけてあげましょう。

・長くなりそうなので続きは明日やっていきます。

-Javascript