एक मल्टीप्लेयर .io वेब गेम बनाना

2015 में रिलीज़ हुई Agar.io एक नई शैली के जनक बने गेम्स .ioजो तब से लोकप्रियता में वृद्धि हुई है। मैंने व्यक्तिगत रूप से .io गेम्स की लोकप्रियता में वृद्धि का अनुभव किया है: पिछले तीन वर्षों में, मैंने ऐसा किया है इस शैली के दो गेम बनाए और बेचे।.

यदि आपने पहले कभी इन खेलों के बारे में नहीं सुना है, तो ये मुफ़्त मल्टीप्लेयर वेब गेम हैं जिन्हें खेलना आसान है (किसी खाते की आवश्यकता नहीं है)। वे आम तौर पर एक ही मैदान में कई विरोधी खिलाड़ियों का सामना करते हैं। अन्य प्रसिद्ध .io खेल: Slither.io и Diep.io.

इस पोस्ट में हम जानेंगे कि कैसे स्क्रैच से एक .io गेम बनाएं. इसके लिए केवल जावास्क्रिप्ट का ज्ञान ही काफी होगा: आपको सिंटैक्स जैसी चीजों को समझने की जरूरत है ES6, कीवर्ड this и वादे. भले ही जावास्क्रिप्ट के बारे में आपका ज्ञान सही न हो, फिर भी आप अधिकांश पोस्ट को समझ सकते हैं।

.io खेल उदाहरण

सीखने में सहायता के लिए, हम इसका उल्लेख करेंगे .io खेल उदाहरण. इसे खेलने का प्रयास करें!

खेल काफी सरल है: आप एक जहाज़ को ऐसे क्षेत्र में नियंत्रित करते हैं जहाँ अन्य खिलाड़ी होते हैं। आपका जहाज स्वचालित रूप से प्रक्षेप्य दागता है और आप अन्य खिलाड़ियों के प्रक्षेप्य से बचते हुए उन पर प्रहार करने का प्रयास करते हैं।

1. परियोजना का संक्षिप्त अवलोकन/संरचना

की सिफारिश स्रोत कोड डाउनलोड करें उदाहरण खेल ताकि आप मेरा अनुसरण कर सकें।

उदाहरण निम्नलिखित का उपयोग करता है:

• व्यक्त सबसे लोकप्रिय Node.js वेब फ्रेमवर्क है जो गेम के वेब सर्वर को प्रबंधित करता है।
• सॉकेट.आईओ - ब्राउज़र और सर्वर के बीच डेटा के आदान-प्रदान के लिए एक वेबसॉकेट लाइब्रेरी।
• 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. आइए हमारे वेबपैक कॉन्फ़िगरेशन पर एक नज़र डालें:

वेबपैक.कॉमन.जेएस:

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 जावास्क्रिप्ट (JS) क्लाइंट का प्रवेश बिंदु है। वेबपैक यहां से शुरू होगा और अन्य आयातित फ़ाइलों के लिए पुनरावर्ती रूप से खोज करेगा।
• हमारे वेबपैक बिल्ड का आउटपुट जेएस निर्देशिका में स्थित होगा dist/. मैं इस फाइल को हमारा कहूंगा जेएस पैकेज.
• हम प्रयोग करते हैं कोलाहल, और विशेष रूप से कॉन्फ़िगरेशन @babel/preset-env पुराने ब्राउज़रों के लिए हमारे जेएस कोड को ट्रांसपिलिंग करने के लिए।
• हम जेएस फाइलों द्वारा संदर्भित सभी सीएसएस को निकालने और उन्हें एक स्थान पर संयोजित करने के लिए एक प्लगइन का उपयोग कर रहे हैं। मैं उसे अपना कहूँगा सीएसएस पैकेज.

आपने अजीब पैकेज फ़ाइल नाम देखे होंगे '[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उत्पादन में तैनात करते समय पैकेज आकार को अनुकूलित करने के लिए।

स्थानीय सेटिंग

मैं प्रोजेक्ट को स्थानीय मशीन पर स्थापित करने की अनुशंसा करता हूं ताकि आप इस पोस्ट में सूचीबद्ध चरणों का पालन कर सकें। सेटअप सरल है: सबसे पहले, सिस्टम इंस्टॉल होना चाहिए आसंधि и NPM. आगे आपको करने की जरूरत है

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

और आप जाने के लिए तैयार हैं! विकास सर्वर प्रारंभ करने के लिए, बस चलाएँ

$ npm run develop

