🥇.io വിഭാഗത്തിൽ ഒരു മൾട്ടിപ്ലെയർ വെബ് ഗെയിം സൃഷ്ടിക്കുന്നു

2015-ൽ പുറത്തിറങ്ങി അഗർ.ഓയോ ഒരു പുതിയ വിഭാഗത്തിന്റെ ഉപജ്ഞാതാവായി games.io, അതിന്റെ ജനപ്രീതി അന്നുമുതൽ വളരെയധികം വളർന്നു. .io ഗെയിമുകളുടെ ജനപ്രീതിയുടെ വർദ്ധനവ് ഞാൻ അനുഭവിച്ചിട്ടുണ്ട്: കഴിഞ്ഞ മൂന്ന് വർഷമായി, ഐ ഈ വിഭാഗത്തിൽ രണ്ട് ഗെയിമുകൾ സൃഷ്ടിക്കുകയും വിൽക്കുകയും ചെയ്തു..

ഈ ഗെയിമുകളെക്കുറിച്ച് നിങ്ങൾ മുമ്പ് കേട്ടിട്ടില്ലെങ്കിൽ, അവ സൗജന്യ മൾട്ടിപ്ലെയർ വെബ് ഗെയിമുകളാണ്, അത് കളിക്കാൻ എളുപ്പമാണ് (അക്കൗണ്ട് ആവശ്യമില്ല). അവർ സാധാരണയായി നിരവധി എതിർ കളിക്കാരെ ഒരു വേദിയിൽ മത്സരിപ്പിക്കുന്നു. മറ്റ് പ്രശസ്തമായ .io ഗെയിമുകൾ: Slither.io и Diep.io.

എങ്ങനെയെന്ന് ഈ പോസ്റ്റിൽ നമ്മൾ കണ്ടെത്തും ആദ്യം മുതൽ ഒരു .io ഗെയിം സൃഷ്ടിക്കുക. ഇത് ചെയ്യുന്നതിന്, ജാവാസ്ക്രിപ്റ്റിനെക്കുറിച്ചുള്ള അറിവ് മാത്രം മതിയാകും: വാക്യഘടന പോലുള്ള കാര്യങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട് ES6, കീവേഡ് this и വാഗ്ദാനങ്ങൾ. നിങ്ങൾക്ക് ജാവാസ്ക്രിപ്റ്റ് കൃത്യമായി അറിയില്ലെങ്കിലും, പോസ്റ്റിന്റെ ഭൂരിഭാഗവും നിങ്ങൾക്ക് ഇപ്പോഴും മനസ്സിലാക്കാൻ കഴിയും.

ഒരു .io ഗെയിമിന്റെ ഉദാഹരണം

പരിശീലന സഹായത്തിനായി ഞങ്ങൾ റഫർ ചെയ്യും ഉദാഹരണം ഗെയിം .io. ഇത് കളിക്കാൻ ശ്രമിക്കുക!

ഗെയിം വളരെ ലളിതമാണ്: മറ്റ് കളിക്കാർക്കൊപ്പം ഒരു അറീനയിൽ നിങ്ങൾ ഒരു കപ്പൽ നിയന്ത്രിക്കുന്നു. നിങ്ങളുടെ കപ്പൽ സ്വപ്രേരിതമായി പ്രൊജക്‌ടൈലുകൾ വെടിവയ്ക്കുകയും മറ്റ് കളിക്കാരെ അവരുടെ പ്രൊജക്‌ടൈലുകൾ ഒഴിവാക്കിക്കൊണ്ട് നിങ്ങൾ അടിക്കാൻ ശ്രമിക്കുകയും ചെയ്യുന്നു.

1. സംക്ഷിപ്ത അവലോകനം/പദ്ധതി ഘടന

ഞാൻ ശുപാർശചെയ്യുന്നു സോഴ്സ് കോഡ് ഡൗൺലോഡ് ചെയ്യുക ഉദാഹരണ ഗെയിം അതിനാൽ നിങ്ങൾക്ക് എന്നെ പിന്തുടരാനാകും.

ഉദാഹരണം ഇനിപ്പറയുന്നവ ഉപയോഗിക്കുന്നു:

പ്രകടിപ്പിക്കുക ഗെയിമിന്റെ വെബ് സെർവർ നിയന്ത്രിക്കുന്ന Node.js-നുള്ള ഏറ്റവും ജനപ്രിയ വെബ് ചട്ടക്കൂടാണ്.
socket.io — ബ്രൗസറിനും സെർവറിനുമിടയിൽ ഡാറ്റ കൈമാറ്റം ചെയ്യുന്നതിനുള്ള വെബ്‌സോക്കറ്റ് ലൈബ്രറി.
വെബ്‌പായ്ക്ക് - മൊഡ്യൂൾ മാനേജർ. എന്തുകൊണ്ട് വെബ്‌പാക്ക് ഉപയോഗിക്കണം എന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് വായിക്കാം ഇവിടെ.

പ്രോജക്റ്റ് ഡയറക്ടറി ഘടന ഇങ്ങനെയാണ്:


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

പൊതു/

എല്ലാം ഫോൾഡറിൽ ഉണ്ട് public/ സെർവർ സ്ഥിരമായി കൈമാറും. IN public/assets/ ഞങ്ങളുടെ പ്രോജക്റ്റ് ഉപയോഗിക്കുന്ന ചിത്രങ്ങൾ അടങ്ങിയിരിക്കുന്നു.

src /

എല്ലാ സോഴ്‌സ് കോഡും ഫോൾഡറിലാണ് src/. ശീർഷകങ്ങൾ client/ и server/ സ്വയം സംസാരിക്കുകയും shared/ ക്ലയന്റും സെർവറും ഇറക്കുമതി ചെയ്ത ഒരു കോൺസ്റ്റന്റ്സ് ഫയൽ അടങ്ങിയിരിക്കുന്നു.

2. അസംബ്ലികൾ/പദ്ധതി പാരാമീറ്ററുകൾ

മുകളിൽ പറഞ്ഞതുപോലെ, പ്രോജക്റ്റ് നിർമ്മിക്കാൻ ഞങ്ങൾ ഒരു മൊഡ്യൂൾ മാനേജർ ഉപയോഗിക്കുന്നു വെബ്‌പായ്ക്ക്. നമുക്ക് നമ്മുടെ വെബ്‌പാക്ക് കോൺഫിഗറേഷൻ നോക്കാം:

webpack.common.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    game: './src/client/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/client/html/index.html',
    }),
  ],
};

