フリック入力の新感覚タイピングゲーム

概要

「WAGIRI!!」は、日本の和食をテーマにしたユニークなオンラインタイピングWEBアプリです。スマホのフリック入力に対応しており、楽しくタイピングスキルを磨くことができます。流れてくる和食の名前をタイピングすることで、日本の文化にも触れられます。さらに、ランキング機能を搭載しているので、他のユーザーと競い合いながらスコアを伸ばす楽しさも味わえます。さあ、「WAGIRI!!」でフリック入力の達人を目指しましょう！

ゲーム開始UI

このUIは何か, 裏側では何が起こっているか

ロビー機能

この機能はリアルタイムで複数人が同時にタイピング対決を行うための集会所的な機能です. 裏側で動いている仕組みとしては, socket通信技術を用いて各ロビーを作成しリアルタイムでメンバの参加・退出を検知できます. そして, ルーム作成者が開始シグナルを送信すると, そのロビーに参加しているメンバ全員にシグナルが届き一斉にゲーム開始されます.

ロビー機能のフローチャートは以下の通りです. (ロビー機能のフローチャート)

ゲーム画面

裏側では, はじめに難易度に応じて問題を引っ張ってくるAPIを叩いて, 問題と問題の制限時間を取得します.

ランキング機能

ランキング機能で世界中のプレイヤーと競い合うことができます。自分の技術を極めてランクインを目指そう！ 裏側では, 得点情報を登録するAPIを叩き, DBで登録作業を行った後, ランキング情報を取得するAPIを叩いてランキング情報を取得しています.

技術スタック

• フロントエンドは、Next.js, TailwindCSS, TypeScriptを用いました。
• バックエンドは、Go, を用いました。利用したフレームワークはGinです. 利用したDBはPostgreSQLです.

技術スタック

開発には、Docker(DevContainer, GitHubActions(CI), )を用いて堅牢な開発を心がけました。