前回まででネット対戦型スネークゲームの大枠の部分を完成させましたが、今回はもうすこしフィールドを大きくして自機(自蛇?)を画面中央に表示させます。

⇒ 動作確認はこちらから

フィールドの大きさを設定する

まずフィールドの大きさの設定ですが、SnakeGame_Playerクラスの静的変数で設定していました。この値を変えます。

app.js

クライアントに描画用のデータを送信するときにフィールドの大きさも伝えます。そのためのクラスをつくります。

app.js

クライアント側の処理

クライアント側の処理ですが、クライアントは自分のIDがわからないと自機を中央に表示させることができません。そこでユーザーがページにアクセスしてIDが決定したらそれをクライアントに伝えます。

ClientToServerFirst関数が実行されたら取得されたIDをクライアントに送信します。

クライアントにIDを送信する

app.js

ここからはクライアントの処理です。接続したらserver_to_client_idイベントによってIDが送られてくるので、これを保存しておきます。

snake-game/snake-game.js

クライアントによる描画処理

画面の中央に自機を表示させるためには、描画するものを画面の幅と高さの半分だけ平行移動させて描画すればよいので、それを格納する変数としてtranslationXとtranslationYを用意します。

snake-game/snake-game.js

server_to_client_objectsイベントでデータを受信したら画面全体を深い緑色で塗りつぶし、どれだけ平行移動させて描画するかを求めたのちにフィールドの内側を黒で塗りつぶします。そのあと各プレイヤーと餌をtranslationXとtranslationY分だけずらして描画します。

snake-game/snake-game.js

DrawSnake関数を修正して各プレイヤーをtranslationXとtranslationY分だけずらして描画します。

snake-game/snake-game.js

snake-game/snake-game.js

DrawFood関数を修正して餌をtranslationXとtranslationY分だけずらして描画します。

プレイヤーの座標と長さを表示する関数です。

snake-game/snake-game.js