マルチプレイヤー .io Web ゲームの作成

2015年発売 Agar.io 新しいジャンルの始祖となった ゲーム.ioそれ以来人気が高まっています。 私は、.io ゲームの人気の高まりを個人的に経験してきました。過去 XNUMX 年間で、 このジャンルのゲームを XNUMX つ作成して販売しました。.

これらのゲームについて聞いたことがない場合は、これらは簡単にプレイできる無料のマルチプレイヤー Web ゲームです (アカウントは必要ありません)。 彼らは通常、同じアリーナで多くの敵対プレイヤーと対戦します。 その他の有名な .io ゲーム: Slither.io и Diep.io.

この投稿では、その方法について説明します .io ゲームを最初から作成する。 このためには、JavaScript の知識だけで十分です。構文などを理解する必要があります。 ES6、キーワード this и 約束。 Javascript の知識が完璧でなくても、投稿のほとんどを理解することができます。

.io ゲームの例

学習支援については、以下を参照してください。 .io ゲームの例。 ぜひプレイしてみてください！

ゲームは非常にシンプルです。他のプレイヤーがいるアリーナで船を制御します。 あなたの船は自動的に発射物を発射し、他のプレイヤーの発射物を避けながら攻撃を試みます。

1. プロジェクトの概要・構造

推奨します ソースコードをダウンロードする サンプルゲームなのでフォローしてください。

この例では次のものを使用します。

• エクスプレス は、ゲームの Web サーバーを管理する最も人気のある Node.js Web フレームワークです。
• ソケット.io - ブラウザとサーバー間でデータを交換するための WebSocket ライブラリ。
• Webpack - モジュールマネージャー。 Webpack を使用する理由については、こちらをご覧ください。 ここで.

プロジェクトのディレクトリ構造は次のようになります。

public/
    assets/
        ...
src/
    client/
        css/
            ...
        html/
            index.html
        index.js
        ...
    server/
        server.js
        ...
    shared/
        constants.js

公衆/

フォルダー内のすべて public/ サーバーによって静的に送信されます。 で public/assets/ 私たちのプロジェクトで使用された画像が含まれています。

src /

すべてのソースコードはフォルダー内にあります src/。 タイトル client/ и server/ 自分自身のことを話して、 shared/ クライアントとサーバーの両方によってインポートされる定数ファイルが含まれています。

2. アセンブリ/プロジェクト設定

上で述べたように、プロジェクトのビルドにはモジュール マネージャーを使用します。 Webpack。 Webpack の構成を見てみましょう。

webpack.common.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    game: './src/client/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/client/html/index.html',
    }),
  ],
};

ここで最も重要な行は次のとおりです。

• src/client/index.js JavaScript (JS) クライアントのエントリ ポイントです。 Webpack はここから開始され、他のインポートされたファイルを再帰的に検索します。
• Webpack ビルドの出力 JS は次のディレクトリにあります。 dist/。 このファイルを私たちのファイルと呼びます jsパッケージ.
• を使用しております バベル、特に構成 @babel/プリセット環境 古いブラウザ用の JS コードをトランスパイルします。
• プラグインを使用して、JS ファイルによって参照されるすべての CSS を抽出し、それらを XNUMX か所に結合しています。 それを私たちのものと呼びます CSSパッケージ.

奇妙なパッケージ ファイル名に気付いたかもしれません '[name].[contenthash].ext'。 それらが中に含んでいる ファイル名の置換 Webpack： [name] は入力ポイントの名前に置き換えられます (この場合は game）、および [contenthash] ファイルの内容のハッシュに置き換えられます。 私たちはそれを行うのです プロジェクトをハッシュ用に最適化する - ブラウザーに JS パッケージを無期限にキャッシュするように指示できます。 パッケージが変更されると、そのファイル名も変更されます (変更 contenthash）。 最終結果はビューファイルの名前になります。 game.dbeee76e91a97d0c7207.js.

ファイル webpack.common.js は、開発および完成したプロジェクト構成にインポートする基本構成ファイルです。 開発構成の例を次に示します。

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
});

効率化のため、開発プロセスで使用します webpack.dev.js、に切り替わります webpack.prod.js運用環境にデプロイするときにパッケージ サイズを最適化します。

ローカル設定

この投稿に記載されている手順に従うことができるように、プロジェクトをローカル マシンにインストールすることをお勧めします。 セットアップは簡単です。まず、システムがインストールされている必要があります。 Node и NPM。 次に行う必要があるのは、

$ git clone https://github.com/vzhou842/example-.io-game.git
$ cd example-.io-game
$ npm install

準備は完了です! 開発サーバーを起動するには、次のコマンドを実行します。

$ npm run develop

そしてWebブラウザに移動します localhost：3000。 コードが変更されると、開発サーバーは自動的に JS および CSS パッケージを再構築します。すべての変更を確認するには、ページを更新するだけです。

3. クライアントのエントリポイント

ゲームのコード自体に取り掛かりましょう。 まずページが必要です index.html, サイトにアクセスすると、ブラウザが最初にサイトを読み込みます。 私たちのページは非常にシンプルになります:

