.io ਸ਼ੈਲੀ ਵਿੱਚ ਇੱਕ ਮਲਟੀਪਲੇਅਰ ਵੈੱਬ ਗੇਮ ਬਣਾਉਣਾ

2015 ਵਿੱਚ ਰਿਲੀਜ਼ ਹੋਈ ਅਗਰ.ਓ ਇੱਕ ਨਵੀਂ ਸ਼ੈਲੀ ਦਾ ਪੂਰਵਜ ਬਣ ਗਿਆ games.io, ਜਿਸਦੀ ਪ੍ਰਸਿੱਧੀ ਉਦੋਂ ਤੋਂ ਬਹੁਤ ਵਧ ਗਈ ਹੈ। ਮੈਂ ਖੁਦ .io ਗੇਮਾਂ ਦੀ ਪ੍ਰਸਿੱਧੀ ਵਿੱਚ ਵਾਧਾ ਅਨੁਭਵ ਕੀਤਾ ਹੈ: ਪਿਛਲੇ ਤਿੰਨ ਸਾਲਾਂ ਵਿੱਚ, ਆਈ ਇਸ ਸ਼ੈਲੀ ਵਿੱਚ ਦੋ ਗੇਮਾਂ ਬਣਾਈਆਂ ਅਤੇ ਵੇਚੀਆਂ।.

ਜੇਕਰ ਤੁਸੀਂ ਇਹਨਾਂ ਗੇਮਾਂ ਬਾਰੇ ਪਹਿਲਾਂ ਕਦੇ ਨਹੀਂ ਸੁਣਿਆ ਹੈ, ਤਾਂ ਇਹ ਮੁਫਤ, ਮਲਟੀਪਲੇਅਰ ਵੈੱਬ ਗੇਮਾਂ ਹਨ ਜੋ ਖੇਡਣ ਲਈ ਆਸਾਨ ਹਨ (ਕਿਸੇ ਖਾਤੇ ਦੀ ਲੋੜ ਨਹੀਂ)। ਉਹ ਆਮ ਤੌਰ 'ਤੇ ਬਹੁਤ ਸਾਰੇ ਵਿਰੋਧੀ ਖਿਡਾਰੀਆਂ ਨੂੰ ਇੱਕ ਅਖਾੜੇ ਵਿੱਚ ਖੜ੍ਹਾ ਕਰਦੇ ਹਨ। ਹੋਰ ਮਸ਼ਹੂਰ .io ਗੇਮਾਂ: Slither.io и Diep.io.

ਇਸ ਪੋਸਟ ਵਿੱਚ ਅਸੀਂ ਇਹ ਪਤਾ ਲਗਾਵਾਂਗੇ ਕਿ ਕਿਵੇਂ ਸਕ੍ਰੈਚ ਤੋਂ ਇੱਕ .io ਗੇਮ ਬਣਾਓ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਦਾ ਸਿਰਫ ਗਿਆਨ ਕਾਫ਼ੀ ਹੋਵੇਗਾ: ਤੁਹਾਨੂੰ ਸਿੰਟੈਕਸ ਵਰਗੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਸਮਝਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ES6, ਕੀਵਰਡ this и ਵਾਅਦੇ. ਭਾਵੇਂ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਾਲ ਨਹੀਂ ਜਾਣਦੇ ਹੋ, ਫਿਰ ਵੀ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ ਪੋਸਟਾਂ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹੋ।

ਇੱਕ .io ਗੇਮ ਦੀ ਉਦਾਹਰਨ

ਸਿਖਲਾਈ ਸਹਾਇਤਾ ਲਈ ਅਸੀਂ ਹਵਾਲਾ ਦੇਵਾਂਗੇ ਉਦਾਹਰਨ ਗੇਮ .io. ਇਸਨੂੰ ਖੇਡਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ!

ਖੇਡ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ: ਤੁਸੀਂ ਦੂਜੇ ਖਿਡਾਰੀਆਂ ਦੇ ਨਾਲ ਇੱਕ ਅਖਾੜੇ ਵਿੱਚ ਇੱਕ ਜਹਾਜ਼ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦੇ ਹੋ. ਤੁਹਾਡਾ ਜਹਾਜ਼ ਆਟੋਮੈਟਿਕ ਹੀ ਪ੍ਰੋਜੈਕਟਾਈਲਾਂ ਨੂੰ ਫਾਇਰ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਸੀਂ ਦੂਜੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਪ੍ਰੋਜੈਕਟਾਈਲਾਂ ਤੋਂ ਬਚਦੇ ਹੋਏ ਮਾਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ।

1. ਸੰਖੇਪ ਜਾਣਕਾਰੀ/ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ

ਮੈਂ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹਾਂ ਸਰੋਤ ਕੋਡ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਉਦਾਹਰਨ ਗੇਮ ਤਾਂ ਜੋ ਤੁਸੀਂ ਮੇਰਾ ਅਨੁਸਰਣ ਕਰ ਸਕੋ.

ਉਦਾਹਰਨ ਹੇਠ ਲਿਖੇ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ:

• ਐਕਸਪ੍ਰੈੱਸ Node.js ਲਈ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਵੈੱਬ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਗੇਮ ਦੇ ਵੈੱਬ ਸਰਵਰ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ।
• socket.io - ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਸਰਵਰ ਵਿਚਕਾਰ ਡੇਟਾ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਵੈਬਸਾਕੇਟ ਲਾਇਬ੍ਰੇਰੀ।
• ਵੈਬਪੈਕ - ਮੋਡੀਊਲ ਮੈਨੇਜਰ. ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ ਕਿ ਵੈਬਪੈਕ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰਨੀ ਹੈ ਇੱਥੇ.

ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਬਣਤਰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:

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

ਜਨਤਕ/

ਹਰ ਚੀਜ਼ ਫੋਲਡਰ ਵਿੱਚ ਹੈ public/ ਸਰਵਰ ਦੁਆਰਾ ਸਥਿਰ ਤੌਰ 'ਤੇ ਪ੍ਰਸਾਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ। IN public/assets/ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੁਆਰਾ ਵਰਤੀਆਂ ਗਈਆਂ ਤਸਵੀਰਾਂ ਸ਼ਾਮਲ ਹਨ।

src /

