HeartChargeというゲームを作りました

HeartCharge
ボタンを連打してハートをためるゲーム(?)をつくりました。クリアタイムを競うランキング機能もあります。レスポンシブ対応はしていないので許してください。

あなただれ

最近WEB開発を勉強しはじめたものです。以前は競技プログラミングを少しかじっていました。Twitterでこのイベントを見かけて、面白そうだと思ったのと、ちょうど何か作ろうと思っていたので参加してみました。

作ろうと思ったきっかけ

何を作るか考えていたときに、すぐに使えて分かりやすいものがいいかなぁと思いました。そこで思いついたのが「ボタンを押すとハートがたまる」というものでした(貧弱な発想)。

作ろうと思ったときはどうやってやるのか分からないことばかりでしたが、期間内になんとか完成させられてよかったです。

使用技術

・HTML/CSS
・JavaScript
・Firebase
　・Hosting
　・Firestore

つまづいたところ

・ハートがたまるアニメーション
JavaScriptで、CSSのclipという画像を切り取るプロパティを操作して表現しています。このclipが、positionがfixedかabsoluteじゃないと効かなかったり、切り取る領域の指定の仕方がちょっと変わっていたり(長方形の右上と左下の座標を指定します...)、色々勘違いして大変でした。

・モーダルウィンドウ(ポップアップ)
背景のグレーの要素とポップアップウィンドウのdisplayを切り替えて実装しました(ドットインストールで勉強しました)。ポップアップウィンドウの中身を変える必要があったのですが、やり方が分からなかったので、最初に二つのウインドウを隠しておくというようにしました(愚直)。思いついたときは天才じゃーんと思いましたが、コードがぐちゃぐちゃになったので天才じゃありませんでした。

・Firestore
Hostingは使ったことがあったのですが、Firestoreは初めて使いました。導入するときにエラーが出たり、コードを書くときも、データベースの操作をどう書けばいいか分からない&JavaScriptそのものを分かっていないのダブルパンチで、全然実装が進まなくてつらかったです。

おわりに

ちょっとネガティブを書いてしまいましたが、一週間色々なことを勉強出来たし、なにより熱中して楽しく取り組めたので、参加してよかったです！

最後までお読みいただきありがとうございました！