और वेब ब्राउजर पर जाएं स्थानीय होस्ट: 3000. कोड बदलते ही डेवलपमेंट सर्वर स्वचालित रूप से जेएस और सीएसएस पैकेजों का पुनर्निर्माण करेगा - सभी परिवर्तनों को देखने के लिए बस पेज को रीफ्रेश करें!

3. ग्राहक प्रवेश बिंदु

चलिए गेम कोड पर ही आते हैं। सबसे पहले हमें एक पेज चाहिए index.html, साइट पर जाने पर ब्राउज़र सबसे पहले इसे लोड करेगा। हमारा पेज काफी सरल होगा:

सूचकांक

एक उदाहरण .io गेम  खेल

इस कोड उदाहरण को स्पष्टता के लिए थोड़ा सरल बनाया गया है, और मैं कई अन्य पोस्ट उदाहरणों के साथ भी ऐसा ही करूंगा। पूरा कोड हमेशा यहां देखा जा सकता है Github.

अपने पास:

• HTML5 कैनवास तत्व (<canvas>) जिसका उपयोग हम गेम को रेंडर करने के लिए करेंगे।
• <link> हमारे सीएसएस पैकेज को जोड़ने के लिए।
• <script> हमारा जावास्क्रिप्ट पैकेज जोड़ने के लिए।
• उपयोगकर्ता नाम के साथ मुख्य मेनू <input> और प्ले बटन (<button>).

होम पेज लोड करने के बाद, ब्राउज़र प्रवेश बिंदु जेएस फ़ाइल से शुरू करके जावास्क्रिप्ट कोड निष्पादित करना शुरू कर देगा: 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. सीएसएस आयात (इसलिए वेबपैक उन्हें हमारे सीएसएस पैकेज में शामिल करना जानता है)।
3. Запуск connect() सर्वर के साथ कनेक्शन स्थापित करने और चलाने के लिए downloadAssets() गेम को रेंडर करने के लिए आवश्यक छवियों को डाउनलोड करने के लिए।
4. चरण 3 पूरा होने के बाद मुख्य मेनू प्रदर्शित होता है (playMenu).
5. "प्ले" बटन दबाने के लिए हैंडलर सेट करना। जब बटन दबाया जाता है, तो कोड गेम को इनिशियलाइज़ करता है और सर्वर को बताता है कि हम खेलने के लिए तैयार हैं।

हमारे क्लाइंट-सर्वर लॉजिक का मुख्य "मीट" उन फ़ाइलों में है जिन्हें फ़ाइल द्वारा आयात किया गया था index.js. अब हम उन सभी पर क्रम से विचार करेंगे।

4. ग्राहक डेटा का आदान-प्रदान

इस गेम में, हम सर्वर के साथ संचार करने के लिए एक प्रसिद्ध लाइब्रेरी का उपयोग करते हैं सॉकेट.आईओ. Socket.io को मूल समर्थन प्राप्त है WebSockets, जो दोतरफा संचार के लिए उपयुक्त हैं: हम सर्वर को संदेश भेज सकते हैं и सर्वर हमें उसी कनेक्शन पर संदेश भेज सकता है।

हमारे पास एक फ़ाइल होगी src/client/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. क्लाइंट रेंडरिंग

स्क्रीन पर चित्र प्रदर्शित करने का समय आ गया है!

...लेकिन इससे पहले कि हम ऐसा कर सकें, हमें इसके लिए आवश्यक सभी छवियों (संसाधनों) को डाउनलोड करना होगा। आइए एक संसाधन प्रबंधक लिखें:

संपत्ति.जे.एस

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, जो ऊपर सूचीबद्ध चार वस्तुओं को बिल्कुल प्रस्तुत करता है:

रेंडर.जे.एस

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 एफपीएस पर रेंडर लूप के सक्रियण को नियंत्रित करें।

व्यक्तिगत प्रतिपादन सहायक कार्यों का ठोस कार्यान्वयन (उदा. renderBullet()) उतने महत्वपूर्ण नहीं हैं, लेकिन यहां एक सरल उदाहरण दिया गया है:

रेंडर.जे.एस

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:

इनपुट.जे.एस

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. ग्राहक स्थिति

यह सेक्शन पोस्ट के पहले भाग में सबसे कठिन है। यदि आप इसे पहली बार पढ़ने पर समझ नहीं पाते हैं तो निराश न हों! आप इसे छोड़ भी सकते हैं और बाद में इस पर वापस आ सकते हैं।