ഇവിടെ ഏറ്റവും പ്രധാനപ്പെട്ട വരികൾ ഇനിപ്പറയുന്നവയാണ്:

src/client/index.js Javascript (JS) ക്ലയന്റിൻറെ എൻട്രി പോയിന്റ് ആണ്. Webpack ഇവിടെ നിന്ന് ആരംഭിക്കുകയും മറ്റ് ഇറക്കുമതി ചെയ്ത ഫയലുകൾക്കായി ആവർത്തിച്ച് നോക്കുകയും ചെയ്യും.
ഞങ്ങളുടെ വെബ്‌പാക്ക് ബിൽഡിന്റെ ഔട്ട്‌പുട്ട് 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, ഉൽപ്പാദനത്തിലേക്ക് വിന്യസിക്കുമ്പോൾ പാക്കേജ് വലുപ്പങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ.

പ്രാദേശിക സജ്ജീകരണം

നിങ്ങളുടെ ലോക്കൽ മെഷീനിൽ പ്രോജക്റ്റ് ഇൻസ്റ്റാൾ ചെയ്യാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു, അതുവഴി നിങ്ങൾക്ക് ഈ പോസ്റ്റിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന ഘട്ടങ്ങൾ പിന്തുടരാനാകും. സജ്ജീകരണം ലളിതമാണ്: ആദ്യം, സിസ്റ്റം ഉണ്ടായിരിക്കണം നോഡ് и NPM. അടുത്തതായി നിങ്ങൾ ചെയ്യേണ്ടത്

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

നിങ്ങൾ പോകാൻ തയ്യാറാണ്! വികസന സെർവർ ആരംഭിക്കാൻ, പ്രവർത്തിപ്പിക്കുക

$ npm run develop

നിങ്ങളുടെ വെബ് ബ്രൗസറിലേക്ക് പോകുക localhost: 3000. കോഡ് മാറ്റങ്ങൾ സംഭവിക്കുമ്പോൾ ഡെവലപ്‌മെന്റ് സെർവർ JS, CSS പാക്കേജുകൾ സ്വയമേവ പുനർനിർമ്മിക്കും - എല്ലാ മാറ്റങ്ങളും കാണാൻ പേജ് പുതുക്കിയാൽ മതി!

3. ക്ലയന്റ് എൻട്രി പോയിന്റുകൾ

ഗെയിം കോഡിലേക്ക് തന്നെ ഇറങ്ങാം. ആദ്യം നമുക്ക് ഒരു പേജ് വേണം index.html, നിങ്ങൾ സൈറ്റ് സന്ദർശിക്കുമ്പോൾ, ബ്രൗസർ ആദ്യം അത് ലോഡ് ചെയ്യും. ഞങ്ങളുടെ പേജ് വളരെ ലളിതമായിരിക്കും:

Index.html

ഒരു ഉദാഹരണം .io ഗെയിം  കളിക്കുക

ഈ കോഡ് ഉദാഹരണം വ്യക്തതയ്ക്കായി ചെറുതായി ലളിതമാക്കിയിരിക്കുന്നു, കൂടാതെ പോസ്റ്റിലെ മറ്റ് പല ഉദാഹരണങ്ങളിലും ഞാൻ ഇത് ചെയ്യും. നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും മുഴുവൻ കോഡും നോക്കാം സാമൂഹികം.

നമുക്ക് ഉണ്ട്:

HTML5 ക്യാൻവാസ് ഘടകം (<canvas>), ഗെയിം റെൻഡർ ചെയ്യാൻ ഞങ്ങൾ ഉപയോഗിക്കും.
<link> ഞങ്ങളുടെ CSS പാക്കേജ് ചേർക്കാൻ.
<script> ഞങ്ങളുടെ Javascript പാക്കേജ് ചേർക്കാൻ.
ഉപയോക്തൃനാമമുള്ള പ്രധാന മെനു <input> ഒപ്പം "പ്ലേ" ബട്ടണും (<button>).

ഹോം പേജ് ലോഡ് ചെയ്‌തുകഴിഞ്ഞാൽ, എൻട്രി പോയിന്റ് JS ഫയലിൽ തുടങ്ങി ബ്രൗസർ Javascript കോഡ് എക്‌സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങും: src/client/index.js.

index.js

import { connect, play } from './networking';
import { startRendering, stopRendering } from './render';
import { startCapturingInput, stopCapturingInput } from './input';
import { downloadAssets } from './assets';
import { initState } from './state';
import { setLeaderboardHidden } from './leaderboard';

import './css/main.css';

const playMenu = document.getElementById('play-menu');
const playButton = document.getElementById('play-button');
const usernameInput = document.getElementById('username-input');

Promise.all([
  connect(),
  downloadAssets(),
]).then(() => {
  playMenu.classList.remove('hidden');
  usernameInput.focus();
  playButton.onclick = () => {
    // Play!
    play(usernameInput.value);
    playMenu.classList.add('hidden');
    initState();
    startCapturingInput();
    startRendering();
    setLeaderboardHidden(false);
  };
});

ഇത് സങ്കീർണ്ണമാണെന്ന് തോന്നുമെങ്കിലും യഥാർത്ഥത്തിൽ ഇവിടെ കാര്യമായൊന്നും നടക്കുന്നില്ല:

മറ്റ് നിരവധി JS ഫയലുകൾ ഇറക്കുമതി ചെയ്യുക.
CSS ഇറക്കുമതി ചെയ്യുക (അതിനാൽ വെബ്‌പാക്കിന് അവ ഞങ്ങളുടെ CSS പാക്കേജിൽ ഉൾപ്പെടുത്താൻ അറിയാം).
സമാരംഭിക്കുക connect() സെർവറിലേക്ക് ഒരു കണക്ഷൻ സ്ഥാപിക്കാനും ആരംഭിക്കാനും downloadAssets() ഗെയിം റെൻഡർ ചെയ്യുന്നതിന് ആവശ്യമായ ചിത്രങ്ങൾ ഡൗൺലോഡ് ചെയ്യാൻ.
ഘട്ടം 3 പൂർത്തിയാക്കിയ ശേഷം പ്രധാന മെനു പ്രദർശിപ്പിച്ചിരിക്കുന്നു (playMenu).
"പ്ലേ" ബട്ടൺ ക്ലിക്ക് ഹാൻഡ്ലർ സജ്ജീകരിക്കുന്നു. ബട്ടൺ അമർത്തുമ്പോൾ, കോഡ് ഗെയിം ആരംഭിക്കുകയും ഞങ്ങൾ കളിക്കാൻ തയ്യാറാണെന്ന് സെർവറിനോട് പറയുകയും ചെയ്യുന്നു.

