vgnz93hs
vgnz93hs

Ei-Typing

Next.jsと、Node.jsをSocket.IOを使って接続し、オンラインで複数人とプレイする事ができる、タイピングゲームを作りました。
Ei-Typingのホーム画面。
Ei-Typingのプレイ画面。
Ei-Typingは、オンラインでプレイできるタイピングゲームです。事前に設定した単語を、最大6人のプレイヤーと入力し合って爆弾を渡し合い、時間が切れたときに持っていた人の負けというルールです。スマートフォンでもプレイすることができます。

プレイ方法

接続

Playをクリックし、表示名を設定して、接続が完了すると、画面にその表示が出てきます。
Joinをクリックすると、ルームに入ることができます。
Watch Onlyを選択すると、ルームでのプレイの様子を閲覧することができます。ゲームには参加できません。
接続完了の表示。「Watch Only」と、「Join」の二つのボタンが配置されている。

プレイ

Start Gameをクリックしてプレイを開始すると、1人のプレイヤーに爆弾が渡されます。
画面の左側で、現在参加しているプレイヤーと、爆弾を持っている人を把握することができます。
画面の左側のプレイヤーのビュー。3つの黒い点が並んでおり、それぞれの上部に表示名が表示されている。左上のプレイヤーに、爆弾のアイコンが表示されている。
爆弾を所持しているプレイヤーは、画面の右側に表示された日本語の単語の、英語のつづりを画面に入力します。
単語を間違えるごとに、3文字づつ正解の単語が薄く表示されます。表示された3文字も正確に入力する必要があります。
単語の入力画面。上に日本語が、下に入力欄が表示されている。
単語の最初の
他の人が爆弾を保持しているときは、その人の入力欄を見ることができます。
他の人が入力している画面。単語が途中まで入力されている。
ゲームが開始されると、時間が経つにつれて一定期間ごとに爆弾の色が黒色から赤色に変色ていきます。最終的に、爆弾が爆発したときに持っていたプレイヤーが負けになります。
勝敗が決まると、画面に敗者の表示名が表示されます。
赤色の爆弾のアイコン。
結果の画面。画面に敗者の表示名が表示される。

設定

設定からはBGMのオンオフと、接続先を変更したい場合用に、URLの指定の欄があります。
設定画面。

接続方法

接続にはSocket.IOを使用した通信を使用しています。
プレイヤーの存在の判定は、一定期間ごとにランダムな文字列を送り、その文字列が返されるかで調べています。
サーバーからアクションがあったときに、ルームの情報を送る仕組みにしています。

デザイン

ゲームには独自の丸いカーソルを用意して、ボタンに触れるとシームレスにボタンの形に変形するようにしました。

クレジット