ਸਾਰੇ ਸਰੋਤ ਕੋਡ ਫੋਲਡਰ ਵਿੱਚ ਹੈ src/. ਸਿਰਲੇਖ client/ и server/ ਆਪਣੇ ਲਈ ਬੋਲੋ ਅਤੇ shared/ ਕਲਾਇਟ ਅਤੇ ਸਰਵਰ ਦੋਵਾਂ ਦੁਆਰਾ ਆਯਾਤ ਕੀਤੀ ਇੱਕ ਸਥਿਰ ਫਾਈਲ ਰੱਖਦਾ ਹੈ।

2. ਅਸੈਂਬਲੀਆਂ/ਪ੍ਰੋਜੈਕਟ ਪੈਰਾਮੀਟਰ

ਜਿਵੇਂ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਅਸੀਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮੋਡਿਊਲ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਵੈਬਪੈਕ. ਆਉ ਸਾਡੀ ਵੈਬਪੈਕ ਕੌਂਫਿਗਰੇਸ਼ਨ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੀਏ:

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) ਕਲਾਇੰਟ ਦਾ ਐਂਟਰੀ ਪੁਆਇੰਟ ਹੈ। ਵੈਬਪੈਕ ਇੱਥੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਅਤੇ ਦੂਜੀਆਂ ਆਯਾਤ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਮੁੜ-ਮੁੜ ਖੋਜ ਕਰੇਗਾ।
• ਸਾਡੇ ਵੈਬਪੈਕ ਬਿਲਡ ਦਾ ਆਉਟਪੁੱਟ JS ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਸਥਿਤ ਹੋਵੇਗਾ dist/. ਮੈਂ ਇਸ ਫਾਈਲ ਨੂੰ ਸਾਡੀ ਕਾਲ ਕਰਾਂਗਾ ਜੇਐਸ ਪੈਕੇਜ.
• ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ ਬਾਬਲ, ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ ਸੰਰਚਨਾ @babel/preset-env ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਸਾਡੇ JS ਕੋਡ ਨੂੰ ਟ੍ਰਾਂਸਪਾਈਲ ਕਰਨ ਲਈ।
• ਅਸੀਂ JS ਫਾਈਲਾਂ ਦੁਆਰਾ ਹਵਾਲਾ ਦਿੱਤੇ ਸਾਰੇ CSS ਨੂੰ ਐਕਸਟਰੈਕਟ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਥਾਂ ਤੇ ਜੋੜਨ ਲਈ ਇੱਕ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਮੈਂ ਇਸਨੂੰ ਸਾਡਾ ਕਹਾਂਗਾ CSS ਪੈਕੇਜ.

ਤੁਸੀਂ ਸ਼ਾਇਦ ਅਜੀਬ ਪੈਕੇਜ ਫਾਈਲ ਨਾਮ ਦੇਖੇ ਹੋਣਗੇ '[name].[contenthash].ext'. ਉਹ ਰੱਖਦਾ ਹੈ ਫਾਈਲ ਨਾਮ ਬਦਲ ਵੈਬਪੈਕ: [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, ਉਤਪਾਦਨ ਲਈ ਤੈਨਾਤ ਕਰਨ ਵੇਲੇ ਪੈਕੇਜ ਅਕਾਰ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ।

ਸਥਾਨਕ ਸੈੱਟਅੱਪ

ਮੈਂ ਤੁਹਾਡੀ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹਾਂ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਪੋਸਟ ਵਿੱਚ ਸੂਚੀਬੱਧ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕੋ। ਸੈੱਟਅੱਪ ਸਧਾਰਨ ਹੈ: ਪਹਿਲਾਂ, ਸਿਸਟਮ ਕੋਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਨੋਡ и ਐਨਪੀਐਮ. ਅੱਗੇ ਤੁਹਾਨੂੰ ਕੀ ਕਰਨ ਦੀ ਲੋੜ ਹੈ

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

ਅਤੇ ਤੁਸੀਂ ਜਾਣ ਲਈ ਤਿਆਰ ਹੋ! ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਬੱਸ ਚਲਾਓ

$ npm run develop

ਅਤੇ ਆਪਣੇ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਜਾਓ ਲੋਕਲਹੋਸਟ: 3000. ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਆਪਣੇ ਆਪ JS ਅਤੇ CSS ਪੈਕੇਜਾਂ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾ ਦੇਵੇਗਾ ਕਿਉਂਕਿ ਕੋਡ ਤਬਦੀਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ - ਸਾਰੀਆਂ ਤਬਦੀਲੀਆਂ ਦੇਖਣ ਲਈ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕਰੋ!

3. ਕਲਾਇੰਟ ਐਂਟਰੀ ਪੁਆਇੰਟ

ਆਓ ਗੇਮ ਕੋਡ 'ਤੇ ਆਪਣੇ ਆਪ ਹੇਠਾਂ ਉਤਰੀਏ। ਪਹਿਲਾਂ ਸਾਨੂੰ ਇੱਕ ਪੰਨੇ ਦੀ ਲੋੜ ਹੈ index.html, ਜਦੋਂ ਤੁਸੀਂ ਸਾਈਟ 'ਤੇ ਜਾਂਦੇ ਹੋ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਪਹਿਲਾਂ ਲੋਡ ਕਰੇਗਾ। ਸਾਡਾ ਪੰਨਾ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੋਵੇਗਾ:

Index.html

ਇੱਕ ਉਦਾਹਰਨ .io ਗੇਮ  ਖੇਡੋ

ਇਸ ਕੋਡ ਉਦਾਹਰਨ ਨੂੰ ਸਪਸ਼ਟਤਾ ਲਈ ਥੋੜ੍ਹਾ ਜਿਹਾ ਸਰਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਅਤੇ ਮੈਂ ਪੋਸਟ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਨਾਲ ਵੀ ਅਜਿਹਾ ਹੀ ਕਰਾਂਗਾ। ਤੁਸੀਂ ਹਮੇਸ਼ਾ 'ਤੇ ਪੂਰਾ ਕੋਡ ਦੇਖ ਸਕਦੇ ਹੋ GitHub.

ਸਾਡੇ ਕੋਲ:

• HTML5 ਕੈਨਵਸ ਤੱਤ (<canvas>), ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਗੇਮ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਕਰਾਂਗੇ।
• <link> ਸਾਡੇ CSS ਪੈਕੇਜ ਨੂੰ ਜੋੜਨ ਲਈ।
• <script> ਸਾਡੇ Javascript ਪੈਕੇਜ ਨੂੰ ਜੋੜਨ ਲਈ.
• ਉਪਭੋਗਤਾ ਨਾਮ ਦੇ ਨਾਲ ਮੁੱਖ ਮੇਨੂ <input> ਅਤੇ "PLAY" ਬਟਨ (<button>).

ਇੱਕ ਵਾਰ ਹੋਮ ਪੇਜ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਬ੍ਰਾਊਜ਼ਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨੂੰ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰ ਦੇਵੇਗਾ, ਐਂਟਰੀ ਪੁਆਇੰਟ JS ਫਾਈਲ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ: 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 ਆਯਾਤ ਕਰੋ (ਇਸ ਲਈ ਵੈਬਪੈਕ ਉਹਨਾਂ ਨੂੰ ਸਾਡੇ CSS ਪੈਕੇਜ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਜਾਣਦਾ ਹੈ)।
3. ਚਲਾਓ connect() ਸਰਵਰ ਨਾਲ ਕੁਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਸ਼ੁਰੂ ਕਰਨ ਲਈ downloadAssets() ਗੇਮ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਲੋੜੀਂਦੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ।
4. ਪੜਾਅ 3 ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਮੁੱਖ ਮੇਨੂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (playMenu).
5. "PLAY" ਬਟਨ ਕਲਿੱਕ ਹੈਂਡਲਰ ਨੂੰ ਸੈਟ ਅਪ ਕਰਨਾ। ਜਦੋਂ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਕੋਡ ਗੇਮ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਸਰਵਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਅਸੀਂ ਖੇਡਣ ਲਈ ਤਿਆਰ ਹਾਂ।

ਸਾਡੇ ਕਲਾਇੰਟ-ਸਰਵਰ ਤਰਕ ਦਾ ਮੁੱਖ "ਮੀਟ" ਉਹਨਾਂ ਫਾਈਲਾਂ ਵਿੱਚ ਹੈ ਜੋ ਫਾਈਲ ਦੁਆਰਾ ਆਯਾਤ ਕੀਤੀਆਂ ਗਈਆਂ ਸਨ index.js. ਹੁਣ ਅਸੀਂ ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਕ੍ਰਮ ਵਿੱਚ ਵੇਖਾਂਗੇ.

4. ਕਲਾਇੰਟ ਡੇਟਾ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ

ਇਸ ਗੇਮ ਵਿੱਚ ਅਸੀਂ ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ ਇੱਕ ਮਸ਼ਹੂਰ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ socket.io. Socket.io ਕੋਲ ਬਿਲਟ-ਇਨ ਸਪੋਰਟ ਹੈ ਵੈਬਸੌਕੇਟ, ਜੋ ਦੋ-ਪੱਖੀ ਸੰਚਾਰ ਲਈ ਚੰਗੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲ ਹਨ: ਅਸੀਂ ਸਰਵਰ ਨੂੰ ਸੁਨੇਹੇ ਭੇਜ ਸਕਦੇ ਹਾਂ и ਸਰਵਰ ਉਸੇ ਕੁਨੈਕਸ਼ਨ 'ਤੇ ਸਾਨੂੰ ਸੁਨੇਹੇ ਭੇਜ ਸਕਦਾ ਹੈ।

ਸਾਡੇ ਕੋਲ ਇੱਕ ਫਾਈਲ ਹੋਵੇਗੀ src/client/networking.jsਜੋ ਦੇਖਭਾਲ ਕਰੇਗਾ ਹਰ ਕੋਈ ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ:

networking.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);
};