ഞങ്ങളുടെ ക്ലയന്റ്-സെർവർ ലോജിക്കിന്റെ പ്രധാന "മാംസം" ഫയൽ ഇറക്കുമതി ചെയ്ത ഫയലുകളിലാണ്. 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>). ഞങ്ങളുടെ ഗെയിം വളരെ ലളിതമാണ്, അതിനാൽ ഞങ്ങൾ ഇനിപ്പറയുന്നവ മാത്രം റെൻഡർ ചെയ്യേണ്ടതുണ്ട്:

പശ്ചാത്തലം
കളിക്കാരൻ കപ്പൽ
കളിയിലെ മറ്റ് കളിക്കാർ
ഷെല്ലുകൾ

പ്രധാനപ്പെട്ട സ്‌നിപ്പെറ്റുകൾ ഇതാ 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 എംഎസിലും (സെക്കൻഡിൽ 30) ഒരു ഗെയിം അപ്‌ഡേറ്റ് ലഭിക്കും:

നിർഭാഗ്യവശാൽ, ഒന്നും തികഞ്ഞതല്ല. കൂടുതൽ റിയലിസ്റ്റിക് ചിത്രം ഇതായിരിക്കും:

കാലതാമസം വരുമ്പോൾ നിഷ്കളങ്കമായ നടപ്പാക്കൽ ഏറ്റവും മോശം അവസ്ഥയാണ്. 50ms കാലതാമസത്തോടെ ഒരു ഗെയിം അപ്‌ഡേറ്റ് ലഭിക്കുകയാണെങ്കിൽ, തുടർന്ന് ക്ലയന്റ് മന്ദഗതിയിലായി മുമ്പത്തെ അപ്‌ഡേറ്റിൽ നിന്ന് ഗെയിം നില ഇപ്പോഴും റെൻഡർ ചെയ്യുന്നതിനാൽ അധിക 50ms. കളിക്കാരന് ഇത് എത്രത്തോളം അസൗകര്യമാണെന്ന് നിങ്ങൾക്ക് ഊഹിക്കാവുന്നതാണ്: ഏകപക്ഷീയമായ മാന്ദ്യം കാരണം, ഗെയിം ഞെട്ടിക്കുന്നതും അസ്ഥിരവുമാണെന്ന് തോന്നും.

7.2 മെച്ചപ്പെട്ട ക്ലയന്റ് നില

നിഷ്കളങ്കമായ നടപ്പാക്കലിൽ ഞങ്ങൾ ചില മെച്ചപ്പെടുത്തലുകൾ നടത്തും. ഒന്നാമതായി, ഞങ്ങൾ ഉപയോഗിക്കുന്നു റെൻഡറിംഗ് കാലതാമസം 100 എം.എസ്. ഇതിനർത്ഥം ക്ലയന്റിൻറെ "നിലവിലെ" നില എപ്പോഴും സെർവറിലെ ഗെയിം നിലയേക്കാൾ 100മി.എസ് പിന്നിലായിരിക്കും. ഉദാഹരണത്തിന്, സെർവർ സമയം ആണെങ്കിൽ 150, അപ്പോൾ ക്ലയന്റ് ആ സമയത്ത് സെർവർ ഉണ്ടായിരുന്ന അവസ്ഥയെ റെൻഡർ ചെയ്യും 50:

ഗെയിം അപ്‌ഡേറ്റുകളുടെ പ്രവചനാതീതമായ സമയത്തെ അതിജീവിക്കാൻ ഇത് ഞങ്ങൾക്ക് 100ms ബഫർ നൽകുന്നു:

ഇതിനുള്ള വില സ്ഥിരമായിരിക്കും ഇൻപുട്ട് ലാഗ് 100 എം.എസ്. സുഗമമായ ഗെയിംപ്ലേയ്‌ക്കുള്ള ചെറിയ ത്യാഗമാണിത് - മിക്ക കളിക്കാരും (പ്രത്യേകിച്ച് സാധാരണക്കാർ) ഈ കാലതാമസം ശ്രദ്ധിക്കുന്നില്ല. പ്രവചനാതീതമായ ലേറ്റൻസിയിൽ കളിക്കുന്നതിനേക്കാൾ ആളുകൾക്ക് സ്ഥിരമായ 100 മി.എസ് ലേറ്റൻസിയിലേക്ക് ക്രമീകരിക്കുന്നത് വളരെ എളുപ്പമാണ്.

എന്ന് വിളിക്കപ്പെടുന്ന മറ്റൊരു സാങ്കേതികത നമുക്ക് ഉപയോഗിക്കാം "ക്ലയന്റ്-സൈഡ് പ്രവചനം", മനസ്സിലാക്കിയ കാലതാമസം കുറയ്ക്കുന്നതിന് ഇത് ഒരു നല്ല ജോലി ചെയ്യുന്നു, എന്നാൽ ഈ പോസ്റ്റിൽ ചർച്ച ചെയ്യുന്നതല്ല.

ഞങ്ങൾ ഉപയോഗിക്കുന്ന മറ്റൊരു മെച്ചപ്പെടുത്തൽ ലീനിയർ ഇന്റർപോളേഷൻ. റെൻഡറിംഗ് കാലതാമസം കാരണം, ഞങ്ങൾ സാധാരണയായി ക്ലയന്റിലുള്ള നിലവിലെ സമയത്തേക്കാൾ ഒരു അപ്‌ഡേറ്റെങ്കിലും മുന്നിലാണ്. വിളിച്ചപ്പോൾ getCurrentState(), നമുക്ക് നിറവേറ്റാം ലീനിയർ ഇന്റർപോളേഷൻ ക്ലയന്റിലുള്ള നിലവിലെ സമയത്തിന് മുമ്പും ശേഷവും ഗെയിം അപ്‌ഡേറ്റുകൾക്കിടയിൽ:

ഇത് ഫ്രെയിം റേറ്റ് പ്രശ്നം പരിഹരിക്കുന്നു: ഇപ്പോൾ നമുക്ക് ആവശ്യമുള്ള ഏത് ഫ്രെയിം റേറ്റിലും തനതായ ഫ്രെയിമുകൾ റെൻഡർ ചെയ്യാം!

7.3 മെച്ചപ്പെട്ട ഒരു ക്ലയന്റ് അവസ്ഥ നടപ്പിലാക്കുന്നു