index.htmlを

.io ゲームの例 遊ぶ

このコード例はわかりやすくするために少し簡略化されており、他の多くの投稿例でも同様にします。 完全なコードはいつでも次の場所で確認できます。 githubの.

我々は持っています：

• HTML5 キャンバス要素 (<canvas>) これをゲームのレンダリングに使用します。
• <link> CSS パッケージを追加します。
• <script> JavaScript パッケージを追加します。
• ユーザー名付きのメインメニュー <input> およびPLAYボタン（<button>).

ホームページをロードした後、ブラウザはエントリ ポイントの JS ファイルから始まる JavaScript コードの実行を開始します。 src/client/index.js.

index.js

import { connect, play } from './networking';
import { startRendering, stopRendering } from './render';
import { startCapturingInput, stopCapturingInput } from './input';
import { downloadAssets } from './assets';
import { initState } from './state';
import { setLeaderboardHidden } from './leaderboard';

import './css/main.css';

const playMenu = document.getElementById('play-menu');
const playButton = document.getElementById('play-button');
const usernameInput = document.getElementById('username-input');

Promise.all([
  connect(),
  downloadAssets(),
]).then(() => {
  playMenu.classList.remove('hidden');
  usernameInput.focus();
  playButton.onclick = () => {
    // Play!
    play(usernameInput.value);
    playMenu.classList.add('hidden');
    initState();
    startCapturingInput();
    startRendering();
    setLeaderboardHidden(false);
  };
});

複雑に聞こえるかもしれませんが、ここでは特に何も起こっていません。

1. 他のいくつかの JS ファイルをインポートします。
2. CSS インポート (Webpack は CSS パッケージに CSS を含めることを認識します)。
3. 起動する connect() サーバーとの接続を確立して実行するには downloadAssets() ゲームのレンダリングに必要なイメージをダウンロードします。
4. ステージ3終了後 メインメニューが表示されます（playMenu).
5. 「PLAY」ボタンを押したときのハンドラを設定します。 ボタンが押されると、コードはゲームを初期化し、プレイする準備ができたことをサーバーに伝えます。

クライアントサーバーロジックの主な「核心」は、ファイルによってインポートされたファイルにあります。 index.js。 それでは、それらすべてを順番に検討していきます。

4. 顧客データの交換

このゲームでは、よく知られたライブラリを使用してサーバーと通信します。 ソケット.io。 Socket.io はネイティブ サポートを備えています WebSocketを、双方向通信に適しています。サーバーにメッセージを送信できます。 и サーバーは同じ接続上でメッセージを送信できます。

ファイルは XNUMX つあります src/client/networking.js誰が世話をしますか すべて サーバーとの通信:

ネットワーキング.js

import io from 'socket.io-client';
import { processGameUpdate } from './state';

const Constants = require('../shared/constants');

const socket = io(`ws://${window.location.host}`);
const connectedPromise = new Promise(resolve => {
  socket.on('connect', () => {
    console.log('Connected to server!');
    resolve();
  });
});

export const connect = onGameOver => (
  connectedPromise.then(() => {
    // Register callbacks
    socket.on(Constants.MSG_TYPES.GAME_UPDATE, processGameUpdate);
    socket.on(Constants.MSG_TYPES.GAME_OVER, onGameOver);
  })
);

export const play = username => {
  socket.emit(Constants.MSG_TYPES.JOIN_GAME, username);
};

export const updateDirection = dir => {
  socket.emit(Constants.MSG_TYPES.INPUT, dir);
};

このコードも、わかりやすくするためにわずかに短縮されています。

このファイルには XNUMX つの主要なアクションがあります。

• サーバーに接続しようとしています。 connectedPromise 接続が確立されている場合にのみ許可されます。
• 接続が成功すると、コールバック関数を登録します (processGameUpdate() и onGameOver()) サーバーから受信できるメッセージの場合。
• 輸出します play() и updateDirection()他のファイルがそれらを使用できるようにします。

5. クライアントレンダリング

今度は画面に画像を表示します。

…しかし、その前に、これに必要なすべてのイメージ (リソース) をダウンロードする必要があります。 リソースマネージャーを書いてみましょう:

アセット.js

const ASSET_NAMES = ['ship.svg', 'bullet.svg'];

const assets = {};
const downloadPromise = Promise.all(ASSET_NAMES.map(downloadAsset));

function downloadAsset(assetName) {
  return new Promise(resolve => {
    const asset = new Image();
    asset.onload = () => {
      console.log(`Downloaded ${assetName}`);
      assets[assetName] = asset;
      resolve();
    };
    asset.src = `/assets/${assetName}`;
  });
}

export const downloadAssets = () => downloadPromise;
export const getAsset = assetName => assets[assetName];

リソース管理の実装はそれほど難しくありません。 主なアイデアはオブジェクトを保存することです assets、ファイル名のキーをオブジェクトの値にバインドします Image。 リソースがロードされると、それをオブジェクトに保存します assets 将来的に迅速にアクセスできるようにします。 個々のリソースのダウンロードはいつ許可されますか (つまり、ダウンロードされます) すべて リソース)、許可します downloadPromise.

