Node.jsのSocket.ioで◯✖️ゲーム作ってみた!

またまたNode.js。(というか、、最近この学習ばっかりやってる。だって楽しいんだもん!)

題目の通り作ってみた。正直emitとonの連発で サーバー⇄クライアント 間を行ったり来たりで頭が混乱しまくりだったけど、、とりあえず形にはなったので、、、

ブラウザを2つ立ち上げて、該当URLにアクセス(起動)すると、、

こんな画面になる。(ちなみに左側がChromeで右側がSafariになります。)
相手が見つかるまで(アクセスが一人の時)は、画面に黒いマスクをかけてWait A Minuteと表示され操作できない様にして、相手がアクセスした瞬間に先行後攻をランダムに決めて上記画像の様に状態を振り分ける。
んで、1〜9のどこかを押すと、、、

こんな感じでターンを変更する(相手のターンになる)。

んで、好きな番号をクリックすると、、、(ちなみに先程は右側ユーザーが3番を押したので、互いの画面内の3番が◯になってる。)

こういう感じでまたターンが変わる。(左ユーザーは9番を押したので、互いの画面内の9番が×になってる。)

という感じで、ご存知の通り、横か縦か斜めを先に一列揃えた方が勝ち!ってゲームです。

今回はゲーム内容が簡単だったのでJQueryでフロント側は実装したんですが、これCreateJSで凝ったゲーム作って、そこにSocket.io実装するって感じにしたらかなり面白そうな物が出来る予感w

時間があったらやってみようw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)