JavaScript

Web上で100ます計算を自動生成してくれるプログラムをJavaScriptで作成

2020年2月4日

こんばんは!

前回のJavaScriptでPDFを出力する方法の記事で紹介した「jsPDF」を使って、100ます計算を自動生成してくれるプログラムを作成したので共有したいと思います。

今回作成したものはこちらで使用することができます。
こちらのサイトは今回のプログラムのみで作成されたものではありません。

プログラム

 

全体の流れ

「jspdf.min.js」をhtml内で読み込んでjsPDFライブラリを使用することができます。

new jsPDFでjsPDFクラスのインスタンスを生成、textメソッドで文字を書いています。

textメソッドの第一、第二引数は文字の書き始めの場所を指定しています(x,y)。

setFontSizeメソッドで文字サイズを指定。

lineメソッドで線を引いています。第一、第二引数は線を書き始める場所、第三、第四引数は線の書き終わりの場所を指定しています。

saveメソッドでPDFを保存します。

0から9までの数字を重複なしでランダムに並べる

これが一番のポイントです。

まずvar horizontalarray2 = [10];で10個の要素を持つ配列を用意します、この要素の数だけforループを回します。

次にvar randomNum = Math.floor( Math.random() * 10);で変数randomNumに0~9の数字をランダムで入れます。

Math.floor()メソッドは与えた引数の整数部分だけを返す関数で、Math.random()は0以上1未満のランダムな浮動小数点の乱数を返す関数です。

if文の条件式!horizontalarray2.includes(randomNum)は、配列の中に変数randomNumと同じものがあるかどうかを調べています。感嘆符「!」が付いているので配列の中に変数randomNumと同じものがない場合にtrueになります。
同じものがない場合には配列に変数を加え、break;によりwhile文から抜け出します。同じものが含まれている場合はもう一度変数randomNumに乱数を入れ、また確認します。

最後にtextメソッドでPDF内で数字を書いています。

これにより0~9までの整数を重複なしでランダムに並べることができます。

おまけ

作成したものをWordPressで公開する方法がわからなかったので違うサイトを立ち上げました。

記事の冒頭にも載せましたが、100ます計算用のプリントが欲しい方は、以下のリンクから使用することができるのでぜひ!

http://monowebapp.com/100cellPDF.html

-JavaScript

Copyright© 物を作る者 , 2020 All Rights Reserved Powered by AFFINGER5.