io विधामा मल्टिप्लेयर वेब गेम सिर्जना गर्दै

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

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

यस पोष्टमा हामी कसरी पत्ता लगाउनेछौं स्क्र्याचबाट io खेल सिर्जना गर्नुहोस्। यो गर्नको लागि, जाभास्क्रिप्टको मात्र ज्ञान पर्याप्त हुनेछ: तपाईंले सिन्ट्याक्स जस्ता चीजहरू बुझ्न आवश्यक छ ES6, कीवर्ड this и प्रतिज्ञाहरू। यदि तपाइँ जाभास्क्रिप्टलाई पूर्ण रूपमा थाहा छैन भने, तपाइँ अझै पनि धेरै पोस्ट बुझ्न सक्नुहुन्छ।

io खेलको उदाहरण

प्रशिक्षण सहयोगको लागि हामी सन्दर्भ गर्नेछौं उदाहरण खेल .io। यसलाई खेल्न प्रयास गर्नुहोस्!

खेल एकदम सरल छ: तपाईं अन्य खेलाडीहरूसँग एरेनामा जहाज नियन्त्रण गर्नुहुन्छ। तपाईंको जहाजले स्वचालित रूपमा प्रोजेक्टाइलहरू फायर गर्छ र तपाईंले अन्य खेलाडीहरूलाई तिनीहरूको प्रोजेक्टाइलहरू बेवास्ता गर्दा हिट गर्ने प्रयास गर्नुहुन्छ।

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

म सिफारिश गर्छु स्रोत कोड डाउनलोड गर्नुहोस् उदाहरण खेल ताकि तपाईं मलाई पछ्याउन सक्नुहुन्छ।

उदाहरण निम्न प्रयोग गर्दछ:

• व्यक्त खेलको वेब सर्भर व्यवस्थापन गर्ने Node.js को लागि सबैभन्दा लोकप्रिय वेब फ्रेमवर्क हो।
• socket.io - ब्राउजर र सर्भर बीच डाटा आदान प्रदानको लागि वेबसकेट पुस्तकालय।
• वेबप्याक - मोड्युल प्रबन्धक। तपाइँ किन Webpack प्रयोग गर्ने बारे पढ्न सक्नुहुन्छ यहाँ.

यो परियोजना निर्देशिका संरचना जस्तो देखिन्छ:

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 फाइलबाट सुरु हुन्छ: 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 पटक, त्यसपछि यी कलहरू मध्ये आधाले एउटै कुरालाई पुन: चित्रित गर्नेछ, अनिवार्य रूपमा केहि गर्दैन। सरल कार्यान्वयनको साथ अर्को समस्या यो हो ढिलाइको विषय हो। आदर्श इन्टरनेट गतिमा, ग्राहकले ठ्याक्कै हरेक 33 ms (30 प्रति सेकेन्ड) खेल अपडेट प्राप्त गर्नेछ:

दुर्भाग्यवश, केहि पनि पूर्ण छैन। अझ यथार्थवादी तस्बिर हुनेछ:

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

7.2 सुधारिएको ग्राहक स्थिति

हामी सरल कार्यान्वयनमा केही सुधार गर्नेछौं। पहिले, हामी प्रयोग गर्छौं प्रतिपादन ढिलाइ 100 ms द्वारा। यसको मतलब क्लाइन्टको "वर्तमान" स्थिति सधैं सर्भरमा खेल स्थिति भन्दा 100ms पछि हुनेछ। उदाहरणका लागि, यदि सर्भर समय हो 150, तब क्लाइन्टले सर्भर त्यस समयमा भएको अवस्थालाई रेन्डर गर्नेछ 50:

यसले हामीलाई खेल अद्यावधिकहरूको अप्रत्याशित समय बाँच्नको लागि 100ms बफर दिन्छ:

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

हामी अर्को प्रविधि प्रयोग गर्न सक्छौं "ग्राहक पक्ष पूर्वानुमान", जसले कथित विलम्बता कम गर्न राम्रो काम गर्दछ, तर यस पोस्टमा छलफल गरिने छैन।

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