リソースをダウンロードしたら、レンダリングを開始できます。 前に述べたように、私たちが使用するWebページに描画するには HTML5 キャンバス (<canvas>）。 私たちのゲームは非常に単純なので、次のものを描画するだけで済みます。

1. 背景
2. プレイヤーの船
3. ゲーム内の他のプレイヤー
4. シェル

ここに重要なスニペットがあります src/client/render.js、上記の XNUMX つの項目を正確にレンダリングします。

レンダリング.js

import { getAsset } from './assets';
import { getCurrentState } from './state';

const Constants = require('../shared/constants');
const { PLAYER_RADIUS, PLAYER_MAX_HP, BULLET_RADIUS, MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Make the canvas fullscreen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function render() {
  const { me, others, bullets } = getCurrentState();
  if (!me) {
    return;
  }

  // Draw background
  renderBackground(me.x, me.y);

  // Draw all bullets
  bullets.forEach(renderBullet.bind(null, me));

  // Draw all players
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

// ... Helper functions here excluded

let renderInterval = null;
export function startRendering() {
  renderInterval = setInterval(render, 1000 / 60);
}
export function stopRendering() {
  clearInterval(renderInterval);
}

このコードもわかりやすくするために短縮されています。

render() はこのファイルの主な機能です。 startRendering() и stopRendering() 60 FPS でのレンダリング ループのアクティブ化を制御します。

個々のレンダリング ヘルパー関数の具体的な実装 (例: renderBullet()) はそれほど重要ではありませんが、簡単な例を XNUMX つ示します。

レンダリング.js

function renderBullet(me, bullet) {
  const { x, y } = bullet;
  context.drawImage(
    getAsset('bullet.svg'),
    canvas.width / 2 + x - me.x - BULLET_RADIUS,
    canvas.height / 2 + y - me.y - BULLET_RADIUS,
    BULLET_RADIUS * 2,
    BULLET_RADIUS * 2,
  );
}

メソッドを使用していることに注意してください getAsset()、以前に見られた asset.js!

他のレンダリング ヘルパー関数の探索に興味がある場合は、残りの部分をお読みください。 src/client/render.js.

6. クライアントからの意見

ゲームを作る時が来た プレイ可能！ 制御スキームは非常にシンプルです。マウス (コンピューターの場合) を使用するか、画面にタッチする (モバイル デバイスの場合) ことで、移動方向を変更できます。 これを実装するには、登録します イベントリスナー マウスイベントとタッチイベントの場合。
これらすべてを処理します src/client/input.js:

input.js

import { updateDirection } from './networking';

function onMouseInput(e) {
  handleInput(e.clientX, e.clientY);
}

function onTouchInput(e) {
  const touch = e.touches[0];
  handleInput(touch.clientX, touch.clientY);
}

function handleInput(x, y) {
  const dir = Math.atan2(x - window.innerWidth / 2, window.innerHeight / 2 - y);
  updateDirection(dir);
}

export function startCapturingInput() {
  window.addEventListener('mousemove', onMouseInput);
  window.addEventListener('touchmove', onTouchInput);
}

export function stopCapturingInput() {
  window.removeEventListener('mousemove', onMouseInput);
  window.removeEventListener('touchmove', onTouchInput);
}

onMouseInput() и onTouchInput() を呼び出すイベント リスナーです updateDirection() （の networking.js) 入力イベントが発生したとき (たとえば、マウスが動かされたとき)。 updateDirection() サーバーとのメッセージングを処理します。サーバーは入力イベントを処理し、それに応じてゲームの状態を更新します。

7. クライアントのステータス

このセクションは、投稿の最初の部分の中で最も難しいです。 初めて読んだときに理解できなくてもがっかりしないでください。 スキップして後で戻ってくることもできます。

クライアント/サーバー コードを完成させるために必要なパズルの最後のピースは次のとおりです。 状態。 「クライアント レンダリング」セクションのコード スニペットを覚えていますか?

レンダリング.js

import { getCurrentState } from './state';

function render() {
  const { me, others, bullets } = getCurrentState();

  // Do the rendering
  // ...
}

getCurrentState() クライアントのゲームの現在の状態を提供できるはずです いつでも サーバーから受信した更新に基づいています。 サーバーが送信できるゲーム更新の例を次に示します。

{
  "t": 1555960373725,
  "me": {
    "x": 2213.8050880413657,
    "y": 1469.370893425012,
    "direction": 1.3082443894581433,
    "id": "AhzgAtklgo2FJvwWAADO",
    "hp": 100
  },
  "others": [],
  "bullets": [
    {
      "id": "RUJfJ8Y18n",
      "x": 2354.029197099604,
      "y": 1431.6848318262666
    },
    {
      "id": "ctg5rht5s",
      "x": 2260.546457727445,
      "y": 1456.8088728920968
    }
  ],
  "leaderboard": [
    {
      "username": "Player",
      "score": 3
    }
  ]
}

各ゲーム更新には XNUMX つの同一のフィールドが含まれています。

• t: この更新がいつ作​​成されたかを示すサーバーのタイムスタンプ。
• me: このアップデートを受信するプレイヤーに関する情報。
• 他人: 同じゲームに参加している他のプレイヤーに関する一連の情報。
• 弾丸: ゲーム内の発射物に関する一連の情報。
• リーダー: 現在のリーダーボードのデータ。 この記事ではそれらについては考慮しません。

7.1 単純なクライアント状態

単純な実装 getCurrentState() は、最後に受信したゲーム アップデートのデータのみを直接返すことができます。

naive-state.js

let lastGameUpdate = null;

// Handle a newly received game update.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

素敵で明確です！ でも、それがこんなに簡単だったらいいのに。 この実装に問題がある理由の XNUMX つは次のとおりです。 レンダリング フレーム レートをサーバー クロック レートに制限します。.

フレームレート: フレーム数 (つまり、呼び出し数) render())/秒、または FPS。 ゲームは通常、少なくとも 60 FPS を達成するよう努めます。

ティックレート: サーバーがゲームの更新をクライアントに送信する頻度。 フレームレートよりも低い場合が多い。 このゲームでは、サーバーは 30 秒あたり XNUMX サイクルの頻度で実行されます。

最新のゲーム更新をレンダリングするだけの場合、FPS は基本的に 30 を超えることはできません。 サーバーから 30 秒あたり XNUMX を超える更新を取得することはありません。 電話しても render() 60 秒あたり XNUMX 回の場合、これらの呼び出しの半分は同じものを再描画するだけで、基本的には何も行いません。 単純な実装に関するもう XNUMX つの問題は、 遅延の可能性があります。 理想的なインターネット速度では、クライアントは正確に 33 ミリ秒ごと (30 秒あたり XNUMX 回) にゲームのアップデートを受信します。

残念ながら、完璧なものはありません。 より現実的な図は次のようになります。

単純な実装は、レイテンシに関しては事実上最悪のケースです。 ゲームのアップデートを 50 ミリ秒の遅延で受信した場合、 クライアントがストールする 以前のアップデートからのゲーム状態をまだレンダリングしているため、さらに 50 ミリ秒かかります。 これがプレイヤーにとってどれほど不快であるかは想像できるでしょう。任意のブレーキをかけると、ゲームがぎくしゃくして不安定に感じられます。

7.2 クライアント状態の改善

素朴な実装にいくつかの改善を加えます。 まず、私たちが使用するのは、 レンダリングの遅延 100ミリ秒間。 これは、クライアントの「現在の」状態がサーバー上のゲームの状態よりも常に 100 ミリ秒遅れることを意味します。 たとえば、サーバー上の時間が次の場合、 150、その後、クライアントはサーバーがその時点であった状態をレンダリングします 50:

これにより、ゲームの更新の予測できないタイミングに耐えるための 100 ミリ秒のバッファーが得られます。

この代償は永久に得られるだろう 入力ラグ 100ミリ秒間。 これはスムーズなゲームプレイのための小さな犠牲ですが、ほとんどのプレイヤー (特にカジュアル プレイヤー) はこの遅延にさえ気付かないでしょう。 人々にとって、予測できないレイテンシーでプレイするよりも、一定の 100 ミリ秒のレイテンシーに適応する方がはるかに簡単です。

と呼ばれる別のテクニックを使用することもできます。 クライアント側の予測、これは知覚される遅延を減らすのに効果的ですが、この投稿では取り上げません。

私たちが使用しているもう XNUMX つの改良点は、 線形補間。 レンダリングの遅れにより、通常、クライアントでは現在時刻より少なくとも XNUMX 回更新が進んでいます。 呼ばれたとき getCurrentState()、実行できます 線形補間 クライアントの現在時刻の直前と直後のゲーム更新の間:

これによりフレーム レートの問題が解決され、必要なフレーム レートで独自のフレームをレンダリングできるようになりました。

7.3 改善されたクライアント状態の実装

での実装例 src/client/state.js レンダリング ラグと線形補間の両方を使用しますが、長時間は使用しません。 コードを XNUMX つの部分に分割しましょう。 最初のものは次のとおりです。

state.js パート 1

const RENDER_DELAY = 100;

const gameUpdates = [];
let gameStart = 0;
let firstServerTimestamp = 0;

export function initState() {
  gameStart = 0;
  firstServerTimestamp = 0;
}

export function processGameUpdate(update) {
  if (!firstServerTimestamp) {
    firstServerTimestamp = update.t;
    gameStart = Date.now();
  }
  gameUpdates.push(update);

  // Keep only one game update before the current server time
  const base = getBaseUpdate();
  if (base > 0) {
    gameUpdates.splice(0, base);
  }
}

function currentServerTime() {
  return firstServerTimestamp + (Date.now() - gameStart) - RENDER_DELAY;
}

// Returns the index of the base update, the first game update before
// current server time, or -1 if N/A.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

最初のステップは、何を理解するかです currentServerTime()。 前に見たように、すべてのゲーム更新にはサーバーのタイムスタンプが含まれています。 レンダリング遅延を使用して、サーバーより 100 ミリ秒遅れて画像をレンダリングしたいのですが、 サーバー上の現在時刻を知ることはできませんなぜなら、アップデートが届くまでにどれくらいの時間がかかったかが分からないからです。 インターネットは予測不可能で、その速度は大きく異なる可能性があります。

この問題を回避するには、次のような合理的な近似を使用できます。 最初のアップデートが即座に届いたふりをする。 これが本当であれば、この特定の瞬間のサーバー時刻がわかることになります。 サーバーのタイムスタンプを次のように保存します。 firstServerTimestamp そして私たちの ローカル (クライアント) の同じ瞬間のタイムスタンプ gameStart.

あ、ちょっと待って。 サーバー時間 = クライアント時間ではないでしょうか? 「サーバーのタイムスタンプ」と「クライアントのタイムスタンプ」を区別するのはなぜですか? これは素晴らしい質問です。 それらは同じものではないことがわかります。 Date.now() クライアントとサーバーでは異なるタイムスタンプが返されますが、これはこれらのマシンのローカルな要因によって異なります。 タイムスタンプがすべてのマシンで同じであるとは決して考えないでください。

これで何が行われるか理解できました currentServerTime(): 戻ります 現在のレンダリング時間のサーバーのタイムスタンプ。 つまり、これはサーバーの現在時刻です (firstServerTimestamp <+ (Date.now() - gameStart)) マイナスレンダリング遅延 (RENDER_DELAY).

次に、ゲームのアップデートをどのように処理するかを見てみましょう。 更新サーバーから受信すると、呼び出されます processGameUpdate()そして新しい更新を配列に保存します gameUpdates。 次に、メモリ使用量を確認するために、古い更新をすべて削除します。 ベースアップデートもう必要ないからです。

「コアアップデート」とは何ですか? これ サーバーの現在時刻から遡って見つけた最初の更新。 この図を覚えていますか?

「クライアント レンダリング時間」のすぐ左側にあるゲーム アップデートがベース アップデートです。

基本アップデートは何に使用されますか? 更新をベースラインにドロップできるのはなぜですか? これを理解するには、次のようにしてみましょう やっと 実装を検討する getCurrentState():

state.js パート 2

export function getCurrentState() {
  if (!firstServerTimestamp) {
    return {};
  }

  const base = getBaseUpdate();
  const serverTime = currentServerTime();

  // If base is the most recent update we have, use its state.
  // Else, interpolate between its state and the state of (base + 1).
  if (base < 0) {
    return gameUpdates[gameUpdates.length - 1];
  } else if (base === gameUpdates.length - 1) {
    return gameUpdates[base];
  } else {
    const baseUpdate = gameUpdates[base];
    const next = gameUpdates[base + 1];
    const r = (serverTime - baseUpdate.t) / (next.t - baseUpdate.t);
    return {
      me: interpolateObject(baseUpdate.me, next.me, r),
      others: interpolateObjectArray(baseUpdate.others, next.others, r),
      bullets: interpolateObjectArray(baseUpdate.bullets, next.bullets, r),
    };
  }
}

私たちは次の XNUMX つのケースを扱います。

1. base < 0 現在のレンダリング時間まで更新がないことを意味します (上記の実装を参照) getBaseUpdate()）。 これは、レンダリングの遅延により、ゲームの開始直後に発生する可能性があります。 この場合、受信した最新のアップデートを使用します。
2. base は最新のアップデートです。 これは、ネットワークの遅延またはインターネット接続の不良が原因である可能性があります。 この場合、最新のアップデートも使用しています。
3. 現在のレンダリング時間の前後の両方で更新があるため、 補間する!

残っているものはすべて state.js は、単純な (しかし退屈な) 数学である線形補間の実装です。 自分で調べてみたい場合は、開いてください state.js на githubの.

パート 2. バックエンドサーバー

このパートでは、 .io ゲームの例.

1. サーバーエントリーポイント

Web サーバーを管理するには、Node.js の一般的な Web フレームワークと呼ばれるを使用します。 エクスプレス。 これはサーバー エントリ ポイント ファイルによって構成されます src/server/server.js:

サーバー.js パート 1

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../../webpack.dev.js');

// Setup an Express server
const app = express();
app.use(express.static('public'));

if (process.env.NODE_ENV === 'development') {
  // Setup Webpack for development
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Static serve the dist/ folder in production
  app.use(express.static('dist'));
}

// Listen on port
const port = process.env.PORT || 3000;
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

最初の部分で Webpack について説明したことを覚えていますか? ここで Webpack 構成を使用します。 これらを次の XNUMX つの方法で使用します。

• 使用する webpack-dev-ミドルウェア 開発パッケージを自動的に再構築するため、または
• 静的にフォルダーを転送する dist/、実稼働ビルド後に Webpack がファイルを書き込む場所です。

もう一つの重要な任務 server.js サーバーをセットアップすることです ソケット.ioこれは Express サーバーに接続するだけです。

サーバー.js パート 2

const socketio = require('socket.io');
const Constants = require('../shared/constants');

// Setup Express
// ...
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

// Setup socket.io
const io = socketio(server);

// Listen for socket.io connections
io.on('connection', socket => {
  console.log('Player connected!', socket.id);

  socket.on(Constants.MSG_TYPES.JOIN_GAME, joinGame);
  socket.on(Constants.MSG_TYPES.INPUT, handleInput);
  socket.on('disconnect', onDisconnect);
});

サーバーとのsocket.io接続が正常に確立されたら、新しいソケットのイベントハンドラーを構成します。 イベント ハンドラーは、クライアントから受信したメッセージをシングルトン オブジェクトに委任することで処理します。 game:

サーバー.js パート 3

const Game = require('./game');

// ...

// Setup the Game
const game = new Game();

function joinGame(username) {
  game.addPlayer(this, username);
}

function handleInput(dir) {
  game.handleInput(this, dir);
}

function onDisconnect() {
  game.removePlayer(this);
}

.io ゲームを作成しているので、必要なコピーは XNUMX つだけです Game (「ゲーム」) – すべてのプレイヤーが同じアリーナでプレイします。 次のセクションでは、このクラスがどのように機能するかを見ていきます。 Game.

2. ゲームサーバー

クラス Game サーバー側の最も重要なロジックが含まれています。 これには XNUMX つの主なタスクがあります。 プレーヤーの管理 и ゲームシミュレーション.

最初のタスクであるプレーヤーの管理から始めましょう。

ゲーム.js パート 1

const Constants = require('../shared/constants');
const Player = require('./player');

class Game {
  constructor() {
    this.sockets = {};
    this.players = {};
    this.bullets = [];
    this.lastUpdateTime = Date.now();
    this.shouldSendUpdate = false;
    setInterval(this.update.bind(this), 1000 / 60);
  }

  addPlayer(socket, username) {
    this.sockets[socket.id] = socket;

    // Generate a position to start this player at.
    const x = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    const y = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    this.players[socket.id] = new Player(socket.id, username, x, y);
  }

  removePlayer(socket) {
    delete this.sockets[socket.id];
    delete this.players[socket.id];
  }

  handleInput(socket, dir) {
    if (this.players[socket.id]) {
      this.players[socket.id].setDirection(dir);
    }
  }

  // ...
}

このゲームではフィールドによってプレイヤーを識別します id それらのsocket.ioソケット(混乱した場合は、に戻ってください) server.js）。 Socket.io 自体が各ソケットに一意のソケットを割り当てます。 idだから私たちはそれについて心配する必要はありません。 彼に電話します プレイヤーID.

それを念頭に置いて、クラス内のインスタンス変数を調べてみましょう Game:

• sockets プレーヤー ID をプレーヤーに関連付けられたソケットにバインドするオブジェクトです。 これにより、プレーヤー ID によって一定時間内にソケットにアクセスできるようになります。
• players プレーヤー ID をコードにバインドするオブジェクトです>Player オブジェクト

bullets オブジェクトの配列です Bullet、明確な順序はありません。
lastUpdateTime ゲームが最後に更新されたときのタイムスタンプです。 それがどのように使用されるかはすぐに見てみましょう。
shouldSendUpdate は補助変数です。 その使い方についてもすぐに見ていきます。
メソッド addPlayer(), removePlayer() и handleInput() 説明の必要はありませんが、これらは以下で使用されます。 server.js。 復習が必要な場合は、少し上に戻ってください。

最後の行 constructor() 打ち上げ 更新サイクル ゲーム (60 更新/秒の頻度):

ゲーム.js パート 2

const Constants = require('../shared/constants');
const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // Calculate time elapsed
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // Update each bullet
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        // Destroy this bullet
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

    // Update each player
    Object.keys(this.sockets).forEach(playerID => {
      const player = this.players[playerID];
      const newBullet = player.update(dt);
      if (newBullet) {
        this.bullets.push(newBullet);
      }
    });

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // Check if any players are dead
    Object.keys(this.sockets).forEach(playerID => {
      const socket = this.sockets[playerID];
      const player = this.players[playerID];
      if (player.hp <= 0) {
        socket.emit(Constants.MSG_TYPES.GAME_OVER);
        this.removePlayer(socket);
      }
    });

    // Send a game update to each player every other time
    if (this.shouldSendUpdate) {
      const leaderboard = this.getLeaderboard();
      Object.keys(this.sockets).forEach(playerID => {
        const socket = this.sockets[playerID];
        const player = this.players[playerID];
        socket.emit(
          Constants.MSG_TYPES.GAME_UPDATE,
          this.createUpdate(player, leaderboard),
        );
      });
      this.shouldSendUpdate = false;
    } else {
      this.shouldSendUpdate = true;
    }
  }

  // ...
}

