मल्टीप्लेअर .io वेब गेम तयार करणे

2015 मध्ये रिलीज झाला अगर.आयओ नवीन शैलीचा पूर्वज बनला खेळ .ioज्याची तेव्हापासून लोकप्रियता वाढली आहे. मी वैयक्तिकरित्या .io गेमच्या लोकप्रियतेत वाढ अनुभवली आहे: गेल्या तीन वर्षांत, माझ्याकडे आहे या शैलीचे दोन गेम तयार केले आणि विकले..

जर तुम्ही या खेळांबद्दल याआधी कधीही ऐकले नसेल, तर हे विनामूल्य मल्टीप्लेअर वेब गेम आहेत जे खेळण्यास सोपे आहेत (खात्याची आवश्यकता नाही). ते सहसा एकाच मैदानात अनेक विरोधी खेळाडूंना उभे करतात. इतर प्रसिद्ध .io खेळ: Slither.io и Diep.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 खेळ  खेळा

हे कोड उदाहरण स्पष्टतेसाठी थोडेसे सोपे केले आहे आणि मी इतर अनेक पोस्ट उदाहरणांसह तेच करेन. पूर्ण कोड नेहमी येथे पाहिला जाऊ शकतो जिथूब.

आमच्याकडे आहे:

• HTML5 कॅनव्हास घटक (<canvas>) ज्याचा वापर आम्ही गेम रेंडर करण्यासाठी करू.
• <link> आमचे CSS पॅकेज जोडण्यासाठी.
• <script> आमचे Javascript पॅकेज जोडण्यासाठी.
• वापरकर्तानावासह मुख्य मेनू <input> आणि प्ले बटण (<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. "प्ले" बटण दाबण्यासाठी हँडलर सेट करत आहे. जेव्हा बटण दाबले जाते, तेव्हा कोड गेम सुरू करतो आणि सर्व्हरला सांगतो की आम्ही खेळण्यासाठी तयार आहोत.

आमच्या क्लायंट-सर्व्हर लॉजिकचे मुख्य "मांस" फाइलद्वारे आयात केलेल्या फाइल्समध्ये आहे 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 च्या वर जाणार नाही, कारण आम्हाला सर्व्हरकडून प्रति सेकंद ३० पेक्षा जास्त अपडेट्स मिळत नाहीत. जरी आम्ही फोन केला 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 भाग १

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 भाग १

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 वर जिथूब.

भाग 2. बॅकएंड सर्व्हर

या भागात, आम्ही Node.js बॅकएंडवर एक नजर टाकू जो आमचे नियंत्रण करतो io गेमचे उदाहरण.

1. सर्व्हर एंट्री पॉइंट

वेब सर्व्हर व्यवस्थापित करण्यासाठी, आम्ही Node.js नावाच्या लोकप्रिय वेब फ्रेमवर्कचा वापर करू व्यक्त. हे आमच्या सर्व्हर एंट्री पॉइंट फाइलद्वारे कॉन्फिगर केले जाईल src/server/server.js:

server.js भाग १

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 भाग १

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 भाग १

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 भाग १

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 एक ऑब्जेक्ट आहे जो प्लेअर आयडीला प्लेअरशी संबंधित सॉकेटशी जोडतो. हे आम्हाला त्यांच्या प्लेयर आयडीद्वारे सॉकेटमध्ये सतत प्रवेश करण्याची अनुमती देते.
• players एक ऑब्जेक्ट आहे जो प्लेयर आयडीला कोड>प्लेअर ऑब्जेक्टशी बांधतो

bullets वस्तूंची एक श्रेणी आहे Bullet, ज्याचा कोणताही निश्चित क्रम नाही.
lastUpdateTime हा गेम अद्ययावत केलेल्या शेवटच्या वेळेचा टाइमस्टॅम्प आहे. ते कसे वापरले जाते ते आपण लवकरच पाहू.
shouldSendUpdate एक सहायक चल आहे. त्याचा उपयोगही आपण लवकरच पाहू.
पद्धती addPlayer(), removePlayer() и handleInput() स्पष्ट करण्याची गरज नाही, ते वापरले जातात server.js. तुम्हाला तुमची मेमरी रीफ्रेश करायची असल्यास, थोडे वर जा.

शेवटची ओळ constructor() सुरू होते अपडेट सायकल खेळ (60 अद्यतने / s च्या वारंवारतेसह):

game.js भाग १

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 भाग १

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 गेम तयार करा!

सर्व नमुना कोड मुक्त स्रोत आहे आणि वर पोस्ट केला आहे जिथूब.

स्त्रोत: www.habr.com