ഉദാഹരണം നടപ്പിലാക്കൽ src/client/state.js റെൻഡറിംഗ് കാലതാമസവും ലീനിയർ ഇന്റർപോളേഷനും ഉപയോഗിക്കുന്നു, പക്ഷേ ഇത് അധികകാലം നിലനിൽക്കില്ല. നമുക്ക് കോഡ് രണ്ട് ഭാഗങ്ങളായി വിഭജിക്കാം. ആദ്യത്തേത് ഇതാ:

state.js, ഭാഗം 1

const RENDER_DELAY = 100;

const gameUpdates = [];
let gameStart = 0;
let firstServerTimestamp = 0;

export function initState() {
  gameStart = 0;
  firstServerTimestamp = 0;
}

export function processGameUpdate(update) {
  if (!firstServerTimestamp) {
    firstServerTimestamp = update.t;
    gameStart = Date.now();
  }
  gameUpdates.push(update);

  // Keep only one game update before the current server time
  const base = getBaseUpdate();
  if (base > 0) {
    gameUpdates.splice(0, base);
  }
}

function currentServerTime() {
  return firstServerTimestamp + (Date.now() - gameStart) - RENDER_DELAY;
}

// Returns the index of the base update, the first game update before
// current server time, or -1 if N/A.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

നിങ്ങൾ ആദ്യം ചെയ്യേണ്ടത് അത് എന്താണ് ചെയ്യുന്നതെന്ന് കണ്ടെത്തുക എന്നതാണ് currentServerTime(). ഞങ്ങൾ നേരത്തെ കണ്ടതുപോലെ, ഓരോ ഗെയിം അപ്‌ഡേറ്റിലും ഒരു സെർവർ ടൈംസ്റ്റാമ്പ് ഉൾപ്പെടുന്നു. സെർവറിനു പിന്നിൽ 100മി.സി അകലെ ചിത്രം റെൻഡർ ചെയ്യാൻ റെൻഡർ ലേറ്റൻസി ഉപയോഗിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, പക്ഷേ സെർവറിലെ നിലവിലെ സമയം ഞങ്ങൾ ഒരിക്കലും അറിയുകയില്ല, കാരണം ഏതെങ്കിലും അപ്‌ഡേറ്റുകൾ ഞങ്ങളിലേക്ക് എത്താൻ എത്ര സമയമെടുത്തുവെന്ന് ഞങ്ങൾക്ക് അറിയാൻ കഴിയില്ല. ഇന്റർനെറ്റ് പ്രവചനാതീതമാണ്, അതിന്റെ വേഗത വളരെയധികം വ്യത്യാസപ്പെടാം!

ഈ പ്രശ്നം പരിഹരിക്കുന്നതിന്, നമുക്ക് ന്യായമായ ഒരു ഏകദേശം ഉപയോഗിക്കാം: ഞങ്ങൾ ആദ്യത്തെ അപ്‌ഡേറ്റ് തൽക്ഷണം വന്നതായി നടിക്കാം. ഇത് ശരിയാണെങ്കിൽ, ആ പ്രത്യേക നിമിഷത്തിൽ നമുക്ക് സെർവർ സമയം അറിയാമായിരുന്നു! ഞങ്ങൾ സെർവർ ടൈംസ്റ്റാമ്പ് സംഭരിക്കുന്നു firstServerTimestamp നമ്മുടെ രക്ഷിക്കുക പ്രാദേശികമായ (ക്ലയന്റ്) ടൈംസ്റ്റാമ്പ് അതേ നിമിഷത്തിൽ gameStart.

ഓ, ഒരു നിമിഷം. സെർവറിൽ സമയം ഉണ്ടാകേണ്ടതല്ലേ = ക്ലയന്റിലുള്ള സമയം? എന്തുകൊണ്ടാണ് ഞങ്ങൾ "സെർവർ ടൈംസ്റ്റാമ്പ്", "ക്ലയന്റ് ടൈംസ്റ്റാമ്പ്" എന്നിവ തമ്മിൽ വേർതിരിക്കുന്നത്? ഇതൊരു വലിയ ചോദ്യമാണ്! ഇവ ഒരേ കാര്യമല്ലെന്ന് ഇത് മാറുന്നു. Date.now() ക്ലയന്റിലും സെർവറിലും വ്യത്യസ്‌ത ടൈംസ്റ്റാമ്പുകൾ തിരികെ നൽകും, ഇത് ഈ മെഷീനുകളുടെ പ്രാദേശിക ഘടകങ്ങളെ ആശ്രയിച്ചിരിക്കുന്നു. എല്ലാ മെഷീനുകളിലും ടൈംസ്റ്റാമ്പുകൾ ഒരുപോലെയായിരിക്കുമെന്ന് ഒരിക്കലും കരുതരുത്.