方法 update() おそらくサーバー側ロジックの最も重要な部分が含まれています。 順番に説明すると、次のとおりです。

1. どのくらいの時間を計算します dt 前回から経過した update().
2. 各発射物を更新し、必要に応じて破壊します。 この機能の実装については後で説明します。 今のところ、それが分かれば十分です bullet.update() 戻る true発射体を破壊する必要がある場合 （彼はアリーナの外に出た）。
3. 各プレイヤーを更新し、必要に応じて発射物を生成します。 この実装についても後で説明します - player.update() オブジェクトを返すことができます Bullet.
4. 発射物とプレイヤー間の衝突をチェックします。 applyCollisions()、プレイヤーに当たる発射物の配列を返します。 返された発射物ごとに、それを発射したプレイヤーのポイントが増加します（ player.onDealtDamage())、アレイから発射体を削除します bullets.
5. 殺されたすべてのプレイヤーに通知して破壊します。
6. ゲームのアップデートをすべてのプレイヤーに送信します 毎秒 呼ばれたときの回数 update()。 前述の補助変数は、これを追跡するのに役立ちます shouldSendUpdate。 なぜなら update() 60 回/秒と呼ばれる場合、ゲームのアップデートは 30 回/秒送信されます。 したがって、 クロック周波数 サーバーは 30 クロック サイクル/秒です (クロック周波数については最初の部分で説明しました)。

