一人用鬼ごっこを通信対戦ゲームにしたい

この記事はenebular Advent Calendar 2021の23日目の記事なります。

以前、p5jsを使った一人用のかくれんぼゲームを作ってみました。
上下左右操作＋Aキー/Fキー操作で、移動しながらプレイヤーの色を変えられ、背景の色になじむことができます。
なじんでいる間は鬼は見失い、なじまなくなったら全力で追いかけてくる鬼ごっこです。

この時は鬼はロジックで組まれたコンピュータだったのですが、どうにか通信対戦できないか、と考えwebsocketの勉強を始めました。
そんな中、enebularにwebsocketのノードがあること知り、これを使えばサーバーサイドはノーコードで実装できるのでは・・・？と思いトライしてみました。

是非是非ご覧ください！

完成デモ

アクセスした直後にplayer or oniと聞かれるので、逃げる側の場合はplayer、鬼側の場合はoniと記入します。
左側のブラウザ操作 (逃げる側)の動きが、多少のラグを伴って右側のブラウザ (鬼側)に伝わっているのが分かりますね。
これができるなら結構いろんなゲームが作れそう。

実装こまごま

そもそもwebsocketとは？

そもそもwebsocketって何じゃらという話はこの記事が分かりやすかったので是非ご覧ください。
ザクっと、一方向のHTTPと違って、双方向通信を実現してくれるのがwebsocket。
通信対戦ゲームを作るときによく使うプロトコルみたいです。

クライアント側の実装

実装はこのサイトを参考にしました。
今回は標準のWebsocketライブラリを使ってみました。
Websocketの部分のコードはこんな感じです。
Websocketの接続先はデプロイしたenebularの情報からインプットし、逃げる側は/nigeru、鬼側は/oniに接続するように設定しました。

      var ws = null;

      //playerかoniか選んでもらう
      var player_or_oni = window.prompt("player or oni")
      var ws_url = "ws://(enebularから情報を取ってくる).herokuapp.com/ws/"

      //それぞれパスを付け足す
      if (player_or_oni =="player"){
          ws_url += "nigeru";
      }else{
          ws_url += "oni";
      }

      // ベースのURL＋WebSocketのパスでつなげる
      ws = new WebSocket(ws_url);
      // WebSocket が接続された open イベント設定
      ws.onopen = hanlderWebSocketOpen;
      // WebSocket からメッセージを受け取った message イベント設定
      ws.onmessage = hanlderWebSocketMessage;

      // WebSocket が接続された open イベント
      function hanlderWebSocketOpen(event) {
          ws.send('Hello! Node-RED!');
      }

      // WebSocket からメッセージを受け取った message イベント
      function hanlderWebSocketMessage (event) {
        var res = JSON.parse(event.data)
        console.log("中身は：",res["p_or_o"] )
      }

      async function  hanlderSendMessage(_player_or_oni) {
        //自分で操作した場合は情報を送る
        if (_player_or_oni == player_or_oni){
          // JSON データは JSON.stringify で文字列にしてから送っています
          var _message = { content: message, p_or_o : player_or_oni };
          await this.ws.send(JSON.stringify(_message));
        }
    }