ਸਪਸ਼ਟਤਾ ਲਈ ਇਹ ਕੋਡ ਵੀ ਥੋੜ੍ਹਾ ਛੋਟਾ ਕੀਤਾ ਗਿਆ ਹੈ।

ਇਸ ਫਾਈਲ ਵਿੱਚ ਤਿੰਨ ਮੁੱਖ ਚੀਜ਼ਾਂ ਹੋ ਰਹੀਆਂ ਹਨ:

• ਅਸੀਂ ਸਰਵਰ ਨਾਲ ਜੁੜਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ। connectedPromise ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਅਸੀਂ ਇੱਕ ਕੁਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕੀਤਾ ਹੁੰਦਾ ਹੈ।
• ਜੇਕਰ ਕੁਨੈਕਸ਼ਨ ਸਫਲ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਰਜਿਸਟਰ ਕਰਦੇ ਹਾਂ (processGameUpdate() и onGameOver()) ਉਹਨਾਂ ਸੁਨੇਹਿਆਂ ਲਈ ਜੋ ਅਸੀਂ ਸਰਵਰ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।
• ਅਸੀਂ ਨਿਰਯਾਤ ਕਰਦੇ ਹਾਂ play() и updateDirection()ਤਾਂ ਜੋ ਹੋਰ ਫਾਈਲਾਂ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਣ।

5. ਕਲਾਇੰਟ ਰੈਂਡਰਿੰਗ

ਇਹ ਸਕ੍ਰੀਨ 'ਤੇ ਤਸਵੀਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦਾ ਸਮਾਂ ਹੈ!

...ਪਰ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਅਸੀਂ ਅਜਿਹਾ ਕਰ ਸਕੀਏ, ਸਾਨੂੰ ਇਸ ਲਈ ਲੋੜੀਂਦੇ ਸਾਰੇ ਚਿੱਤਰ (ਸਰੋਤ) ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਚਲੋ ਇੱਕ ਸਰੋਤ ਪ੍ਰਬੰਧਕ ਲਿਖੋ:

assets.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.

ਸਰੋਤਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਰੈਂਡਰਿੰਗ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ। ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਕਿਹਾ ਗਿਆ ਹੈ, ਇੱਕ ਵੈਬ ਪੇਜ 'ਤੇ ਖਿੱਚਣ ਲਈ ਜੋ ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ HTML5 ਕੈਨਵਸ (<canvas>). ਸਾਡੀ ਖੇਡ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਇਸਲਈ ਸਾਨੂੰ ਸਿਰਫ ਹੇਠ ਲਿਖਿਆਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:

1. ਪਿਛੋਕੜ
2. ਖਿਡਾਰੀ ਜਹਾਜ਼
3. ਖੇਡ ਵਿੱਚ ਹੋਰ ਖਿਡਾਰੀ
4. ਸ਼ੈੱਲ