ゲームのアップデートのみを送信する理由 時間をかけて ? チャンネルを保存します。 30 秒あたり XNUMX 回のゲーム更新はかなりの数です。

なぜただ電話しないのですか update() 30秒間にXNUMX回くらい？ ゲームのシミュレーションを改善するため。 よく呼ばれるほど update()、ゲームシミュレーションがより正確になります。 ただし、課題の数に夢中になりすぎないでください。 update()、これは計算量が多いタスクであるため、60 秒あたり XNUMX で十分です。

クラスの残りの人々 Game で使用されるヘルパー メソッドで構成されます。 update():

ゲーム.js パート 3

class Game {
  // ...

  getLeaderboard() {
    return Object.values(this.players)
      .sort((p1, p2) => p2.score - p1.score)
      .slice(0, 5)
      .map(p => ({ username: p.username, score: Math.round(p.score) }));
  }

  createUpdate(player, leaderboard) {
    const nearbyPlayers = Object.values(this.players).filter(
      p => p !== player && p.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );
    const nearbyBullets = this.bullets.filter(
      b => b.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );

    return {
      t: Date.now(),
      me: player.serializeForUpdate(),
      others: nearbyPlayers.map(p => p.serializeForUpdate()),
      bullets: nearbyBullets.map(b => b.serializeForUpdate()),
      leaderboard,
    };
  }
}

