Node.jsでオンラインゲーム?を作ってみた

はじめに

この記事はSLP KBIT Advent Calendar 2015 - Adventarの18日目です。

Node.jsの練習で簡単なオンラインゲーム作ったので紹介します。

Node.jsとは

Node.jsとは、サーバ側で動くJavaScriptの実行環境です。シングルスレッド、非同期通信、ノンブロッキングI/Oといった特徴があります。オープンソースで、便利なフレームワークやライブラリが大量にあるため、それらを利用して高速に開発を行えます。

Node.js日本ユーザーグループ:http://nodejs.jp/

npm:https://www.npmjs.com/

作ったもの

今回は、フレームワークに「Express」、双方向通信のために「Socket.io」を使用して、簡単なオンラインゲームを作りました。下記のリンクからプレイできます。

ゲームhttp://motumotu.me:30000/

ソースコードhttps://github.com/motumotu/CookieHunter

f:id:motumotu2:20151216132906p:plain

ゲーム画面はこんな感じです。

左上のクッキーをクリックすると枚数が増えていくので、いっぱい焼いて他のプレイヤーに自慢しましょう。

ゲームの処理

クライアントは、入力、サーバへデータ送信、サーバからデータ受信、更新、描画を繰り返しています。入力はjqueryのmousedownイベント、サーバとの双方向通信にはsocket.io、描画はHTML5canvas要素を使って行っています。通信の頻度は1秒間に1回で、プレイヤーの位置、クッキーの枚数を同期しています。

こちらのサイトを参考にして、canvasのサイズがブラウザの大きさに合わせて変わるようにしました。

遅延を感じさせない工夫

オンラインゲームでは、遅延の発生は避けては通れません。そのため開発者は、ユーザに遅延を感じさせないような工夫が必要です。このゲームでは、移動処理に工夫を加えました。そのまま他プレイヤーの座標を更新してしまうと動作がカクカクになってしまうので、実際の位置と画面上の座標を分け、クライアント側でプレイヤーの動きを補間することで、1秒に1回の通信でも滑らかな移動を可能にしました。複雑なゲームになると、様々な工夫が必要になってきます。

f:id:motumotu2:20151216224028p:plain

セキュリティ

オンラインゲームでは複数人が同時にプレイするため、不正行為は防がなければいけません。今回のゲームなら、クッキーの枚数を不正に増やせないようにしたいので、サーバ側で一定時間に増やせる枚数を制限するなどして、クライアントの異常な振る舞いを許容しないよう対策します。

けど対策してないのでガバガバです。

おわりに

簡単ですがNode.jsを使ってオンラインゲームを作成しました。 ゲームと言えるか怪しいので、これから拡張を加えていきゲーム性を高めたいと思います。