यसले फ्रेम दर समस्या समाधान गर्छ: हामी अब हामीलाई चाहिने कुनै पनि फ्रेम दरमा अद्वितीय फ्रेमहरू प्रस्तुत गर्न सक्छौं!

7.3 सुधारिएको ग्राहक अवस्था कार्यान्वयन गर्दै

मा उदाहरण कार्यान्वयन src/client/state.js रेन्डरिङ ढिलाइ र रैखिक प्रक्षेपण दुवै प्रयोग गर्दछ, तर यो लामो समय सम्म रहँदैन। कोडलाई दुई भागमा विभाजन गरौं। यहाँ पहिलो छ:

state.js, भाग १

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. हामीसँग हालको रेन्डर समय अघि र पछि दुबै अपडेट छ, त्यसैले हामी सक्छौं interpolate!

सबै बाँकी छ state.js सरल (तर बोरिंग) गणितको रेखीय प्रक्षेपणको कार्यान्वयन हो। यदि तपाईं यसलाई आफैं अन्वेषण गर्न चाहनुहुन्छ भने, त्यसपछि खोल्नुहोस् state.js मा Github.

भाग २। ब्याकएन्ड सर्भर

यस भागमा हामी 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-middleware हाम्रो विकास प्याकेजहरू स्वचालित रूपमा पुनर्निर्माण गर्न, वा
• स्थिर रूपमा फोल्डर स्थानान्तरण गर्नुहोस् 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 एक वस्तु हो जसले खेलाडी ID लाई खेलाडीसँग सम्बन्धित सकेटमा बाँध्छ। यसले हामीलाई समयसँगै तिनीहरूको प्लेयर आईडीहरूद्वारा सकेटहरू पहुँच गर्न अनुमति दिन्छ।
• players एउटा वस्तु हो जसले प्लेयर ID लाई कोड>प्लेयर वस्तुमा बाँध्छ

bullets वस्तुहरूको एरे हो Bullet, एक विशेष आदेश छैन।
lastUpdateTime - यो अन्तिम खेल अपडेटको टाइमस्ट्याम्प हो। हामी यसलाई चाँडै कसरी प्रयोग गरिन्छ हेर्नेछौं।
shouldSendUpdate एक सहायक चर हो। हामी चाँडै यसको प्रयोग पनि देख्नेछौं।
विधिहरू addPlayer(), removePlayer() и handleInput() व्याख्या गर्न आवश्यक छैन, तिनीहरू प्रयोग गरिन्छ server.js। यदि तपाईंलाई रिफ्रेसर चाहिन्छ भने, अलि माथि जानुहोस्।

अन्तिम लाइन constructor() सुरु हुन्छ अपडेट चक्र खेलहरू (६० अपडेट/सेकेन्डको फ्रिक्वेन्सीको साथ):

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()), र त्यसपछि array बाट प्रोजेक्टाइल हटाउनुहोस् 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:

bullet.js

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

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

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

कार्यान्वयन Bullet धेरै छोटो! मा थपेका छौं Object केवल निम्न विस्तारहरू:

• प्याकेज प्रयोग गर्दै छोटो अनियमित पुस्ताको लागि id प्रक्षेपण।
• फिल्ड थप्दै parentID, ताकि तपाईं यो प्रोजेक्टाइल सिर्जना गर्ने खेलाडी ट्र्याक गर्न सक्नुहुन्छ।
• फिर्ता मान थप्दै update(), जुन बराबर छ true, यदि प्रक्षेपण क्षेत्र बाहिर छ भने (हामीले अन्तिम खण्डमा यस बारे कुरा गर्यौं?)।

तिर लागौं Player:

player.js

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

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

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

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

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

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

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

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

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