ਇੱਥੇ ਮਹੱਤਵਪੂਰਨ ਸਨਿੱਪਟ ਹਨ src/client/render.js, ਜੋ ਉੱਪਰ ਸੂਚੀਬੱਧ ਚਾਰ ਬਿੰਦੂਆਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ:

render.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()) ਇੰਨੇ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹਨ, ਪਰ ਇੱਥੇ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਹੈ:

render.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. ਗਾਹਕ ਸਥਿਤੀ

ਪੋਸਟ ਦੇ ਪਹਿਲੇ ਭਾਗ ਵਿੱਚ ਇਹ ਭਾਗ ਸਭ ਤੋਂ ਔਖਾ ਹੈ। ਨਿਰਾਸ਼ ਨਾ ਹੋਵੋ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਪਹਿਲੀ ਵਾਰ ਪੜ੍ਹਦੇ ਸਮੇਂ ਸਮਝ ਨਹੀਂ ਪਾਉਂਦੇ ਹੋ! ਤੁਸੀਂ ਇਸਨੂੰ ਛੱਡ ਵੀ ਸਕਦੇ ਹੋ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸ 'ਤੇ ਵਾਪਸ ਆ ਸਕਦੇ ਹੋ।

ਕਲਾਇੰਟ-ਸਰਵਰ ਕੋਡ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਲੋੜੀਂਦੀ ਬੁਝਾਰਤ ਦਾ ਆਖਰੀ ਟੁਕੜਾ ਹੈ ਰਾਜ. ਕਲਾਇੰਟ ਰੈਂਡਰਿੰਗ ਸੈਕਸ਼ਨ ਤੋਂ ਕੋਡ ਸਨਿੱਪਟ ਯਾਦ ਹੈ?

render.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
    }
  ]
}

ਹਰੇਕ ਗੇਮ ਅਪਡੇਟ ਵਿੱਚ ਪੰਜ ਇੱਕੋ ਜਿਹੇ ਖੇਤਰ ਹੁੰਦੇ ਹਨ:

• 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;
}

ਸੁੰਦਰ ਅਤੇ ਸਪਸ਼ਟ! ਪਰ ਜੇ ਸਿਰਫ ਇਹ ਸਧਾਰਨ ਹੁੰਦਾ. ਇਸ ਲਾਗੂ ਕਰਨ ਦੇ ਕਾਰਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਸਮੱਸਿਆ ਹੈ: ਇਹ ਰੈਂਡਰਿੰਗ ਫਰੇਮ ਰੇਟ ਨੂੰ ਸਰਵਰ ਕਲਾਕ ਸਪੀਡ ਤੱਕ ਸੀਮਿਤ ਕਰਦਾ ਹੈ.

ਫਰੇਮ ਦੀ ਦਰ: ਫਰੇਮਾਂ ਦੀ ਗਿਣਤੀ (ਜਿਵੇਂ ਕਿ ਕਾਲਾਂ render()) ਪ੍ਰਤੀ ਸਕਿੰਟ, ਜਾਂ FPS। ਖੇਡਾਂ ਆਮ ਤੌਰ 'ਤੇ ਘੱਟੋ-ਘੱਟ 60 FPS ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੀਆਂ ਹਨ।

ਟਿਕ ਰੇਟ: ਉਹ ਬਾਰੰਬਾਰਤਾ ਜਿਸ ਨਾਲ ਸਰਵਰ ਕਲਾਇੰਟਸ ਨੂੰ ਗੇਮ ਅੱਪਡੇਟ ਭੇਜਦਾ ਹੈ। ਇਹ ਅਕਸਰ ਫਰੇਮ ਰੇਟ ਤੋਂ ਘੱਟ ਹੁੰਦਾ ਹੈ. ਸਾਡੀ ਗੇਮ ਵਿੱਚ, ਸਰਵਰ 30 ਟਿੱਕ ਪ੍ਰਤੀ ਸਕਿੰਟ 'ਤੇ ਚੱਲਦਾ ਹੈ।

ਜੇਕਰ ਅਸੀਂ ਹੁਣੇ ਹੀ ਨਵੀਨਤਮ ਗੇਮ ਅਪਡੇਟ ਪੇਸ਼ ਕਰਦੇ ਹਾਂ, ਤਾਂ FPS ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਕਦੇ ਵੀ 30 ਤੋਂ ਵੱਧ ਨਹੀਂ ਹੋ ਸਕੇਗਾ ਕਿਉਂਕਿ ਸਾਨੂੰ ਸਰਵਰ ਤੋਂ ਪ੍ਰਤੀ ਸਕਿੰਟ 30 ਤੋਂ ਵੱਧ ਅੱਪਡੇਟ ਪ੍ਰਾਪਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ. ਭਾਵੇਂ ਅਸੀਂ ਬੁਲਾਉਂਦੇ ਹਾਂ render() 60 ਵਾਰ ਪ੍ਰਤੀ ਸਕਿੰਟ, ਫਿਰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਅੱਧੀਆਂ ਕਾਲਾਂ ਸਿਰਫ਼ ਉਸੇ ਚੀਜ਼ ਨੂੰ ਦੁਬਾਰਾ ਖਿੱਚਣਗੀਆਂ, ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਕੁਝ ਨਹੀਂ ਕਰਨਾ। ਇੱਕ ਭੋਲੇਪਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਨਾਲ ਇੱਕ ਹੋਰ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਇਹ ਦੇਰੀ ਦੇ ਅਧੀਨ. ਆਦਰਸ਼ ਇੰਟਰਨੈਟ ਸਪੀਡ 'ਤੇ, ਕਲਾਇੰਟ ਨੂੰ ਹਰ 33 ms (30 ਪ੍ਰਤੀ ਸਕਿੰਟ) ਵਿੱਚ ਇੱਕ ਗੇਮ ਅਪਡੇਟ ਪ੍ਰਾਪਤ ਹੋਵੇਗਾ:

ਬਦਕਿਸਮਤੀ ਨਾਲ, ਕੁਝ ਵੀ ਸੰਪੂਰਨ ਨਹੀਂ ਹੈ. ਇੱਕ ਹੋਰ ਯਥਾਰਥਵਾਦੀ ਤਸਵੀਰ ਹੋਵੇਗੀ:

ਜਦੋਂ ਲੇਟੈਂਸੀ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ ਤਾਂ ਇੱਕ ਭੋਲਾ ਅਮਲ ਸਭ ਤੋਂ ਮਾੜਾ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਗੇਮ ਅੱਪਡੇਟ 50ms ਦੇਰੀ ਨਾਲ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਗਾਹਕ ਹੌਲੀ ਹੋ ਗਿਆ ਹੈ ਇੱਕ ਵਾਧੂ 50ms ਦੁਆਰਾ ਕਿਉਂਕਿ ਇਹ ਅਜੇ ਵੀ ਪਿਛਲੇ ਅਪਡੇਟ ਤੋਂ ਗੇਮ ਸਟੇਟ ਨੂੰ ਪੇਸ਼ ਕਰ ਰਿਹਾ ਹੈ। ਤੁਸੀਂ ਕਲਪਨਾ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਖਿਡਾਰੀ ਲਈ ਕਿੰਨਾ ਅਸੁਵਿਧਾਜਨਕ ਹੈ: ਮਨਮਾਨੇ ਮੰਦੀ ਦੇ ਕਾਰਨ, ਖੇਡ ਝਟਕੇਦਾਰ ਅਤੇ ਅਸਥਿਰ ਜਾਪਦੀ ਹੈ।

7.2 ਸੁਧਰੀ ਕਲਾਇੰਟ ਸਟੇਟ

ਅਸੀਂ ਭੋਲੇਪਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਕੁਝ ਸੁਧਾਰ ਕਰਾਂਗੇ। ਪਹਿਲਾਂ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ ਰੈਂਡਰਿੰਗ ਦੇਰੀ 100 ms ਦੁਆਰਾ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕਲਾਇੰਟ ਦੀ "ਮੌਜੂਦਾ" ਸਥਿਤੀ ਹਮੇਸ਼ਾਂ ਸਰਵਰ 'ਤੇ ਗੇਮ ਸਟੇਟ ਤੋਂ 100ms ਪਿੱਛੇ ਹੋਵੇਗੀ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਸਰਵਰ ਦਾ ਸਮਾਂ ਹੈ 150, ਫਿਰ ਕਲਾਇੰਟ ਉਸ ਸਥਿਤੀ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ ਜਿਸ ਵਿੱਚ ਸਰਵਰ ਉਸ ਸਮੇਂ ਸੀ 50:

ਇਹ ਸਾਨੂੰ ਗੇਮ ਅੱਪਡੇਟ ਦੇ ਅਣਪਛਾਤੇ ਸਮੇਂ ਤੋਂ ਬਚਣ ਲਈ 100ms ਬਫਰ ਦਿੰਦਾ ਹੈ:

ਇਸ ਦੀ ਕੀਮਤ ਸਥਾਈ ਹੋਵੇਗੀ ਇੰਪੁੱਟ ਲੈਗ 100 ms ਦੁਆਰਾ ਇਹ ਨਿਰਵਿਘਨ ਗੇਮਪਲੇ ਲਈ ਇੱਕ ਮਾਮੂਲੀ ਕੁਰਬਾਨੀ ਹੈ - ਜ਼ਿਆਦਾਤਰ ਖਿਡਾਰੀ (ਖਾਸ ਕਰਕੇ ਆਮ ਲੋਕ) ਇਸ ਦੇਰੀ ਵੱਲ ਧਿਆਨ ਨਹੀਂ ਦੇਣਗੇ। ਲੋਕਾਂ ਲਈ 100ms ਲੇਟੈਂਸੀ ਨੂੰ ਅਪ੍ਰਮਾਣਿਤ ਲੇਟੈਂਸੀ ਨਾਲ ਖੇਡਣ ਨਾਲੋਂ ਵਿਵਸਥਿਤ ਕਰਨਾ ਬਹੁਤ ਸੌਖਾ ਹੈ।

ਅਸੀਂ ਇਕ ਹੋਰ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ ਜਿਸ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ "ਗਾਹਕ-ਪਾਸੇ ਦੀ ਭਵਿੱਖਬਾਣੀ", ਜੋ ਸਮਝੀ ਗਈ ਲੇਟੈਂਸੀ ਨੂੰ ਘਟਾਉਣ ਦਾ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਇਸ ਪੋਸਟ ਵਿੱਚ ਚਰਚਾ ਨਹੀਂ ਕੀਤੀ ਜਾਵੇਗੀ।

ਇੱਕ ਹੋਰ ਸੁਧਾਰ ਜੋ ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ ਉਹ ਹੈ ਰੇਖਿਕ ਇੰਟਰਪੋਲੇਸ਼ਨ. ਰੈਂਡਰਿੰਗ ਲੈਗ ਦੇ ਕਾਰਨ, ਅਸੀਂ ਆਮ ਤੌਰ 'ਤੇ ਕਲਾਇੰਟ ਵਿੱਚ ਮੌਜੂਦਾ ਸਮੇਂ ਤੋਂ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਅੱਪਡੇਟ ਅੱਗੇ ਹੁੰਦੇ ਹਾਂ। ਜਦੋਂ ਬੁਲਾਇਆ ਗਿਆ getCurrentState(), ਅਸੀਂ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਾਂ ਰੇਖਿਕ ਇੰਟਰਪੋਲੇਸ਼ਨ ਕਲਾਇੰਟ ਵਿੱਚ ਮੌਜੂਦਾ ਸਮੇਂ ਤੋਂ ਠੀਕ ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਗੇਮ ਅਪਡੇਟਸ ਦੇ ਵਿਚਕਾਰ:

ਇਹ ਫਰੇਮ ਰੇਟ ਦੀ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ: ਅਸੀਂ ਹੁਣ ਲੋੜੀਂਦੇ ਕਿਸੇ ਵੀ ਫਰੇਮ ਰੇਟ 'ਤੇ ਵਿਲੱਖਣ ਫਰੇਮਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰ ਸਕਦੇ ਹਾਂ!