getLeaderboard() 非常に単純です。プレイヤーをスコアで並べ替え、上位 XNUMX 名を取得し、それぞれのユーザー名とスコアを返します。

createUpdate() で使われる update() プレーヤーに配布されるゲーム更新を作成します。 その主なタスクはメソッドを呼び出すことです serializeForUpdate()クラスに実装される Player и Bullet。 各プレイヤーにデータを渡すだけであることに注意してください。 最寄り プレイヤーと発射物 - プレイヤーから遠く離れたゲーム オブジェクトに関する情報を送信する必要はありません。

3. サーバー上のゲームオブジェクト

私たちのゲームでは、発射物とプレイヤーは実際には非常によく似ており、抽象的で丸い、移動可能なゲーム オブジェクトです。 プレイヤーと発射体のこの類似性を利用するには、基本クラスを実装することから始めましょう。 Object:

オブジェクト.js

class Object {
  constructor(id, x, y, dir, speed) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.direction = dir;
    this.speed = speed;
  }

  update(dt) {
    this.x += dt * this.speed * Math.sin(this.direction);
    this.y -= dt * this.speed * Math.cos(this.direction);
  }

  distanceTo(object) {
    const dx = this.x - object.x;
    const dy = this.y - object.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  setDirection(dir) {
    this.direction = dir;
  }

  serializeForUpdate() {
    return {
      id: this.id,
      x: this.x,
      y: this.y,
    };
  }
}

