jQuery製のミニゲームをつくってみて
エイプリルフールに合わせてたわしのミニゲームをjQueryで作ったので総括。
【クサガメ「たわし」の射幸心じゃぶじゃぶカードバトルゲーム】神檄のグラソブル＆ドラゴンストライク～シンデレラタートルズフェスティバル～SURPER RIGHT
ガチャをまわして、出てきたカードでNPCと対戦するというミニゲームです。
ドットインストールのjQuery編をひととおり勉強したので、その総まとめの習作のつもりで、エイプリルフールネタを兼ねてつくりました。
つくってみて
jQueryはプラグインを引っ張ってきてスライダーを動かしたり、ちょっとカスタマイズしたり、といった程度だったのでゼロからの制作はかなり勉強になりました。動画のレッスンだけでもかなり学べたけど、やっぱりそれを応用して何かアウトプットすると見につき方が全く違いますな！だいぶできることの幅が広がったなーと思います。
DOMをぐりぐりいじるのも今までやってこなかったけど、やり始めるとかなり楽しくて、割と時間を忘れて取り組めました。
エイプリルフールの公開を目標にけっこう短期間にエイヤで作ったため、プログラムもデザインもUIも全然詰まってないまま雑に公開してしまったのですが、その辺は今後も勉強がてらちょこちょこ手を加えて良くしていこうかなと思います。
ドットインストールは評判通り超優秀
ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
すこぶる評判が良かったので試しに使ってみましたが、マジで良かったです。
3分動画なので、細かいところは端折りつつも大変分かり易い解説で、動画を数本見ながら手を動かしていくと簡単なデモが作成できるようになります。
もともとjavascript自体は、本やWEBで勉強はしていたり、jQueryも多少はさわっていたため基本的な文法とかは大丈夫だったので、3分でサクサク進められてもついていけたかなーという気はします。js自体ゼロからだったらしんどいかも。
なので多少は予備知識を入れてから、動画で実践的に学ぶというのが一番よい使い方のように思います。
制作中にお世話になったページたち
とはいえドットインストールの他にも、作りながらあれこれググって勉強していったので、覚書も兼ねて参考にさせて頂いたページのメモを。
splice() | Array – JavaScript リファレンス ドットインストール内でさらっと出てくるので、詳しく知りたくて探した。
jqueryでhtmlの書き換えを行う方法 – フリーランスのデータベース まとまってて分かり易い。
$で始まる変数名 （JavaScript) | 黒くないすべてのものはカラスではない $で始まる変数が何かで出てきたときに困惑して調べた時にここを読んで納得。
jQueryでCookieに配列を渡し、ページ内にパースして表示する – ENUM blog 基本的にはcookieに焼けるのは文字列のみですが、「jquery.cookie.js」で配列を渡せるようにするの法。今回作ったゲームではページ間のデータの受け渡しにはcookieを使用しました。
jQueryで追加した要素を操作するにはon()メソッドで – Qiita ぜんぜんclickイベントが反応しなくて悩んだ結果たどり着いた。
jQuery: じゃんけんゲームをつくる ? CMD08.COM Tech Blog ゲーム内のバトルパートにおける属性効果のロジックはこちらを参考にさせて頂きました。
知ってるようでしらないガチャロジックの実装 | SONICMOOV LAB ゲーム内のガチャのロジック、特にレアリティ別の排出率の設定に関して参考にさせて頂きました。
ちなみにもともと勉強に使ってた本
ワークブックのほうが、入り口としてはカンタンで良かったかなーと思います。独習はやや堅め。
お問合わせ
@sho_taiko