क्लाइंट/सर्वर कोड को पूरा करने के लिए आवश्यक पहेली का अंतिम भाग है राज्य. क्लाइंट रेंडरिंग अनुभाग से कोड स्निपेट याद है?

रेंडर.जे.एस

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() केवल सबसे हाल ही में प्राप्त गेम अपडेट का डेटा सीधे लौटा सकता है।

अनुभवहीन-राज्य.जे.एस

let lastGameUpdate = null;

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

export function getCurrentState() {
  return lastGameUpdate;
}

अच्छा और स्पष्ट! लेकिन काश यह इतना आसान होता. इस कार्यान्वयन के समस्याग्रस्त होने के कारणों में से एक: यह रेंडरिंग फ़्रेम दर को सर्वर क्लॉक दर तक सीमित करता है.

फ्रेम रेट: फ़्रेम की संख्या (अर्थात कॉल render()) प्रति सेकंड, या एफपीएस। खेल आमतौर पर कम से कम 60 एफपीएस हासिल करने का प्रयास करते हैं।

दर पर टिक करें: वह आवृत्ति जिस पर सर्वर क्लाइंट को गेम अपडेट भेजता है। यह अक्सर फ़्रेम दर से कम होता है. हमारे गेम में, सर्वर 30 चक्र प्रति सेकंड की आवृत्ति पर चलता है।

यदि हम गेम के नवीनतम अपडेट को प्रस्तुत करते हैं, तो एफपीएस अनिवार्य रूप से कभी भी 30 से अधिक नहीं होगा, क्योंकि हमें सर्वर से कभी भी प्रति सेकंड 30 से अधिक अपडेट नहीं मिलते. भले ही हम कॉल करें render() प्रति सेकंड 60 बार, तो इनमें से आधी कॉलें बस उसी चीज़ को फिर से तैयार करेंगी, अनिवार्य रूप से कुछ भी नहीं करेंगी। सरल कार्यान्वयन के साथ एक और समस्या यह है कि यह देरी की संभावना. आदर्श इंटरनेट स्पीड के साथ, क्लाइंट को हर 33ms (30 प्रति सेकंड) पर एक गेम अपडेट प्राप्त होगा:

दुर्भाग्य से, कुछ भी पूर्ण नहीं है। एक अधिक यथार्थवादी चित्र होगा:

जब विलंबता की बात आती है तो अनुभवहीन कार्यान्वयन व्यावहारिक रूप से सबसे खराब स्थिति है। यदि कोई गेम अपडेट 50ms की देरी से प्राप्त होता है, तो ग्राहक स्टॉल अतिरिक्त 50 एमएस क्योंकि यह अभी भी पिछले अपडेट से गेम स्थिति प्रस्तुत कर रहा है। आप कल्पना कर सकते हैं कि यह खिलाड़ी के लिए कितना असुविधाजनक है: मनमाने ढंग से ब्रेक लगाने से खेल झटकेदार और अस्थिर लगेगा।

7.2 बेहतर ग्राहक स्थिति

हम सरल कार्यान्वयन में कुछ सुधार करेंगे। सबसे पहले, हम उपयोग करते हैं देरी प्रदान करना 100 एमएस के लिए. इसका मतलब यह है कि क्लाइंट की "वर्तमान" स्थिति सर्वर पर गेम की स्थिति से हमेशा 100ms पीछे रहेगी। उदाहरण के लिए, यदि सर्वर पर समय है 150, तो क्लाइंट उस स्थिति को प्रस्तुत करेगा जिसमें सर्वर उस समय था 50:

यह हमें अप्रत्याशित गेम अपडेट समय से बचने के लिए 100ms का बफर देता है:

इसके लिए भुगतान स्थायी होगा इनपुट अंतराल 100 एमएस के लिए. सहज गेमप्ले के लिए यह एक छोटा सा त्याग है - अधिकांश खिलाड़ियों (विशेष रूप से आकस्मिक खिलाड़ियों) को इस देरी का पता भी नहीं चलेगा। अप्रत्याशित विलंबता के साथ खेलने की तुलना में लोगों के लिए निरंतर 100ms विलंबता को समायोजित करना बहुत आसान है।

हम नामक एक अन्य तकनीक का भी उपयोग कर सकते हैं ग्राहक-पक्ष भविष्यवाणी, जो कथित विलंबता को कम करने का अच्छा काम करता है, लेकिन इस पोस्ट में इसे कवर नहीं किया जाएगा।