ここでは複雑なことは何も起こっていません。 このクラスは、拡張機能の適切なアンカー ポイントになります。 クラスの様子を見てみましょう Bullet 使用する Object:

弾丸.js

const shortid = require('shortid');
const ObjectClass = require('./object');
const Constants = require('../shared/constants');

class Bullet extends ObjectClass {
  constructor(parentID, x, y, dir) {
    super(shortid(), x, y, dir, Constants.BULLET_SPEED);
    this.parentID = parentID;
  }

  // Returns true if the bullet should be destroyed
  update(dt) {
    super.update(dt);
    return this.x < 0 || this.x > Constants.MAP_SIZE || this.y < 0 || this.y > Constants.MAP_SIZE;
  }
}

具現化 Bullet とても短い！ に追加しました Object 次の拡張子のみ:

• パッケージの使用 背が低い ランダム生成用 id シェル。
• フィールドの追加 parentIDこれにより、この発射物を作成したプレイヤーを追跡できるようになります。
• 戻り値を追加すると、 update()、これは次と等しい true発射体がアリーナの外にある場合 (これについては前のセクションで説明したことを覚えていますか?)。

次に進みましょう Player:

player.js

const ObjectClass = require('./object');
const Bullet = require('./bullet');
const Constants = require('../shared/constants');

