Firebase で無料で作るハイスコアDB(3) : 書き込み他

3559 ワード
Firebase JavaScript ゲーム制作 JavaScript テキストリンク

前回までの砂漠のひつじ

無料プログラム学習用ピコピコゲーム砂漠のひつじを作成しつつ、その過程を記事にしている。
２日程前(執筆 11/7、実装 11/5深夜)にハイスコア処理実装を終えたが、誰も登録がなく悶ている最中となる。

Firebase編記事：

認証処理について

前回の記事でfirebase.auth.AuthUI()でログイン処理の挙動を確認した。
匿名ログインを使うとブラウザをリロードする度にログアウトされる挙動を取るようだった。

APIキー制限について

IPアドレスによる制限をかけられるが、なぜかアクセス権がないエラーが出ることがあった。
※原因不明ママ

DB書き込みについて

書き込み処理は以下の通り。
簡単過ぎて記事にするのが申し訳ないレベルである。

game.js
  var db = firebase.firestore()
  // scores テーブルに、レコード登録。
  // 登録データはjson形式で指定
  // id は指定しなければ自動で生成される
  db.collection('scores').add({
    name: name,
    score: this.score
  }).then((r) => {
    $('#register-container').hide() // 重複登録させないよう、登録ボタンを消す。
    Game.buildHiScores(true)        // ハイスコアを再取得/再表示
  })

おわりに

元々i-mode用のゲームをブラウザゲームとして移植してなんちゃってレスポンシブ対応を入れることでスマホでも動作するゲームとしたが、ひつじにはりついたツノを見て楽しむゲームだったがスマホだと指が邪魔で一切見えないという大変残念なUXとなっていたが学習用ということで最後まで作成した。

アクセス量や読み書き量をウォッチしたいので、適当に遊んでスコア登録してもらえると幸いです。学習用ソースのためSNSログインも対応したが匿名ログイン推奨です。

ソースコードは githubにて公開していますのでご自由にご利用ください。

砂漠のひつじ:ソースコード
砂漠のひつじ:ゲームページ