एक और सुधार जो हम उपयोग कर रहे हैं वह है रेखिक आंतरिक. रेंडरिंग लैग के कारण, हम आम तौर पर क्लाइंट में वर्तमान समय से कम से कम एक अपडेट आगे रखते हैं। जब बुलाया गया getCurrentState(), हम निष्पादित कर सकते हैं रेखिक आंतरिक क्लाइंट में वर्तमान समय के ठीक पहले और बाद में गेम अपडेट के बीच:

इससे फ़्रेम दर की समस्या हल हो जाती है: अब हम अपनी इच्छानुसार किसी भी फ़्रेम दर पर अद्वितीय फ़्रेम प्रस्तुत कर सकते हैं!

7.3 उन्नत ग्राहक स्थिति को लागू करना

में कार्यान्वयन उदाहरण src/client/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():

राज्य.जेएस भाग 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:

सर्वर.जेएस भाग 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}`);

याद रखें कि पहले भाग में हमने वेबपैक पर चर्चा की थी? यहीं पर हम अपने वेबपैक कॉन्फ़िगरेशन का उपयोग करेंगे। हम उनका दो तरह से उपयोग करेंगे:

• उपयोग करने के लिए वेबपैक-डेव-मिडलवेयर हमारे विकास पैकेजों को स्वचालित रूप से पुनर्निर्माण करने के लिए, या
• फ़ोल्डर को स्थिर रूप से स्थानांतरित करें dist/, जिसमें वेबपैक उत्पादन निर्माण के बाद हमारी फ़ाइलें लिखेगा।

एक और महत्वपूर्ण कार्य 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);
});

सर्वर से सॉकेट.आईओ कनेक्शन सफलतापूर्वक स्थापित करने के बाद, हम नए सॉकेट के लिए इवेंट हैंडलर सेट करते हैं। इवेंट हैंडलर सिंगलटन ऑब्जेक्ट को सौंपकर क्लाइंट से प्राप्त संदेशों को संभालते हैं game:

सर्वर.जेएस भाग 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 सर्वर साइड पर सबसे महत्वपूर्ण तर्क शामिल है। इसके दो मुख्य कार्य हैं: खिलाड़ी प्रबंधन и खेल अनुकरण.

आइए पहले कार्य, खिलाड़ी प्रबंधन से शुरुआत करें।

गेम.जेएस भाग 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 उनका सॉकेट.आईओ सॉकेट (यदि आप भ्रमित हो जाते हैं, तो वापस जाएं server.js). Socket.io स्वयं प्रत्येक सॉकेट को एक अद्वितीय निर्दिष्ट करता है idइसलिए हमें इसके बारे में चिंता करने की ज़रूरत नहीं है। मैं उसे फोन करुंगा प्लेयर आईडी.

इसे ध्यान में रखते हुए, आइए एक कक्षा में इंस्टेंस वेरिएबल्स का पता लगाएं Game:

• sockets एक ऑब्जेक्ट है जो प्लेयर आईडी को प्लेयर से जुड़े सॉकेट से बांधता है। यह हमें निरंतर समय में उनके प्लेयर आईडी द्वारा सॉकेट तक पहुंचने की अनुमति देता है।
• players एक ऑब्जेक्ट है जो प्लेयर आईडी को कोड>प्लेयर ऑब्जेक्ट से बांधता है

bullets वस्तुओं की एक सरणी है Bullet, जिसका कोई निश्चित क्रम नहीं है।
lastUpdateTime यह उस समय का टाइमस्टैम्प है जब गेम को आखिरी बार अपडेट किया गया था। हम शीघ्र ही देखेंगे कि इसका उपयोग कैसे किया जाता है।
shouldSendUpdate एक सहायक चर है. हम शीघ्र ही इसका उपयोग भी देखेंगे।
तरीकों addPlayer(), removePlayer() и handleInput() समझाने की जरूरत नहीं, इनका उपयोग किया जाता है server.js. यदि आपको अपनी याददाश्त ताज़ा करने की आवश्यकता है, तो थोड़ा ऊपर जाएँ।

अंतिम पंक्ति constructor() शुरूआत अद्यतन चक्र गेम (60 अपडेट/सेकेंड की आवृत्ति के साथ):

गेम.जेएस भाग 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():

गेम.जेएस भाग 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:

ऑब्जेक्ट.जे.एस

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:

प्लेयर.जे.एस

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:

गेम.जे.एस

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.

टकराव का पता लगाने का हमारा कार्यान्वयन इस प्रकार है:

टकराव.जे.एस

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