⌨️
【個人開発】タイピングバトルゲームを作ってます
このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
みなさん、タイピング速度を友達や同僚と競いたいと思ったことはありませんか？
ありますよね。そうですよね。
えぇ、作ってますよ。タイピングバトルゲームを・・・！！
（まだ完成していないです。（（小声）））
なぜ作っているか
- 楽しいものを作りたかったから
- みんなで遊べるオンラインゲームを作ってみたかった
- 自分のタイピング速度と、他の人のタイピング速度の違いを体感してみたかった
- ActionCableをもっと使ってみたかったから
- 簡単なゲームの通信くらいならイケそう？とかを知りたかった
- ActionCable（WebSocket）の知見を深めたかった
- Hotwireをもっと使ってみたかったから
- どんなことができるのか試してみたかった
- 簡単な表示の更新にしか使っていなかったので、違う使い方も試してみたかった
使った技術
- Ruby
3.1.2 - Ruby on Rails
7.0.4 - PlanetScale
実装について
以下の流れでゲームが進みます。
- 自分の名前を決めて対戦部屋を作る。
- 対戦したい人に、対戦部屋のURLを渡す
- 部屋に誰かが入室するたびに、参戦している人の名前が表示される
- 部屋にいる全員が「準備完了」ボタンを押すと、全員の画面でカウントダウンがスタート
- カウントダウンが終わるとバトルスタート
- お題に沿ってタイピングをする
- 正しくタイプすると自分の残りの文字数が減る
- 全員の画面では各プレイヤーの残りの文字数がリアルタイムで表示される
実装部分を抜粋して紹介します。
- 3.では、Turbo Streamsで部屋にいる全員の画面表示を部分的に更新しています。
- 4.では、ActionCableで部屋にいる全員にバトル開始日時を配信しています。
受け取ったバトル開始日時にバトルがスタートできるようにJSでカウントダウンを表示しています。
ここもTurbo Streamsにしたかったのですが、Workerを使わずに時間を管理する方法を思いつきませんでした。。。 - 7.では、JSでタイピング部分を実装しています。残り文字数が減るたびにActionCableとTurbo Streamsで全員に自分の残り文字数を配信して、画面を更新しています。
これを書いていても頭がこんがらがるので、WebSocket周りの技術って難しいなと思いました。リリースに向けて実装を進めながら、もっと理解を深めていきたいです。
苦労している点
- DB使わずに実装したかった
「Railsでリアルタイム通信をどのくらい捌けるのか試したい」という目的もあったので、リリース後にできるだけ費用をかけたくなかったのです。
最終的に、PlanetScaleを使って無料枠で収まるようにしました。 - 動作確認が大変！！
リアルタイムのオンラインゲームは、2人分の操作をしないと実装が正しくできているか確認できないので、デスクトップと頭がぐっちゃになりました・・・ - まだ完成していない
3月から開発を始め、4月中にプロダクトをリリースする予定でした。4月に入ってから「楽しいものを作りたい！！」となって、方向転換。タイピングゲームを作り始めてしまったので全く間に合いませんでした。
3月に作り始めたプロダクトのモチベーションが下がっていたのもあり、個人開発は「やりきる意志の強さ」が必要だなと感じました。 - ゲーム開発の知見がネットに落ちてなさすぎる問題
見つけるのが下手なだけでしょうか・・・個人で開発している人はいないんですかね・・・？
最後に
完成した暁にはリリースのお知らせを記事にしますので、バトルのお誘いという名のデバッグお手伝いお待ちしています！！
タイポ王と勝負だ！！
「タイポ！！スタンバイ！！」
Discussion