7.3 ਇੱਕ ਸੁਧਰੀ ਕਲਾਇੰਟ ਸਟੇਟ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਵਿੱਚ ਉਦਾਹਰਨ ਲਾਗੂ ਕਰਨਾ src/client/state.js ਰੈਂਡਰਿੰਗ ਦੇਰੀ ਅਤੇ ਲੀਨੀਅਰ ਇੰਟਰਪੋਲੇਸ਼ਨ ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਲੰਬੇ ਸਮੇਂ ਤੱਕ ਨਹੀਂ ਚੱਲਦਾ। ਆਉ ਕੋਡ ਨੂੰ ਦੋ ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡੀਏ। ਇੱਥੇ ਪਹਿਲਾ ਹੈ:

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(). ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਦੇਖਿਆ ਸੀ, ਹਰੇਕ ਗੇਮ ਅਪਡੇਟ ਵਿੱਚ ਇੱਕ ਸਰਵਰ ਟਾਈਮਸਟੈਂਪ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। ਅਸੀਂ ਸਰਵਰ ਦੇ ਪਿੱਛੇ ਚਿੱਤਰ ਨੂੰ 100ms ਰੈਂਡਰ ਕਰਨ ਲਈ ਰੈਂਡਰ ਲੇਟੈਂਸੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਪਰ ਸਾਨੂੰ ਸਰਵਰ 'ਤੇ ਮੌਜੂਦਾ ਸਮਾਂ ਕਦੇ ਨਹੀਂ ਪਤਾ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਅਸੀਂ ਨਹੀਂ ਜਾਣ ਸਕਦੇ ਕਿ ਕਿਸੇ ਵੀ ਅੱਪਡੇਟ ਨੂੰ ਸਾਡੇ ਤੱਕ ਪਹੁੰਚਣ ਵਿੱਚ ਕਿੰਨਾ ਸਮਾਂ ਲੱਗਾ। ਇੰਟਰਨੈਟ ਅਪ੍ਰਤੱਖ ਹੈ ਅਤੇ ਇਸਦੀ ਗਤੀ ਬਹੁਤ ਬਦਲ ਸਕਦੀ ਹੈ!

ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਅਸੀਂ ਇੱਕ ਵਾਜਬ ਅਨੁਮਾਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ: ਅਸੀਂ ਆਓ ਦਿਖਾਉਂਦੇ ਹਾਂ ਕਿ ਪਹਿਲਾ ਅਪਡੇਟ ਤੁਰੰਤ ਆ ਗਿਆ. ਜੇ ਇਹ ਸੱਚ ਸੀ, ਤਾਂ ਸਾਨੂੰ ਉਸ ਖਾਸ ਪਲ 'ਤੇ ਸਰਵਰ ਦਾ ਸਮਾਂ ਪਤਾ ਹੋਵੇਗਾ! ਅਸੀਂ ਸਰਵਰ ਟਾਈਮਸਟੈਂਪ ਨੂੰ ਸਟੋਰ ਕਰਦੇ ਹਾਂ 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),
    };
  }
}

ਅਸੀਂ ਤਿੰਨ ਕੇਸਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਹਾਂ:

1. base < 0 ਮਤਲਬ ਕਿ ਮੌਜੂਦਾ ਰੈਂਡਰਿੰਗ ਸਮੇਂ ਤੱਕ ਕੋਈ ਅੱਪਡੇਟ ਨਹੀਂ ਹਨ (ਉੱਪਰ ਲਾਗੂਕਰਨ ਦੇਖੋ getBaseUpdate()). ਇਹ ਰੈਂਡਰਿੰਗ ਲੈਗ ਦੇ ਕਾਰਨ ਗੇਮ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਹੀ ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਅਸੀਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਅਪਡੇਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
2. base ਸਾਡੇ ਕੋਲ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਅਪਡੇਟ ਹੈ। ਇਹ ਨੈੱਟਵਰਕ ਲੇਟੈਂਸੀ ਜਾਂ ਖਰਾਬ ਇੰਟਰਨੈੱਟ ਕਨੈਕਸ਼ਨ ਕਾਰਨ ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਵੀ ਅਸੀਂ ਸਾਡੇ ਕੋਲ ਨਵੀਨਤਮ ਅਪਡੇਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
3. ਸਾਡੇ ਕੋਲ ਮੌਜੂਦਾ ਰੈਂਡਰ ਸਮੇਂ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇੱਕ ਅੱਪਡੇਟ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਕਰ ਸਕਦੇ ਹਾਂ ਇੰਟਰਪੋਲੇਟ!

ਇਹ ਸਭ ਕੁਝ ਬਾਕੀ ਹੈ state.js ਲੀਨੀਅਰ ਇੰਟਰਪੋਲੇਸ਼ਨ ਦਾ ਇੱਕ ਲਾਗੂਕਰਨ ਹੈ ਜੋ ਸਧਾਰਨ (ਪਰ ਬੋਰਿੰਗ) ਗਣਿਤ ਹੈ। ਜੇ ਤੁਸੀਂ ਖੁਦ ਇਸ ਦੀ ਪੜਚੋਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਖੋਲ੍ਹੋ state.js 'ਤੇ GitHub.

ਭਾਗ 2. ਬੈਕਐਂਡ ਸਰਵਰ

ਇਸ ਹਿੱਸੇ ਵਿੱਚ ਅਸੀਂ Node.js ਬੈਕਐਂਡ ਨੂੰ ਦੇਖਾਂਗੇ ਜੋ ਸਾਡੇ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ ਇੱਕ .io ਗੇਮ ਦੀ ਉਦਾਹਰਨ.

1. ਸਰਵਰ ਐਂਟਰੀ ਪੁਆਇੰਟ

ਵੈੱਬ ਸਰਵਰ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਅਸੀਂ Node.js ਲਈ ਇੱਕ ਪ੍ਰਸਿੱਧ ਵੈੱਬ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜਿਸਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਐਕਸਪ੍ਰੈੱਸ. ਇਹ ਸਾਡੀ ਸਰਵਰ ਐਂਟਰੀ ਪੁਆਇੰਟ ਫਾਈਲ ਦੁਆਰਾ ਕੌਂਫਿਗਰ ਕੀਤਾ ਜਾਵੇਗਾ src/server/server.js:

server.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-dev-midleware ਸਾਡੇ ਵਿਕਾਸ ਪੈਕੇਜਾਂ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ, ਜਾਂ
• ਇੱਕ ਫੋਲਡਰ ਨੂੰ ਸਥਿਰ ਰੂਪ ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕਰੋ dist/, ਜਿਸ ਵਿੱਚ ਵੈਬਪੈਕ ਪ੍ਰੋਡਕਸ਼ਨ ਬਿਲਡ ਤੋਂ ਬਾਅਦ ਸਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਲਿਖੇਗਾ।

ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਕੰਮ server.js ਸਰਵਰ ਨੂੰ ਸਥਾਪਤ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ socket.ioਜੋ ਸਿਰਫ਼ ਐਕਸਪ੍ਰੈਸ ਸਰਵਰ ਨਾਲ ਜੁੜਦਾ ਹੈ:

server.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:

server.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 ਗੇਮ ਬਣਾ ਰਹੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਕਾਪੀ ਦੀ ਲੋੜ ਪਵੇਗੀ Game ("ਗੇਮ") - ਸਾਰੇ ਖਿਡਾਰੀ ਇੱਕੋ ਅਖਾੜੇ ਵਿੱਚ ਖੇਡਦੇ ਹਨ! ਅਗਲੇ ਭਾਗ ਵਿੱਚ ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਇਹ ਕਲਾਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ Game.

2. ਗੇਮ ਸਰਵਰ

Класс Game ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸਰਵਰ-ਸਾਈਡ ਤਰਕ ਰੱਖਦਾ ਹੈ। ਇਸਦੇ ਦੋ ਮੁੱਖ ਕੰਮ ਹਨ: ਖਿਡਾਰੀ ਪ੍ਰਬੰਧਨ и ਖੇਡ ਸਿਮੂਲੇਸ਼ਨ.

ਆਉ ਪਹਿਲੇ ਕੰਮ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ - ਖਿਡਾਰੀਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ।

game.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, ਇਸ ਲਈ ਸਾਨੂੰ ਇਸ ਬਾਰੇ ਚਿੰਤਾ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਮੈਂ ਉਸਨੂੰ ਬੁਲਾਵਾਂਗਾ ਪਲੇਅਰ ਆਈ.ਡੀ.

ਇਸ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ, ਆਓ ਕਲਾਸ ਵਿੱਚ ਇੰਸਟੈਂਸ ਵੇਰੀਏਬਲ ਦੀ ਜਾਂਚ ਕਰੀਏ Game:

• sockets ਇੱਕ ਵਸਤੂ ਹੈ ਜੋ ਪਲੇਅਰ ID ਨੂੰ ਸਾਕਟ ਨਾਲ ਜੋੜਦੀ ਹੈ ਜੋ ਪਲੇਅਰ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ। ਇਹ ਸਾਨੂੰ ਸਮੇਂ ਦੇ ਨਾਲ ਉਹਨਾਂ ਦੇ ਪਲੇਅਰ ਆਈਡੀ ਦੁਆਰਾ ਸਾਕਟਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
• players ਇੱਕ ਵਸਤੂ ਹੈ ਜੋ ਪਲੇਅਰ ਆਈਡੀ ਨੂੰ ਕੋਡ>ਪਲੇਅਰ ਆਬਜੈਕਟ ਨਾਲ ਜੋੜਦੀ ਹੈ

bullets ਵਸਤੂਆਂ ਦੀ ਇੱਕ ਲੜੀ ਹੈ Bullet, ਕੋਈ ਖਾਸ ਆਰਡਰ ਨਹੀਂ ਹੈ।
lastUpdateTime - ਇਹ ਆਖਰੀ ਗੇਮ ਅਪਡੇਟ ਦਾ ਟਾਈਮਸਟੈਂਪ ਹੈ। ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਇਸਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
shouldSendUpdate ਇੱਕ ਸਹਾਇਕ ਵੇਰੀਏਬਲ ਹੈ। ਅਸੀਂ ਜਲਦੀ ਹੀ ਇਸਦਾ ਉਪਯੋਗ ਵੀ ਦੇਖਾਂਗੇ।
ਢੰਗ addPlayer(), removePlayer() и handleInput() ਵਿਆਖਿਆ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ, ਉਹ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ server.js. ਜੇਕਰ ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ਰ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਥੋੜਾ ਉੱਚਾ ਵਾਪਸ ਜਾਓ।

ਆਖਰੀ ਲਾਈਨ constructor() ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅੱਪਡੇਟ ਚੱਕਰ ਗੇਮਾਂ (60 ਅੱਪਡੇਟ/ਸ ਦੀ ਬਾਰੰਬਾਰਤਾ ਦੇ ਨਾਲ):

game.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 ਘੜੀ ਚੱਕਰ/s ਹੈ (ਅਸੀਂ ਪਹਿਲੇ ਭਾਗ ਵਿੱਚ ਘੜੀ ਦੀ ਬਾਰੰਬਾਰਤਾ ਬਾਰੇ ਗੱਲ ਕੀਤੀ ਹੈ)।

ਸਿਰਫ਼ ਗੇਮ ਅੱਪਡੇਟ ਕਿਉਂ ਭੇਜੋ ਸਮੇਂ ਦੁਆਰਾ ? ਚੈਨਲ ਨੂੰ ਬਚਾਉਣ ਲਈ। 30 ਗੇਮ ਅੱਪਡੇਟ ਪ੍ਰਤੀ ਸਕਿੰਟ ਬਹੁਤ ਹੈ!

ਫਿਰ ਕਿਉਂ ਨਾ ਕਾਲ ਕਰੋ? update() 30 ਵਾਰ ਪ੍ਰਤੀ ਸਕਿੰਟ? ਗੇਮ ਸਿਮੂਲੇਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ। ਜਿੰਨੀ ਵਾਰ ਇਸ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ update(), ਗੇਮ ਸਿਮੂਲੇਸ਼ਨ ਵਧੇਰੇ ਸਟੀਕ ਹੋਵੇਗੀ। ਪਰ ਚੁਣੌਤੀਆਂ ਦੀ ਗਿਣਤੀ ਦੁਆਰਾ ਬਹੁਤ ਜ਼ਿਆਦਾ ਦੂਰ ਨਾ ਹੋਵੋ update(), ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਗਣਨਾਤਮਕ ਤੌਰ 'ਤੇ ਮਹਿੰਗਾ ਕੰਮ ਹੈ - 60 ਪ੍ਰਤੀ ਸਕਿੰਟ ਕਾਫ਼ੀ ਹੈ।

ਬਾਕੀ ਕਲਾਸ Game ਵਿੱਚ ਵਰਤੇ ਗਏ ਸਹਾਇਕ ਤਰੀਕਿਆਂ ਦੇ ਸ਼ਾਮਲ ਹਨ update():