खेलाडीहरू प्रोजेक्टाइलहरू भन्दा बढी जटिल हुन्छन्, त्यसैले यो वर्गले केही थप क्षेत्रहरू भण्डार गर्नुपर्छ। उनको विधि update() थप काम गर्दछ, विशेष गरी नयाँ सिर्जना गरिएको प्रोजेक्टाइल फिर्ता गर्दै यदि त्यहाँ कुनै पनि बाँकी छैन fireCooldown (हामीले अघिल्लो खण्डमा यस बारे कुरा गरेका थियौं?) यसले पनि विधि विस्तार गर्दछ serializeForUpdate(), किनकि हामीले खेल अपडेटमा खेलाडीका लागि अतिरिक्त क्षेत्रहरू समावेश गर्न आवश्यक छ।

आधार वर्गको उपलब्धता Object - कोड पुनरावृत्तिबाट बच्नको लागि महत्त्वपूर्ण कदम। उदाहरणका लागि, कक्षा बिना Object प्रत्येक खेल वस्तु समान कार्यान्वयन हुनुपर्छ distanceTo(), र धेरै फाइलहरूमा यी सबै कार्यान्वयनहरू प्रतिलिपि टाँस्नु एक दुःस्वप्न हुनेछ। यो विशेष गरी ठूला परियोजनाहरूको लागि महत्त्वपूर्ण हुन्छ, जब विस्तार को संख्या Object कक्षाहरू बढ्दै छन्।

4. टक्कर पत्ता लगाउने

प्रक्षेपणहरूले खेलाडीहरूलाई हिर्काउँदा हामीलाई पहिचान गर्न मात्र बाँकी छ! विधिबाट यो कोड स्निपेट सम्झनुहोस् update() कक्षामा Game:

game.js

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

class Game {
  // ...

  update() {
    // ...

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

    // ...
  }
}

हामीले पद्धति लागू गर्नुपर्छ applyCollisions(), जसले खेलाडीहरूलाई हिट गर्ने सबै प्रोजेक्टाइलहरू फर्काउँछ। सौभाग्य देखि, यो गर्न गाह्रो छैन किनभने

• सबै टक्कर गर्ने वस्तुहरू सर्कलहरू हुन्, र यो टक्कर पत्ता लगाउने सबैभन्दा सरल आकार हो।
• हामीसँग पहिले नै विधि छ distanceTo(), जुन हामीले अघिल्लो खण्डमा कक्षामा लागू गर्यौं Object.

टक्कर पत्ता लगाउने हाम्रो कार्यान्वयन यस्तो देखिन्छ:

collisions.js

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

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

यो साधारण टक्कर पत्ता लगाउने तथ्यमा आधारित छ यदि तिनीहरूको केन्द्रहरू बीचको दूरी तिनीहरूको त्रिज्याको योगफलभन्दा कम छ भने दुईवटा वृत्तहरू ठोक्किन्छन्। यहाँ एउटा केस छ जहाँ दुई वृत्तहरूका केन्द्रहरू बीचको दूरी तिनीहरूको त्रिज्याको योगफल बराबर छ:

यहाँ तपाईंले केही थप पक्षहरूमा ध्यान दिन आवश्यक छ:

• प्रोजेक्टाइलले यसलाई सिर्जना गर्ने खेलाडीलाई हिट गर्नु हुँदैन। यो तुलना गरेर हासिल गर्न सकिन्छ bullet.parentID с player.id.
• एकै समयमा धेरै खेलाडीहरूलाई हिट गर्ने चरम अवस्थामा प्रोजेक्टाइलले एक पटक मात्र हिट गर्नुपर्छ। हामी अपरेटर प्रयोग गरेर यो समस्या समाधान गर्नेछौं break: एक पटक प्रोजेक्टाइलसँग टक्कर भएको खेलाडी फेला परेपछि, हामी खोजी गर्न रोक्छौं र अर्को प्रक्षेपणमा जान्छौं।

Конец

यति नै! हामीले .io वेब गेम सिर्जना गर्नका लागि तपाईंले जान्नुपर्ने सबै कुराहरू समावेश गरेका छौं। अब के? आफ्नो आफ्नै .io खेल बनाउनुहोस्!

सबै उदाहरण कोड खुला स्रोत हो र पोस्ट गरिएको छ Github.

स्रोत: www.habr.com