イイダリョウのブログ。【JS】Math.random()でつくるサイコロとおみくじ2019-04-12【JS】Math.random()でつくるサイコロとおみくじJSJSのMathオブジェクトには数値系の組み込み関数が用意されています。その中の乱数(ランダムな数字)を返す関数Math.random()を使ってサイコロとおみくじを作ってみました。【目次】Mathは数値系のオブジェクトサイコロにMath.random()で乱数を表示Math.random()に6を掛けるMath.floor()で小数を切り捨てる乱数の式に1を足す配列を使ってサイコロをおみくじにする。クモのようにコツコツとMathは数値系のオブジェクトJSにあらかじめて用意されているMathオブジェクトには数値系の組み込み関数が用意されています。(「Math」とは「数学」という意味です)例えばMath.PIは円数率(パイ)を返します。alert(Math.PI);//結果//3.141592653589793サイコロにMath.random()で乱数を表示Mathオブジェクトの組み込み関数Math.random()は乱数(ランダムな数字)を返します。これを使ってサイコロを作ってみます。ここを押してみてください。CodePen.ありゃりゃ?見ての通り、長々と少数がある数値が表示されてますね。*1.コードを見ていきましょう。クモのようにコツコツとまずはHTMLから。id="saikoro">1</div>#saikoroに初期値の1を入れています。0.7;}主な内容は#saikoroへのスタイルです。グレー背景の角丸ボックスの中央に文字が表示されています。変数saikoroの中身を変数nmbに変更(innerHTML)する変数saikoroをクリックした時に関数sainome()を実行するMath.random()は0以上1未満(0.99999...)の間の乱数を返します。MDNこのままではいつまでたっても1より大きい数は表示されません。Math.random()に6を掛けるMath.random()の数値に掛け算をしてみましょう。1の10倍は10です。乱数を1〜10までにしたい場合は10を掛ければいいということになります。サイコロの1〜6にしたい場合はどうなるでしょうか。6を掛ければ実現できそうです。CodePen.うーむ、数字は1よりも大きくなったけど、まだ長々とした少数が続きますね。*2コードはこうなりました。6と6を掛けています。この少数を切り捨てたい。するか?Math.floor()で小数を切り捨てる少数の切り捨てはMath.floor()という組み込み関数が用意されています。CodePen.やた!少数が消えた!!*3コードはこうなっています。false);変数nmbのところ、Math.floor(Math.random()*6)。乱数の式全体をMath.floor()の引数の中に入れました。これで少数が切り捨てられました!さて、サイコロを何回か押すうちに、6が出ないことに気がつきます。逆に0がでちゃってますね。先ほどMath.random()は0以上1未満と書きました。0に幾つかけても0のままだし、1未満(0.99999...)にいくら6を掛けても6にはならないわけです。うーむ、どうすべい...。乱数の式に1を足す0〜5しかでないサイコロを1〜6にしたい。最小値と最大値、どちらも1足りない。いうことは乱数の式の最後に1を足すとよさそうです!やってみた。CodePen.おお!今度は1〜6の数が出てきます!!コードはこうです。1で6を掛けたあとに1を足しています。これでサイコロが完成しました!転がっている感がなくてなんだか味気ないですけどね...。(今後改造できればと思います)配列を使ってサイコロをおみくじにする。サイコロは乱数の値をそのまま表示しましたが、これを配列のn番目、と書くとおみくじになるのではないか。CodePen.押してみてください!あなたの今日の運勢はなんでしたか?このおみくじは無料なので「大吉」が出るまで何度でもどうぞwコードを見ていきましょう。id="omikuji">引く</div>id名をomikujiに変えています。ボックス内の初期値は「引く」です。0.3s;}こちらもセレクタを#omikujiに変更。スタイルの内容はほぼ同じ。ボックス内の文字数が増えたため、文字サイズなどを調整。Math.floor()の引数に乱数Math.random()を入れるところまでは同じ。乱数にunkiの配列数(length)を掛けるところが異なる。omikujiの中身を配列unkiのnmb番目に変更。乱数に配列数(length)を掛けることで、例えば配列数が7個の場合0〜6になります。配列のカウントは0番目から始まるため、今回は1を足す必要はないわけです!ちょっとの改造で値を数値から文字列に変更できましたね!他にもオブジェクトや画像などいろんなものに置き換えられそうです♪まとめMath.randomで超シンプルなサイコロとジャンケンを作りました。ホントにこれはもう車輪の再々々々...発明かよ!って感じですが、自分で作って体験をしたかったのでwユーザーの操作に対し「こうしたらこうなった」という予定調和ではないランダムな動きを返したい場合の起点になる関数かと思います。ジャンケンなどのゲームや、クスッと笑えるジョークコンテンツ、ランダムな動きのアニメなど、いろいろな場面に使えるかと思います。それではまた!!※参考:ネイティブJSやってみたシリーズqiita.com*1:スマホだと幅が増えすぎて見切れるようです。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-07-21【p5.js】クリエイティブコーディングに挑戦(その2)p5.jsシリーズ、前回、挑戦したドットインストールの「p5.jsク...2019-07-05WordPressのCSSやJSをテーマのphpファイルをいじらずにダッシュボードだけでカスタマイズ...WordPressの前回の記事でGutenbergのブロックを使いコードを1行...2019-06-20【p5.js】クリエイティブコーディングに挑戦(その1)p5.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。