Tatehito's Programming Blog

プログラマによる技術寄り日記ブログ

『ポケモンしりとり』に回答時間ボーナス機能を追加しました!(機能と実装方法の紹介)

はじめに

初回リリース以降放置気味だった『ポケモンしりとり』ですが、このたび新機能を追加致しました!

「素早く次のポケモンを回答するとボーナス点が加算される機能」です。

これまではシンプルに「しりとりが続いた回数」がそのままスコアになっていたので、ゲームとしては味気ないな~という感じでした。今回の機能追加により、ゲーム性が(ほんのちょっとだけど)増しました!

www.pokemon-shiritori.com

『ポケモンしりとり』とは?

「 『ポケモンしりとり』って何やねん!?」という方向けに簡単に説明すると、「ポケモンの名前を使ったしりとりでCPUと対戦できるブラウザゲーム」です。

f:id:tatehito-st:20190822214914p:plain
ドット絵がかわいいです。

しりとりが成立するポケモンがいなくなったり、「ン」で終わるポケモンを回答してしまうと対戦が終了し、スコアが算出されます。

CPUはしりとりが成立するポケモンがいなくならない限り絶対に負けないので、CPUに勝つには工夫が必要です。CPUに勝つためのコツはこちらの記事で紹介しました。

blog.tatehitolog.com

回答時間ボーナス機能について

どんな機能?

10秒以内に回答すると+1ポイント、5秒以内に回答すると+3ポイントがスコアに加算される機能です。

回答時間ボーナスに成功すると、答えたポケモンの名前の右側にボーナス点が表示されるようになっています。

f:id:tatehito-st:20190822215024p:plain

最終スコアにはこのような形で反映されます!

f:id:tatehito-st:20190822215103p:plain

ポケモンが思いつきやすい序盤にできるだけ回答時間ボーナスを稼ぐとハイスコアが出しやすいです!挑戦してみてね!

実装方法

回答時間ボーナス機能は、JavaScriptのタイマー機能を利用して実装しました。コードは以下の通りで、回答した時刻をnew Date()で保持しておき、現在時刻との差を求めて回答にかかった時間を算出しています。単純ですね。

(コードは紹介のために省略・簡略化してます)

// ポケモンを入力してボタンを押した後の処理
dicide: function () {

  // 回答にかかった時間( 現在時刻 - 前回の回答した時刻 )をパラメータにセットしてPOST
  // サーバー側で回答時間に応じたボーナス点を判定する
  axios.post('api/shiritori', {time: (new Date() - this.time) / 1000}).then((response) => {

  // レスポンスを受けいろいろ処理する 
  // ...
  // ...
                    
  // 回答時刻をセットし直して終了
  this.time = new Date();
}

おわりに

今回の機能追加により多少ゲーム性がアップしたので、前々から考えていた「ランキング機能」の実装を目論んでいます。

結果をツイッターでシェアできるようにして『ポケモンしりとり』をより多くの人に遊んでもらえるようにしたい、という狙いもあります。

あと、今Googleで"ポケモンしりとり"を検索すると3ページ目くらいで表示されるんですよね。1ページ目表示を目指してSEO対策も頑張っていきたいところです~。

www.pokemon-shiritori.com