game.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() ਇਹ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ - ਇਹ ਸਕੋਰ ਦੁਆਰਾ ਖਿਡਾਰੀਆਂ ਨੂੰ ਛਾਂਟਦਾ ਹੈ, ਚੋਟੀ ਦੇ ਪੰਜ ਲੈਂਦਾ ਹੈ, ਅਤੇ ਹਰੇਕ ਲਈ ਉਪਭੋਗਤਾ ਨਾਮ ਅਤੇ ਸਕੋਰ ਵਾਪਸ ਕਰਦਾ ਹੈ।

createUpdate() ਵਿੱਚ ਵਰਤਿਆ update() ਗੇਮ ਅੱਪਡੇਟ ਬਣਾਉਣ ਲਈ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਵੰਡੇ ਜਾਂਦੇ ਹਨ। ਇਸਦਾ ਮੁੱਖ ਕੰਮ ਢੰਗਾਂ ਨੂੰ ਕਾਲ ਕਰਨਾ ਹੈ serializeForUpdate(), ਕਲਾਸਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ Player и Bullet. ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਸਿਰਫ ਹਰੇਕ ਖਿਡਾਰੀ ਨੂੰ ਡੇਟਾ ਪ੍ਰਸਾਰਿਤ ਕਰਦਾ ਹੈ ਨਜ਼ਦੀਕੀ ਖਿਡਾਰੀ ਅਤੇ ਪ੍ਰੋਜੈਕਟਾਈਲ - ਖਿਡਾਰੀ ਤੋਂ ਦੂਰ ਸਥਿਤ ਗੇਮ ਆਬਜੈਕਟ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਸਾਰਿਤ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ!

3. ਸਰਵਰ 'ਤੇ ਗੇਮ ਆਬਜੈਕਟ

ਸਾਡੀ ਗੇਮ ਵਿੱਚ, ਪ੍ਰੋਜੈਕਟਾਈਲ ਅਤੇ ਖਿਡਾਰੀ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਸਮਾਨ ਹਨ: ਉਹ ਐਬਸਟਰੈਕਟ ਗੋਲ ਮੂਵਿੰਗ ਗੇਮ ਆਬਜੈਕਟ ਹਨ। ਖਿਡਾਰੀਆਂ ਅਤੇ ਪ੍ਰੋਜੈਕਟਾਈਲਾਂ ਵਿਚਕਾਰ ਇਸ ਸਮਾਨਤਾ ਦਾ ਲਾਭ ਲੈਣ ਲਈ, ਆਓ ਇੱਕ ਬੇਸ ਕਲਾਸ ਨੂੰ ਲਾਗੂ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ Object:

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:

bullet.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:

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.

ਟੱਕਰ ਦਾ ਪਤਾ ਲਗਾਉਣ ਦਾ ਸਾਡਾ ਅਮਲ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:

collisions.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;
}

ਇਹ ਸਧਾਰਨ ਟੱਕਰ ਖੋਜ ਇਸ ਤੱਥ 'ਤੇ ਅਧਾਰਤ ਹੈ ਕਿ ਦੋ ਚੱਕਰ ਟਕਰਾਉਂਦੇ ਹਨ ਜੇਕਰ ਉਹਨਾਂ ਦੇ ਕੇਂਦਰਾਂ ਵਿਚਕਾਰ ਦੂਰੀ ਉਹਨਾਂ ਦੀ ਰੇਡੀਆਈ ਦੇ ਜੋੜ ਤੋਂ ਘੱਟ ਹੈ. ਇੱਥੇ ਇੱਕ ਅਜਿਹਾ ਮਾਮਲਾ ਹੈ ਜਿੱਥੇ ਦੋ ਚੱਕਰਾਂ ਦੇ ਕੇਂਦਰਾਂ ਵਿਚਕਾਰ ਦੂਰੀ ਉਹਨਾਂ ਦੇ ਰੇਡੀਆਈ ਦੇ ਜੋੜ ਦੇ ਬਿਲਕੁਲ ਬਰਾਬਰ ਹੈ:

ਇੱਥੇ ਤੁਹਾਨੂੰ ਕੁਝ ਹੋਰ ਪਹਿਲੂਆਂ ਵੱਲ ਧਿਆਨ ਦੇਣ ਦੀ ਲੋੜ ਹੈ:

• ਪ੍ਰੋਜੈਕਟਾਈਲ ਨੂੰ ਉਸ ਖਿਡਾਰੀ ਨੂੰ ਨਹੀਂ ਮਾਰਨਾ ਚਾਹੀਦਾ ਜਿਸਨੇ ਇਸਨੂੰ ਬਣਾਇਆ ਹੈ। ਇਹ ਤੁਲਨਾ ਕਰਕੇ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ bullet.parentID с player.id.
• ਇਕੋ ਸਮੇਂ ਕਈ ਖਿਡਾਰੀਆਂ ਨੂੰ ਮਾਰਨ ਦੇ ਅਤਿਅੰਤ ਕੇਸ ਵਿੱਚ ਪ੍ਰੋਜੈਕਟਾਈਲ ਨੂੰ ਸਿਰਫ ਇੱਕ ਵਾਰ ਮਾਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਅਸੀਂ ਆਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਾਂਗੇ break: ਇੱਕ ਵਾਰ ਜਦੋਂ ਇੱਕ ਪ੍ਰੋਜੈਕਟਾਈਲ ਨਾਲ ਟਕਰਾਉਣ ਵਾਲਾ ਖਿਡਾਰੀ ਮਿਲ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ ਖੋਜ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਾਂ ਅਤੇ ਅਗਲੇ ਪ੍ਰੋਜੈਕਟਾਈਲ 'ਤੇ ਚਲੇ ਜਾਂਦੇ ਹਾਂ।

ਅੰਤ

ਇਹ ਸਭ ਹੈ! ਅਸੀਂ .io ਵੈੱਬ ਗੇਮ ਬਣਾਉਣ ਲਈ ਤੁਹਾਨੂੰ ਜੋ ਵੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ, ਉਸ ਨੂੰ ਕਵਰ ਕੀਤਾ ਹੈ। ਅੱਗੇ ਕੀ ਹੈ? ਆਪਣੀ ਖੁਦ ਦੀ .io ਗੇਮ ਬਣਾਓ!

ਸਾਰਾ ਉਦਾਹਰਨ ਕੋਡ ਓਪਨ ਸੋਰਸ ਹੈ ਅਤੇ ਇਸ 'ਤੇ ਪੋਸਟ ਕੀਤਾ ਗਿਆ ਹੈ GitHub.

ਸਰੋਤ: www.habr.com