【jQuery】ビンゴっぽいの作るよ!【part1】

良かったらシェアしてね!

受験戦争が一時休戦となり、プログラミング学習に力を入れているかいたです。

今日は、ビンゴっぽいものを作ったのでご報告に参りました。
(まだ完成してません!)

jQueryを勉強し始めて数日でビンゴっぽいのを作れるようになったので、
これから勉強する方やしたいなーと思っている方の参考になればいいなと思います。
(コードもあるよ!)

あの、まずは…僕をここまで育ててくれたふうやさんをご紹介します。

ふうやさんは、アフィリエイター兼プログラマーな大学生で、
毎日忙しそうにWordPressプラグインなどを開発している方です!
(優男です。優男すぎます。)

忙しい中教えていただき、めっちゃ感謝です!
これからも教わり続けます。よろしくです。

ということで、本題に入りましょう!
(切り替え早い)

jquery ビンゴ

こちらが、作成途中のビンゴです。

作成途中のビンゴはこちらから開けます。

『カード作成』重複のない乱数が3×3のマスに格納されます。
『レッツビンゴ!』番号の発表と発表された番号に対応するマスが赤くなります。

どちらも、クリックするだけです。

jquery ビンゴカード

こちらが、『カード作成』をクリックした結果です。
ボタンは何回か押すことができ、押すたびにビンゴカードが変わります。
※連打するとフリーズします。やめて。

ふうやさんにアドバイスをもらい、
重複のない乱数(ページ下のコードを参照)を発生させてます。

レッツビンゴを押すと…

jquery アラート

このようにビンゴが始まり、当たり番号が発表されます。

ここでは、alert を使って変数を発表しています。
15個に設定していますが、いちいちOKを押すのはだるいので改良が必要です。

addClass

発表後、マスに格納されている番号と当たり番号が一致しているか確認し、
もしも一致していたら対応するマスがこのように赤くなります。

現状ではこんな感じです!!

今後の課題は

  • もっとビンゴしやすくする。
  • ラインの判定とライン数計測
  • もっとスムーズに番号を発表する。

このくらいですかね、

ビンゴしやすくするには乱数の幅を狭くするだけですが、
運試しって心が踊るので難易度を下げるのはちょっと気が引きます。

ラインの判定は、既に頭の中では動いているので書くだけです。

スムーズに番号を発表する、これ重要ですね。
時間掛かりすぎて、プレイヤーとして腹がたちましたwww

ということで、以上の課題を解決に向けて頑張りたいと思います!またね。

以下、コードです。

良かったらシェアしてね!

記事が良かったらフォローしてね!

トップへ戻る