അത് എന്താണ് ചെയ്യുന്നതെന്ന് ഇപ്പോൾ ഞങ്ങൾ മനസ്സിലാക്കുന്നു currentServerTime(): അത് തിരികെ വരുന്നു നിലവിലെ റെൻഡറിംഗ് സമയത്തിന്റെ സെർവർ ടൈംസ്റ്റാമ്പ്. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഇതാണ് നിലവിലെ സെർവർ സമയം (firstServerTimestamp <+ (Date.now() - gameStart)റെൻഡറിംഗ് കാലതാമസം മൈനസ് (RENDER_DELAY).

ഗെയിം അപ്‌ഡേറ്റുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു എന്ന് നോക്കാം. സെർവറിൽ നിന്ന് ഒരു അപ്‌ഡേറ്റ് ലഭിക്കുമ്പോൾ, അതിനെ വിളിക്കുന്നു processGameUpdate(), ഞങ്ങൾ പുതിയ അപ്‌ഡേറ്റ് ഒരു അറേയിലേക്ക് സംരക്ഷിക്കുന്നു gameUpdates. തുടർന്ന്, മെമ്മറി ഉപയോഗം പരിശോധിക്കാൻ, ഞങ്ങൾ പഴയ അപ്ഡേറ്റുകളെല്ലാം നീക്കം ചെയ്യുന്നു അടിസ്ഥാന അപ്ഡേറ്റ്കാരണം നമുക്ക് അവരെ ഇനി ആവശ്യമില്ല.

എന്താണ് "കോർ അപ്ഡേറ്റ്"? ഈ നിലവിലെ സെർവർ സമയത്തിൽ നിന്ന് പിന്നിലേക്ക് നീങ്ങിക്കൊണ്ട് ഞങ്ങൾ കണ്ടെത്തുന്ന ആദ്യത്തെ അപ്‌ഡേറ്റ്. ഈ ഡയഗ്രം ഓർക്കുന്നുണ്ടോ?

"ക്ലയന്റ് റെൻഡർ ടൈം" എന്നതിന്റെ ഇടതുവശത്തുള്ള ഗെയിം അപ്‌ഡേറ്റ് അടിസ്ഥാന അപ്‌ഡേറ്റാണ്.

അടിസ്ഥാന അപ്‌ഡേറ്റ് എന്തിനുവേണ്ടിയാണ് ഉപയോഗിക്കുന്നത്? എന്തുകൊണ്ടാണ് ഞങ്ങൾക്ക് അപ്‌ഡേറ്റുകൾ അടിസ്ഥാനത്തിലേക്ക് ഡ്രോപ്പ് ചെയ്യാൻ കഴിയുക? ഇത് മനസിലാക്കാൻ, നമുക്ക് ഒടുവിൽ നടപ്പിലാക്കുന്നത് നോക്കാം getCurrentState():

state.js, ഭാഗം 2

export function getCurrentState() {
  if (!firstServerTimestamp) {
    return {};
  }

  const base = getBaseUpdate();
  const serverTime = currentServerTime();

  // If base is the most recent update we have, use its state.
  // Else, interpolate between its state and the state of (base + 1).
  if (base < 0) {
    return gameUpdates[gameUpdates.length - 1];
  } else if (base === gameUpdates.length - 1) {
    return gameUpdates[base];
  } else {
    const baseUpdate = gameUpdates[base];
    const next = gameUpdates[base + 1];
    const r = (serverTime - baseUpdate.t) / (next.t - baseUpdate.t);
    return {
      me: interpolateObject(baseUpdate.me, next.me, r),
      others: interpolateObjectArray(baseUpdate.others, next.others, r),
      bullets: interpolateObjectArray(baseUpdate.bullets, next.bullets, r),
    };
  }
}

ഞങ്ങൾ മൂന്ന് കേസുകൾ കൈകാര്യം ചെയ്യുന്നു:

base < 0 നിലവിലെ റെൻഡറിംഗ് സമയം വരെ അപ്‌ഡേറ്റുകളൊന്നും ഇല്ല എന്നാണ് അർത്ഥമാക്കുന്നത് (മുകളിൽ നടപ്പിലാക്കുന്നത് കാണുക getBaseUpdate()). റെൻഡറിംഗ് ലാഗ് കാരണം ഗെയിമിന്റെ തുടക്കത്തിൽ തന്നെ ഇത് സംഭവിക്കാം. ഈ സാഹചര്യത്തിൽ, ലഭിച്ച ഏറ്റവും പുതിയ അപ്ഡേറ്റ് ഞങ്ങൾ ഉപയോഗിക്കുന്നു.
base ഞങ്ങൾക്ക് ലഭിച്ച ഏറ്റവും പുതിയ അപ്‌ഡേറ്റാണ്. നെറ്റ്‌വർക്ക് കാലതാമസം അല്ലെങ്കിൽ മോശം ഇന്റർനെറ്റ് കണക്ഷൻ കാരണം ഇത് സംഭവിക്കാം. ഈ സാഹചര്യത്തിലും ഞങ്ങൾ ഏറ്റവും പുതിയ അപ്ഡേറ്റ് ഉപയോഗിക്കുന്നു.
നിലവിലെ റെൻഡർ സമയത്തിന് മുമ്പും ശേഷവും ഞങ്ങൾക്ക് ഒരു അപ്‌ഡേറ്റ് ഉണ്ട്, അതിനാൽ ഞങ്ങൾക്ക് കഴിയും ഇന്റർപോളേറ്റ്!

ഉള്ളിൽ അവശേഷിക്കുന്നതെല്ലാം state.js ലളിതമായ (എന്നാൽ വിരസമായ) ഗണിതത്തിന്റെ ലീനിയർ ഇന്റർപോളേഷന്റെ ഒരു നിർവ്വഹണമാണ്. നിങ്ങൾക്കത് സ്വയം പര്യവേക്ഷണം ചെയ്യണമെങ്കിൽ, തുറക്കുക state.js ഓൺ സാമൂഹികം.

ഭാഗം 2. ബാക്കെൻഡ് സെർവർ

ഈ ഭാഗത്ത് നമ്മളെ നിയന്ത്രിക്കുന്ന Node.js ബാക്കെൻഡ് നോക്കാം ഒരു .io ഗെയിമിന്റെ ഉദാഹരണം.

1. സെർവർ എൻട്രി പോയിന്റ്

വെബ് സെർവർ മാനേജുചെയ്യാൻ Node.js എന്ന പേരിൽ ഞങ്ങൾ ഒരു ജനപ്രിയ വെബ് ഫ്രെയിംവർക്ക് ഉപയോഗിക്കും പ്രകടിപ്പിക്കുക. ഇത് ഞങ്ങളുടെ സെർവർ എൻട്രി പോയിന്റ് ഫയൽ വഴി കോൺഫിഗർ ചെയ്യപ്പെടും src/server/server.js:

server.js, ഭാഗം 1

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../../webpack.dev.js');

// Setup an Express server
const app = express();
app.use(express.static('public'));

if (process.env.NODE_ENV === 'development') {
  // Setup Webpack for development
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Static serve the dist/ folder in production
  app.use(express.static('dist'));
}

// Listen on port
const port = process.env.PORT || 3000;
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

ആദ്യ ഭാഗത്തിൽ നമ്മൾ Webpack ചർച്ച ചെയ്തത് ഓർക്കുന്നുണ്ടോ? ഇവിടെയാണ് ഞങ്ങൾ ഞങ്ങളുടെ വെബ്‌പാക്ക് കോൺഫിഗറേഷനുകൾ ഉപയോഗിക്കുന്നത്. ഞങ്ങൾ അവ രണ്ട് തരത്തിൽ പ്രയോഗിക്കും:

ഉപയോഗിക്കുക webpack-dev-middleware ഞങ്ങളുടെ വികസന പാക്കേജുകൾ സ്വയമേവ പുനർനിർമ്മിക്കാൻ, അല്ലെങ്കിൽ
ഒരു ഫോൾഡർ സ്ഥിരമായി കൈമാറുക dist/, പ്രൊഡക്ഷൻ ബിൽഡിന് ശേഷം വെബ്‌പാക്ക് ഞങ്ങളുടെ ഫയലുകൾ എഴുതും.

മറ്റൊരു പ്രധാന ദൗത്യം server.js സെർവർ സജ്ജീകരിക്കുന്നത് ഉൾക്കൊള്ളുന്നു socket.ioഇത് എക്സ്പ്രസ് സെർവറിലേക്ക് ലളിതമായി ബന്ധിപ്പിക്കുന്നു:

server.js, ഭാഗം 2

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

// Setup Express
// ...
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

// Setup socket.io
const io = socketio(server);

// Listen for socket.io connections
io.on('connection', socket => {
  console.log('Player connected!', socket.id);

  socket.on(Constants.MSG_TYPES.JOIN_GAME, joinGame);
  socket.on(Constants.MSG_TYPES.INPUT, handleInput);
  socket.on('disconnect', onDisconnect);
});

സെർവറുമായി ഒരു socket.io കണക്ഷൻ വിജയകരമായി സ്ഥാപിച്ച ശേഷം, പുതിയ സോക്കറ്റിനായി ഞങ്ങൾ ഇവന്റ് ഹാൻഡ്‌ലറുകൾ കോൺഫിഗർ ചെയ്യുന്നു. ഇവന്റ് ഹാൻഡ്‌ലർമാർ ഒരു സിംഗിൾടൺ ഒബ്‌ജക്‌റ്റിലേക്ക് ഡെലിഗേറ്റ് ചെയ്‌ത് ക്ലയന്റുകളിൽ നിന്ന് ലഭിക്കുന്ന സന്ദേശങ്ങൾ പ്രോസസ്സ് ചെയ്യുന്നു game:

server.js, ഭാഗം 3

const Game = require('./game');

// ...

// Setup the Game
const game = new Game();

function joinGame(username) {
  game.addPlayer(this, username);
}

function handleInput(dir) {
  game.handleInput(this, dir);
}

function onDisconnect() {
  game.removePlayer(this);
}

ഞങ്ങൾ ഒരു .io ഗെയിം സൃഷ്ടിക്കുകയാണ്, അതിനാൽ ഞങ്ങൾക്ക് ഒരു പകർപ്പ് മാത്രമേ ആവശ്യമുള്ളൂ Game ("ഗെയിം") - എല്ലാ കളിക്കാരും ഒരേ വേദിയിൽ കളിക്കുന്നു! ഈ ക്ലാസ് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് അടുത്ത വിഭാഗത്തിൽ നമുക്ക് നോക്കാം Game.

2. ഗെയിം സെർവറുകൾ

ക്ലാസ് Game ഏറ്റവും പ്രധാനപ്പെട്ട സെർവർ സൈഡ് ലോജിക് അടങ്ങിയിരിക്കുന്നു. ഇതിന് രണ്ട് പ്രധാന ജോലികളുണ്ട്: പ്ലെയർ മാനേജ്മെന്റ് и ഗെയിം സിമുലേഷൻ.

ആദ്യ ടാസ്ക്കിൽ നിന്ന് ആരംഭിക്കാം - കളിക്കാരെ നിയന്ത്രിക്കുക.

game.js, ഭാഗം 1

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

class Game {
  constructor() {
    this.sockets = {};
    this.players = {};
    this.bullets = [];
    this.lastUpdateTime = Date.now();
    this.shouldSendUpdate = false;
    setInterval(this.update.bind(this), 1000 / 60);
  }

  addPlayer(socket, username) {
    this.sockets[socket.id] = socket;

    // Generate a position to start this player at.
    const x = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    const y = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    this.players[socket.id] = new Player(socket.id, username, x, y);
  }

  removePlayer(socket) {
    delete this.sockets[socket.id];
    delete this.players[socket.id];
  }

  handleInput(socket, dir) {
    if (this.players[socket.id]) {
      this.players[socket.id].setDirection(dir);
    }
  }

  // ...
}

ഈ ഗെയിമിൽ ഞങ്ങൾ കളിക്കാരെ ഫീൽഡ് അനുസരിച്ച് തിരിച്ചറിയും id അവരുടെ സോക്കറ്റ് socket.io (നിങ്ങൾ ആശയക്കുഴപ്പത്തിലാണെങ്കിൽ, തിരികെ പോകുക server.js). Socket.io തന്നെ ഓരോ സോക്കറ്റിനും ഒരു തനത് നൽകുന്നു id, അതിനാൽ നമ്മൾ അതിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല. ഞാൻ അവനെ വിളിക്കാം പ്ലെയർ ഐഡി.

അത് മനസ്സിൽ വെച്ചുകൊണ്ട്, ക്ലാസ്സിലെ ഇൻസ്റ്റൻസ് വേരിയബിളുകൾ പരിശോധിക്കാം Game:

sockets പ്ലെയറുമായി ബന്ധപ്പെട്ട സോക്കറ്റിലേക്ക് പ്ലെയർ ഐഡിയെ ബന്ധിപ്പിക്കുന്ന ഒരു വസ്തുവാണ്. കാലക്രമേണ അവരുടെ പ്ലേയർ ഐഡികൾ ഉപയോഗിച്ച് സോക്കറ്റുകൾ ആക്‌സസ് ചെയ്യാൻ ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു.
players പ്ലെയർ ഐഡിയെ കോഡ്> പ്ലെയർ ഒബ്‌ജക്‌റ്റുമായി ബന്ധിപ്പിക്കുന്ന ഒരു ഒബ്‌ജക്റ്റ് ആണ്

bullets വസ്തുക്കളുടെ ഒരു നിരയാണ് Bullet, ഒരു പ്രത്യേക ക്രമം ഇല്ല.
lastUpdateTime - ഇതാണ് അവസാന ഗെയിം അപ്‌ഡേറ്റിന്റെ ടൈംസ്റ്റാമ്പ്. ഇത് എങ്ങനെ ഉപയോഗിക്കുമെന്ന് നമുക്ക് ഉടൻ കാണാം.
shouldSendUpdate ഒരു ഓക്സിലറി വേരിയബിൾ ആണ്. അതിന്റെ ഉപയോഗവും ഉടൻ കാണാം.
രീതികൾ addPlayer(), removePlayer() и handleInput() വിശദീകരിക്കേണ്ട ആവശ്യമില്ല, അവ ഉപയോഗിക്കുന്നു server.js. നിങ്ങൾക്ക് ഒരു റിഫ്രഷർ ആവശ്യമുണ്ടെങ്കിൽ, കുറച്ച് ഉയരത്തിലേക്ക് മടങ്ങുക.

അവസാന വരി constructor() ആരംഭിക്കുന്നു അപ്ഡേറ്റ് സൈക്കിൾ ഗെയിമുകൾ (60 അപ്ഡേറ്റുകൾ/സെക്കന്റുകളുടെ ആവൃത്തിയിൽ):

game.js, ഭാഗം 2

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

class Game {
  // ...

  update() {
    // Calculate time elapsed
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // Update each bullet
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        // Destroy this bullet
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

    // Update each player
    Object.keys(this.sockets).forEach(playerID => {
      const player = this.players[playerID];
      const newBullet = player.update(dt);
      if (newBullet) {
        this.bullets.push(newBullet);
      }
    });

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

    // Check if any players are dead
    Object.keys(this.sockets).forEach(playerID => {
      const socket = this.sockets[playerID];
      const player = this.players[playerID];
      if (player.hp <= 0) {
        socket.emit(Constants.MSG_TYPES.GAME_OVER);
        this.removePlayer(socket);
      }
    });

    // Send a game update to each player every other time
    if (this.shouldSendUpdate) {
      const leaderboard = this.getLeaderboard();
      Object.keys(this.sockets).forEach(playerID => {
        const socket = this.sockets[playerID];
        const player = this.players[playerID];
        socket.emit(
          Constants.MSG_TYPES.GAME_UPDATE,
          this.createUpdate(player, leaderboard),
        );
      });
      this.shouldSendUpdate = false;
    } else {
      this.shouldSendUpdate = true;
    }
  }

  // ...
}

രീതി update() സെർവർ സൈഡ് ലോജിക്കിന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗം അടങ്ങിയിരിക്കുന്നു. അത് ചെയ്യുന്നതെല്ലാം ക്രമത്തിൽ പട്ടികപ്പെടുത്താം:

സമയം എത്രയാണെന്ന് കണക്കാക്കുന്നു dt അത് കഴിഞ്ഞ കാലം മുതൽ ഉണ്ട് update().
ഓരോ പ്രൊജക്റ്റിലും പുതുക്കുകയും ആവശ്യമെങ്കിൽ അവയെ നശിപ്പിക്കുകയും ചെയ്യുന്നു. ഈ പ്രവർത്തനം നടപ്പിലാക്കുന്നത് നമുക്ക് പിന്നീട് കാണാം. തൽക്കാലം നമുക്ക് അതറിഞ്ഞാൽ മതി bullet.update() മടങ്ങുന്നു true, പ്രൊജക്റ്റൈൽ നശിപ്പിക്കപ്പെടേണ്ടതുണ്ടെങ്കിൽ (അവൻ അരങ്ങിന് പുറത്തേക്ക് പോയി).
ഓരോ കളിക്കാരനും അപ്ഡേറ്റ് ചെയ്യുകയും ആവശ്യമെങ്കിൽ ഒരു പ്രൊജക്റ്റൈൽ സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. ഈ നടപ്പാക്കലും നമുക്ക് പിന്നീട് കാണാം - player.update() ഒരു വസ്തു തിരികെ നൽകാം Bullet.
പ്രൊജക്‌ടൈലുകളും ഉപയോഗിക്കുന്ന കളിക്കാരും തമ്മിലുള്ള കൂട്ടിയിടി പരിശോധിക്കുന്നു applyCollisions(), ഇത് കളിക്കാരെ അടിക്കുന്ന പ്രൊജക്‌ടൈലുകളുടെ ഒരു നിര നൽകുന്നു. മടങ്ങിയ ഓരോ പ്രൊജക്‌ടൈലിനും, അത് എറിഞ്ഞ കളിക്കാരന്റെ സ്‌കോർ ഞങ്ങൾ വർദ്ധിപ്പിക്കുന്നു (ഉപയോഗിക്കുന്നത് player.onDealtDamage()), തുടർന്ന് അറേയിൽ നിന്ന് പ്രൊജക്റ്റൈൽ നീക്കം ചെയ്യുക bullets.
കൊല്ലപ്പെട്ട എല്ലാ കളിക്കാരെയും അറിയിക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നു.
എല്ലാ കളിക്കാർക്കും ഒരു ഗെയിം അപ്‌ഡേറ്റ് അയയ്‌ക്കുന്നു ഓരോ നിമിഷവും വിളിച്ചപ്പോൾ update(). ഇത് ട്രാക്ക് ചെയ്യാൻ മുകളിൽ സൂചിപ്പിച്ച ഓക്സിലറി വേരിയബിൾ ഞങ്ങളെ സഹായിക്കുന്നു shouldSendUpdate. കാരണം update() 60 തവണ/സെക്കൻഡ് വിളിക്കുന്നു, ഞങ്ങൾ ഗെയിം അപ്‌ഡേറ്റുകൾ 30 തവണ/സെക്കൻഡ് അയയ്‌ക്കുന്നു. അങ്ങനെ, ക്ലോക്ക് ആവൃത്തി സെർവർ 30 ക്ലോക്ക് സൈക്കിളുകൾ/സെ ആണ് (ഞങ്ങൾ ആദ്യ ഭാഗത്തിൽ ക്ലോക്ക് ഫ്രീക്വൻസിയെക്കുറിച്ച് സംസാരിച്ചു).

എന്തുകൊണ്ടാണ് ഗെയിം അപ്‌ഡേറ്റുകൾ മാത്രം അയയ്‌ക്കുന്നത് കാലത്തിലൂടെ ? ചാനൽ സംരക്ഷിക്കാൻ. സെക്കൻഡിൽ 30 ഗെയിം അപ്‌ഡേറ്റുകൾ ധാരാളം!

പിന്നെ വെറുതെ വിളിച്ചാലോ? update() സെക്കൻഡിൽ 30 തവണ? ഗെയിം സിമുലേഷൻ മെച്ചപ്പെടുത്താൻ. കൂടുതൽ തവണ അത് വിളിക്കപ്പെടുന്നു update(), ഗെയിം സിമുലേഷൻ കൂടുതൽ കൃത്യതയുള്ളതായിരിക്കും. എന്നാൽ വെല്ലുവിളികളുടെ എണ്ണത്തിൽ വല്ലാതെ ഭ്രമിക്കരുത് update(), കാരണം ഇത് ഗണിതപരമായി ചെലവേറിയ ജോലിയാണ് - സെക്കൻഡിൽ 60 മതി.

ക്ലാസ്സിലെ ബാക്കിയുള്ളവർ Game ഉപയോഗിക്കുന്ന സഹായ രീതികൾ ഉൾക്കൊള്ളുന്നു update():

game.js, ഭാഗം 3

class Game {
  // ...

  getLeaderboard() {
    return Object.values(this.players)
      .sort((p1, p2) => p2.score - p1.score)
      .slice(0, 5)
      .map(p => ({ username: p.username, score: Math.round(p.score) }));
  }

  createUpdate(player, leaderboard) {
    const nearbyPlayers = Object.values(this.players).filter(
      p => p !== player && p.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );
    const nearbyBullets = this.bullets.filter(
      b => b.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );

    return {
      t: Date.now(),
      me: player.serializeForUpdate(),
      others: nearbyPlayers.map(p => p.serializeForUpdate()),
      bullets: nearbyBullets.map(b => b.serializeForUpdate()),
      leaderboard,
    };
  }
}

getLeaderboard() ഇത് വളരെ ലളിതമാണ് - ഇത് കളിക്കാരെ സ്‌കോർ അനുസരിച്ച് തരംതിരിക്കുകയും മികച്ച അഞ്ച് പേരെ എടുക്കുകയും ഓരോന്നിനും ഉപയോക്തൃനാമവും സ്‌കോറും നൽകുകയും ചെയ്യുന്നു.

createUpdate() ൽ ഉപയോഗിക്കുന്നു update() കളിക്കാർക്ക് വിതരണം ചെയ്യുന്ന ഗെയിം അപ്‌ഡേറ്റുകൾ സൃഷ്‌ടിക്കാൻ. അതിന്റെ പ്രധാന ദൌത്യം രീതികൾ വിളിക്കുക എന്നതാണ് serializeForUpdate(), ക്ലാസുകൾക്കായി നടപ്പിലാക്കി Player и Bullet. ഇത് ഓരോ കളിക്കാരനും ഡാറ്റ കൈമാറുന്നു എന്നത് ശ്രദ്ധിക്കുക ഏറ്റവും അടുത്തുള്ള കളിക്കാരും പ്രൊജക്‌ടൈലുകളും - പ്ലെയറിൽ നിന്ന് അകലെയുള്ള ഗെയിം ഒബ്‌ജക്റ്റുകളെക്കുറിച്ചുള്ള വിവരങ്ങൾ കൈമാറേണ്ട ആവശ്യമില്ല!

3. സെർവറിലെ ഗെയിം വസ്തുക്കൾ

ഞങ്ങളുടെ ഗെയിമിൽ, പ്രൊജക്‌ടൈലുകളും കളിക്കാരും യഥാർത്ഥത്തിൽ വളരെ സമാനമാണ്: അവ അമൂർത്തമായ വൃത്താകൃതിയിലുള്ള ചലിക്കുന്ന ഗെയിം ഒബ്‌ജക്റ്റുകളാണ്. കളിക്കാരും പ്രൊജക്‌ടൈലുകളും തമ്മിലുള്ള ഈ സാമ്യം പ്രയോജനപ്പെടുത്തുന്നതിന്, ഒരു അടിസ്ഥാന ക്ലാസ് നടപ്പിലാക്കിക്കൊണ്ട് നമുക്ക് ആരംഭിക്കാം Object:

object.js

class Object {
  constructor(id, x, y, dir, speed) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.direction = dir;
    this.speed = speed;
  }

  update(dt) {
    this.x += dt * this.speed * Math.sin(this.direction);
    this.y -= dt * this.speed * Math.cos(this.direction);
  }

  distanceTo(object) {
    const dx = this.x - object.x;
    const dy = this.y - object.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  setDirection(dir) {
    this.direction = dir;
  }

  serializeForUpdate() {
    return {
      id: this.id,
      x: this.x,
      y: this.y,
    };
  }
}

ഇവിടെ സങ്കീർണ്ണമായ ഒന്നും നടക്കുന്നില്ല. ഈ ക്ലാസ് വിപുലീകരണത്തിന് നല്ലൊരു തുടക്കമായിരിക്കും. ക്ലാസ് എങ്ങനെയെന്ന് നോക്കാം Bullet ഉപയോഗിക്കുന്നു Object:

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 ഗെയിം നിർമ്മിക്കുക!

എല്ലാ ഉദാഹരണ കോഡുകളും ഓപ്പൺ സോഴ്‌സ് ആണ് കൂടാതെ പോസ്റ്റുചെയ്തതുമാണ് സാമൂഹികം.

അവലംബം: www.habr.com

.io വിഭാഗത്തിൽ ഒരു മൾട്ടിപ്ലെയർ വെബ് ഗെയിം സൃഷ്ടിക്കുന്നു

ഒരു .io ഗെയിമിന്റെ ഉദാഹരണം

1. സംക്ഷിപ്ത അവലോകനം/പദ്ധതി ഘടന

പൊതു/

src /

2. അസംബ്ലികൾ/പദ്ധതി പാരാമീറ്ററുകൾ

webpack.common.js:

webpack.dev.js

പ്രാദേശിക സജ്ജീകരണം

3. ക്ലയന്റ് എൻട്രി പോയിന്റുകൾ

Index.html

index.js

4. ക്ലയന്റ് ഡാറ്റയുടെ കൈമാറ്റം

networking.js

5. ക്ലയന്റ് റെൻഡറിംഗ്

Assets.js

render.js

render.js

6. ക്ലയന്റ് ഇൻപുട്ട്

input.js

7. ക്ലയന്റ് നില

render.js

7.1 ഉപഭോക്താവിന്റെ നിഷ്കളങ്കമായ അവസ്ഥ

naive-state.js

7.2 മെച്ചപ്പെട്ട ക്ലയന്റ് നില

7.3 മെച്ചപ്പെട്ട ഒരു ക്ലയന്റ് അവസ്ഥ നടപ്പിലാക്കുന്നു

state.js, ഭാഗം 1

state.js, ഭാഗം 2

ഭാഗം 2. ബാക്കെൻഡ് സെർവർ

1. സെർവർ എൻട്രി പോയിന്റ്

server.js, ഭാഗം 1

server.js, ഭാഗം 2

server.js, ഭാഗം 3

2. ഗെയിം സെർവറുകൾ

game.js, ഭാഗം 1

game.js, ഭാഗം 2

game.js, ഭാഗം 3

3. സെർവറിലെ ഗെയിം വസ്തുക്കൾ

object.js

bullet.js

player.js

4. കൂട്ടിയിടി കണ്ടെത്തൽ

game.js

collisions.js

അവസാനം

ഒരു അഭിപ്രായം ചേർക്കുക മറുപടി റദ്ദാക്കാൻ

ഒരു അഭിപ്രായം ചേർക്കുക