મલ્ટિપ્લેયર .io વેબ ગેમ બનાવવી

2015 માં રિલીઝ થઈ અગર.યો નવી શૈલીના પૂર્વજ બન્યા રમતો .io, જેની લોકપ્રિયતા ત્યારથી ખૂબ વધી છે. મેં મારી જાતે .io ગેમ્સની લોકપ્રિયતામાં વધારો અનુભવ્યો છે: છેલ્લા ત્રણ વર્ષમાં, I આ શૈલીની બે રમતો બનાવી અને વેચી..

જો તમે આ ગેમ્સ વિશે પહેલાં ક્યારેય સાંભળ્યું ન હોય, તો આ મફત મલ્ટિપ્લેયર વેબ ગેમ્સ છે જે રમવા માટે સરળ છે (કોઈ એકાઉન્ટ જરૂરી નથી). તેઓ સામાન્ય રીતે એક જ મેદાનમાં ઘણા વિરોધી ખેલાડીઓનો સામનો કરે છે. અન્ય પ્રખ્યાત .io રમતો: સ્લિટર.ઓ и ડાઇપ.ઓ.

આ પોસ્ટમાં, અમે કેવી રીતે અન્વેષણ કરીશું શરૂઆતથી .io ગેમ બનાવો. આ માટે, માત્ર Javascriptનું જ્ઞાન પૂરતું હશે: તમારે સિન્ટેક્સ જેવી બાબતોને સમજવાની જરૂર છે 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/. હું આ ફાઇલને અમારી કહીશ js પેકેજ.
• અમે ઉપયોગ કરીએ છીએ બેબલ, અને ખાસ કરીને રૂપરેખાંકન @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> અને પ્લે બટન (<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 પેકેજમાં સામેલ કરવાનું જાણે છે).
3. લોંચ connect() સર્વર સાથે જોડાણ સ્થાપિત કરવા અને ચલાવવા માટે downloadAssets() રમત રેન્ડર કરવા માટે જરૂરી છબીઓ ડાઉનલોડ કરવા માટે.
4. સ્ટેજ 3 પૂર્ણ થયા પછી મુખ્ય મેનુ પ્રદર્શિત થાય છે (playMenu).
5. "પ્લે" બટન દબાવવા માટે હેન્ડલર સેટ કરી રહ્યું છે. જ્યારે બટન દબાવવામાં આવે છે, ત્યારે કોડ રમત શરૂ કરે છે અને સર્વરને કહે છે કે અમે રમવા માટે તૈયાર છીએ.

અમારા ક્લાયંટ-સર્વર લોજિકનું મુખ્ય "માંસ" તે ફાઇલોમાં છે જે ફાઇલ દ્વારા આયાત કરવામાં આવી હતી. 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 વખત, પછી આમાંથી અડધા કોલ્સ એ જ વસ્તુને ફરીથી દોરશે, અનિવાર્યપણે કંઈ નહીં કરે. નિષ્કપટ અમલીકરણ સાથે બીજી સમસ્યા એ છે કે તે વિલંબ માટે સંવેદનશીલ. આદર્શ ઈન્ટરનેટ સ્પીડ સાથે, ક્લાયંટને દર 33ms (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/, જેમાં Webpack પ્રોડક્શન બિલ્ડ પછી અમારી ફાઇલો લખશે.

બીજું મહત્વનું કાર્ય 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 ને પ્લેયર સાથે સંકળાયેલ સોકેટ સાથે જોડે છે. તે અમને સતત સમયમાં તેમના પ્લેયર ID દ્વારા સોકેટ્સ ઍક્સેસ કરવાની મંજૂરી આપે છે.
• players એક ઑબ્જેક્ટ છે જે પ્લેયર ID ને કોડ>પ્લેયર ઑબ્જેક્ટ સાથે જોડે છે

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 ઘડિયાળો/સેકંડ છે (અમે પહેલા ભાગમાં ઘડિયાળના દરો વિશે વાત કરી હતી).

શા માટે ફક્ત રમત અપડેટ્સ મોકલો સમય દ્વારા ? ચેનલ સાચવવા માટે. સેકન્ડ દીઠ 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:

બુલેટ.જેએસ

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