class Player extends ObjectClass {
  constructor(id, username, x, y) {
    super(id, x, y, Math.random() * 2 * Math.PI, Constants.PLAYER_SPEED);
    this.username = username;
    this.hp = Constants.PLAYER_MAX_HP;
    this.fireCooldown = 0;
    this.score = 0;
  }

  // Returns a newly created bullet, or null.
  update(dt) {
    super.update(dt);

    // Update score
    this.score += dt * Constants.SCORE_PER_SECOND;

    // Make sure the player stays in bounds
    this.x = Math.max(0, Math.min(Constants.MAP_SIZE, this.x));
    this.y = Math.max(0, Math.min(Constants.MAP_SIZE, this.y));

    // Fire a bullet, if needed
    this.fireCooldown -= dt;
    if (this.fireCooldown <= 0) {
      this.fireCooldown += Constants.PLAYER_FIRE_COOLDOWN;
      return new Bullet(this.id, this.x, this.y, this.direction);
    }
    return null;
  }

  takeBulletDamage() {
    this.hp -= Constants.BULLET_DAMAGE;
  }

  onDealtDamage() {
    this.score += Constants.SCORE_BULLET_HIT;
  }

  serializeForUpdate() {
    return {
      ...(super.serializeForUpdate()),
      direction: this.direction,
      hp: this.hp,
    };
  }
}

プレーヤーは発射物よりも複雑であるため、さらにいくつかのフィールドをこのクラスに格納する必要があります。 彼の手法 update() 特に多くの作業を行い、何も残っていない場合は新しく作成された発射物を返します。 fireCooldown (前のセクションでこれについて話したのを覚えていますか?)。 また、メソッドを拡張します serializeForUpdate()、ゲームの更新にプレーヤー用の追加フィールドを含める必要があるためです。

基本クラスを持つ Object - コードの繰り返しを避けるための重要なステップ。 たとえば、クラスがありません Object すべてのゲーム オブジェクトは同じ実装でなければなりません distanceTo()そして、これらすべての実装を複数のファイルにコピーアンドペーストするのは悪夢のような作業になります。 これは大規模なプロジェクトの場合に特に重要になります。拡張数が増えたとき Object クラスが増えています。

4. 衝突検知

私たちに残された唯一のことは、発射物がいつプレイヤーに当たったかを認識することです。 メソッドのこのコード部分を覚えておいてください update() クラスで Game:

ゲーム.js

const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // ...

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // ...
  }
}

メソッドを実装する必要があります applyCollisions()、プレイヤーに当たるすべての発射物を返します。 幸いなことに、それはそれほど難しいことではありません。

• 衝突するオブジェクトはすべて円であり、これは衝突検出を実装する最も単純な形状です。
• 私たちはすでにメソッドを持っています distanceTo()、前のセクションでクラスに実装しました Object.

衝突検出の実装は次のようになります。

衝突.js

const Constants = require('../shared/constants');

// Returns an array of bullets to be destroyed.
function applyCollisions(players, bullets) {
  const destroyedBullets = [];
  for (let i = 0; i < bullets.length; i++) {
    // Look for a player (who didn't create the bullet) to collide each bullet with.
    // As soon as we find one, break out of the loop to prevent double counting a bullet.
    for (let j = 0; j < players.length; j++) {
      const bullet = bullets[i];
      const player = players[j];
      if (
        bullet.parentID !== player.id &&
        player.distanceTo(bullet) <= Constants.PLAYER_RADIUS + Constants.BULLET_RADIUS
      ) {
        destroyedBullets.push(bullet);
        player.takeBulletDamage();
        break;
      }
    }
  }
  return destroyedBullets;
}

この単純な衝突検出は、次の事実に基づいています。 XNUMX つの円は、中心間の距離が半径の合計より小さい場合に衝突します。。 以下は、XNUMX つの円の中心間の距離がそれらの半径の合計に正確に等しい場合です。

ここで考慮すべき点がさらにいくつかあります。

• 発射物は、それを作成したプレイヤーに当たらないようにしてください。 これは比較することで達成できます bullet.parentID с player.id.
• 複数のプレイヤーに同時に命中する極端な場合、発射物は XNUMX 回だけ命中する必要があります。 演算子を使用してこの問題を解決します。 break: 発射物と衝突しているプレイヤーが見つかるとすぐに検索を停止し、次の発射物に進みます。

終了

それだけです！ .io Web ゲームを作成するために知っておくべきことはすべて網羅しました。 次は何ですか？ 独自の .io ゲームを構築しましょう!

すべてのサンプルコードはオープンソースであり、次のサイトに掲載されています。 githubの.

出所： habr.com