Multiplayer .io ვებ თამაშის შექმნა

გამოვიდა 2015 წელს Agar.io გახდა ახალი ჟანრის წინამორბედი თამაშები .ioრომელიც მას შემდეგ გაიზარდა პოპულარობით. მე პირადად განვიცდიდი .io თამაშების პოპულარობის ზრდას: ბოლო სამი წლის განმავლობაში მქონდა შექმნა და გაყიდა ორი თამაში ამ ჟანრში..

თუ აქამდე არასოდეს გსმენიათ ამ თამაშების შესახებ, ეს არის უფასო მრავალმოთამაშიანი ვებ თამაშები, რომელთა თამაში მარტივია (არ არის საჭირო ანგარიში). როგორც წესი, ისინი ერთსა და იმავე არენაზე ბევრ მოწინააღმდეგე მოთამაშეს ხვდებიან. სხვა ცნობილი .io თამაშები: Slither.io и Diep.io.

ამ პოსტში ჩვენ გავარკვევთ როგორ შექმენით .io თამაში ნულიდან. ამისათვის საკმარისი იქნება მხოლოდ Javascript-ის ცოდნა: თქვენ უნდა გესმოდეთ ისეთი რაღაცეები, როგორიცაა სინტაქსი ES6, საკვანძო სიტყვა this и დაპირებები. მაშინაც კი, თუ Javascript სრულყოფილად არ იცით, მაინც გესმით პოსტის უმეტესი ნაწილი.

.io თამაშის მაგალითი

სასწავლო დახმარებისთვის მივმართავთ მაგალითი თამაში .io. სცადე ითამაშო!

თამაში საკმაოდ მარტივია: თქვენ აკონტროლებთ ხომალდს არენაზე სხვა მოთამაშეებთან ერთად. თქვენი გემი ავტომატურად ისვრის ჭურვებს და თქვენ ცდილობთ დაარტყოთ სხვა მოთამაშეებს, ხოლო თავიდან აიცილოთ მათი ჭურვები.

1. პროექტის მოკლე მიმოხილვა/სტრუქტურა

ვურჩევ ჩამოტვირთეთ საწყისი კოდი სამაგალითო თამაში, ასე რომ თქვენ შეგიძლიათ მომყვეთ.

მაგალითი იყენებს შემდეგს:

• ექსპრესი არის ყველაზე პოპულარული Node.js ვებ ჩარჩო, რომელიც მართავს თამაშის ვებ სერვერს.
• სოკეტი — ვებსოკეტის ბიბლიოთეკა ბრაუზერსა და სერვერს შორის მონაცემთა გაცვლისთვის.
• ვებგვერდი - მოდულის მენეჯერი. თქვენ შეგიძლიათ წაიკითხოთ იმის შესახებ, თუ რატომ უნდა გამოიყენოთ 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) კლიენტის შესვლის წერტილი. Webpack დაიწყება აქედან და რეკურსიულად მოძებნის სხვა იმპორტირებულ ფაილებს.
• ჩვენი Webpack build-ის გამომავალი JS განთავსდება დირექტორიაში dist/. ამ ფაილს ჩვენს დავარქმევ JS პაკეტი.
• ჩვენ ვიყენებთ Babelდა კერძოდ კონფიგურაცია @babel/preset-env ჩვენი JS კოდის გადასატანად ძველი ბრაუზერებისთვის.
• ჩვენ ვიყენებთ დანამატს, რომ ამოვიღოთ ყველა CSS, რომელიც მითითებულია JS ფაილებით და გავაერთიანოთ ისინი ერთ ადგილას. ჩვენს დავარქმევ 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წარმოებაში განთავსებისას პაკეტის ზომის ოპტიმიზაცია.

ადგილობრივი დაყენება

მე გირჩევთ დააინსტალიროთ პროექტი ადგილობრივ მანქანაზე, ასე რომ თქვენ შეგიძლიათ მიყვეთ ამ პოსტში ჩამოთვლილ ნაბიჯებს. დაყენება მარტივია: პირველ რიგში, სისტემა უნდა იყოს დაინსტალირებული Node и NPM. შემდეგი თქვენ უნდა გააკეთოთ

$ 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> და ღილაკი "PLAY" (<button>).

საწყისი გვერდის ჩატვირთვის შემდეგ, ბრაუზერი დაიწყებს Javascript კოდის შესრულებას, დაწყებული შესვლის წერტილის 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. "PLAY" ღილაკის დაწკაპუნების დამმუშავებლის დაყენება. ღილაკზე დაჭერისას, კოდი ახდენს თამაშის ინიციალიზებას და ეუბნება სერვერს, რომ ჩვენ მზად ვართ ვითამაშოთ.

ჩვენი კლიენტ-სერვერის ლოგიკის მთავარი "ხორცი" არის იმ ფაილებში, რომლებიც იმპორტირებულია ფაილის მიერ index.js. ახლა ჩვენ გადავხედავთ მათ ყველა თანმიმდევრობით.

4. კლიენტის მონაცემების გაცვლა

ამ თამაშში ჩვენ ვიყენებთ ცნობილ ბიბლიოთეკას სერვერთან კომუნიკაციისთვის სოკეტი. Socket.io-ს აქვს მშობლიური მხარდაჭერა ვებ -სოკეტები, რომლებიც კარგად შეეფერება ორმხრივ კომუნიკაციას: შეგვიძლია სერვერზე შეტყობინებების გაგზავნა и სერვერს შეუძლია გამოგვიგზავნოს შეტყობინებები იმავე კავშირით.

გვექნება ერთი ფაილი src/client/networking.jsვინც იზრუნებს ყველას მიერ კომუნიკაცია სერვერთან:

ქსელში.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. კლიენტის რენდერი

დროა გამოვაჩინოთ სურათი ეკრანზე!

...მაგრამ სანამ ამას გავაკეთებთ, ჩვენ უნდა გადმოვწეროთ ყველა სურათი (რესურსი), რომელიც საჭიროა ამისთვის. მოდით დავწეროთ რესურსების მენეჯერი:

აქტივები.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:

შეყვანა.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() (of networking.js) როდესაც ხდება შეყვანის მოვლენა (მაგალითად, მაუსის გადაადგილებისას). updateDirection() ეხება შეტყობინებების გაცვლას სერვერთან, რომელიც ამუშავებს შეყვანის მოვლენას და შესაბამისად განაახლებს თამაშის მდგომარეობას.

7. კლიენტის სტატუსი

ეს განყოფილება ყველაზე რთულია პოსტის პირველ ნაწილში. ნუ იმედგაცრუებთ, თუ არ გესმით პირველად წაკითხვისას! თქვენ კი შეგიძლიათ გამოტოვოთ იგი და მოგვიანებით დაუბრუნდეთ მას.

კლიენტ-სერვერის კოდის დასასრულებლად საჭირო თავსატეხის ბოლო ნაწილია იყო. გახსოვთ კოდის ნაწყვეტი Client Rendering განყოფილებიდან?

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: ინფორმაცია მოთამაშის შესახებ, რომელიც იღებს ამ განახლებას.
• სხვები: ინფორმაციის მასივი სხვა მოთამაშეების შესახებ, რომლებიც მონაწილეობენ იმავე თამაშში.
• ტყვიები: ინფორმაციის მასივი თამაშში ჭურვების შესახებ.
• leaderboard: ლიდერბორდის მიმდინარე მონაცემები. ჩვენ მათ არ გავითვალისწინებთ ამ პოსტში.

7.1 გულუბრყვილო კლიენტის მდგომარეობა

გულუბრყვილო განხორციელება getCurrentState() შეუძლია პირდაპირ დააბრუნოს მონაცემები თამაშის ბოლო განახლებიდან.

გულუბრყვილო-სახელმწიფო.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.

Tick ​​Rate: სიხშირე, რომლითაც სერვერი უგზავნის თამაშის განახლებებს კლიენტებს. ის ხშირად უფრო დაბალია ვიდრე კადრების სიხშირე. ჩვენს თამაშში სერვერი მუშაობს წამში 30 ტკიპზე.

თუ ჩვენ უბრალოდ გადავიტანთ თამაშის უახლეს განახლებას, მაშინ FPS არსებითად არასოდეს გადააჭარბებს 30-ს, რადგან ჩვენ არასდროს ვიღებთ 30-ზე მეტ განახლებას სერვერიდან წამში. თუნდაც დავურეკოთ render() 60-ჯერ წამში, მაშინ ამ ზარების ნახევარი უბრალოდ გადახაზავს იგივეს, არსებითად არაფერს აკეთებს. გულუბრყვილო განხორციელების კიდევ ერთი პრობლემა არის ის ექვემდებარება დაგვიანებას. იდეალური ინტერნეტის სიჩქარით, კლიენტი მიიღებს თამაშის განახლებას ზუსტად ყოველ 33 ms (30 წამში):

სამწუხაროდ, იდეალური არაფერია. უფრო რეალური სურათი იქნება:

გულუბრყვილო განხორციელება ყველაზე უარესი შემთხვევაა, როდესაც საქმე ლატენტურობას ეხება. თუ თამაშის განახლება მიიღება 50 ms დაგვიანებით, მაშინ კლიენტთა სადგომები დამატებით 50 ms-ით, რადგან ის კვლავ ახდენს თამაშის მდგომარეობას წინა განახლებიდან. თქვენ წარმოიდგინეთ, რამდენად მოუხერხებელია ეს მოთამაშისთვის: თვითნებური შენელების გამო, თამაში მოჩვენებითი და არასტაბილური იქნება.

7.2 კლიენტის მდგომარეობის გაუმჯობესება

ჩვენ განვახორციელებთ გარკვეულ გაუმჯობესებას გულუბრყვილო განხორციელებაში. პირველ რიგში, ჩვენ ვიყენებთ გადაცემის შეფერხება 100 ms-ისთვის. ეს ნიშნავს, რომ კლიენტის "მიმდინარე" მდგომარეობა ყოველთვის ჩამორჩება სერვერზე თამაშის მდგომარეობას 100 ms-ით. მაგალითად, თუ სერვერზე დრო არის 150, შემდეგ კლიენტი გამოიტანს იმ მდგომარეობას, რომელშიც სერვერი იმ დროს იმყოფებოდა 50:

ეს გვაძლევს 100 ms ბუფერს, რომ გადავრჩეთ თამაშის განახლებების არაპროგნოზირებადი დროით:

ამის ანაზღაურება მუდმივი იქნება შეყვანის ჩამორჩენა 100 ms-ით. ეს არის უმნიშვნელო მსხვერპლი გლუვი გეიმპლეისთვის - მოთამაშეთა უმეტესობა (განსაკუთრებით შემთხვევითი) ვერც კი შეამჩნევს ამ შეფერხებას. ადამიანებისთვის ბევრად უფრო ადვილია ადაპტირება მუდმივი 100ms შეყოვნებით, ვიდრე თამაში არაპროგნოზირებადი შეყოვნებით.

ჩვენ ასევე შეგვიძლია გამოვიყენოთ სხვა ტექნიკა ე.წ კლიენტის მხრიდან პროგნოზი, რომელიც კარგ საქმეს აკეთებს აღქმული შეყოვნების შესამცირებლად, მაგრამ ამ პოსტში არ იქნება გაშუქებული.

კიდევ ერთი გაუმჯობესება, რომელსაც ჩვენ ვიყენებთ არის წრფივი ინტერპოლაცია. რენდერინგის შეფერხების გამო, ჩვენ ჩვეულებრივ ვაკეთებთ მინიმუმ ერთი განახლებას კლიენტში მიმდინარე დროზე ადრე. როცა დაუძახეს getCurrentState(), ჩვენ შეგვიძლია შევასრულოთ წრფივი ინტერპოლაცია თამაშის განახლებებს შორის კლიენტში მიმდინარე დროის წინ და შემდეგ:

ეს წყვეტს კადრების სიჩქარის პრობლემას: ახლა ჩვენ შეგვიძლია გამოვხატოთ უნიკალური კადრები ჩვენთვის საჭირო ნებისმიერი სიჩქარით!

7.3 გაუმჯობესებული კლიენტის მდგომარეობის განხორციელება

განხორციელების მაგალითი src/client/state.js იყენებს როგორც გადაცემის დაყოვნებას, ასევე ხაზოვან ინტერპოლაციას, მაგრამ ეს დიდხანს არ გრძელდება. მოდით დავყოთ კოდი ორ ნაწილად. აი პირველი:

state.js, ნაწილი 1

const RENDER_DELAY = 100;

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

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

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

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

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

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

პირველი, რაც უნდა გააკეთოთ, არის იმის გარკვევა, თუ რას აკეთებს currentServerTime(). როგორც ადრე ვნახეთ, თამაშის ყველა განახლება შეიცავს სერვერის დროის ნიშანს. ჩვენ გვინდა გამოვიყენოთ რენდერის შეყოვნება, რათა გამოვიტანოთ სურათი 100მმ-ით სერვერის უკან, მაგრამ ჩვენ ვერასოდეს გავიგებთ სერვერზე მიმდინარე დროს, რადგან ჩვენ არ ვიცით რამდენი დრო დასჭირდა რომელიმე განახლების ჩვენამდე მისვლას. ინტერნეტი არაპროგნოზირებადია და მისი სიჩქარე შეიძლება მნიშვნელოვნად განსხვავდებოდეს!

ამ პრობლემის გადასაჭრელად, ჩვენ შეგვიძლია გამოვიყენოთ გონივრული მიახლოება: ჩვენ მოდით ვიფიქროთ, რომ პირველი განახლება მყისიერად მოვიდა. თუ ეს სიმართლე იყო, მაშინ ჩვენ გვეცოდინება სერვერის დრო იმ კონკრეტულ მომენტში! ჩვენ ვინახავთ სერვერის დროის ნიშანს firstServerTimestamp და გადავარჩინოთ ჩვენი ადგილობრივი (კლიენტი) დროის ანაბეჭდი იმავე მომენტში gameStart.

Მოიცადე. ეს არ უნდა იყოს სერვერის დრო = კლიენტის დრო? რატომ განვასხვავებთ „სერვერის დროის ნიშანს“ და „კლიენტის დროის ნიშანს“ შორის? ეს დიდი კითხვაა! გამოდის, რომ ეს არ არის ერთი და იგივე. Date.now() დააბრუნებს სხვადასხვა დროის ნიშანს კლიენტსა და სერვერზე და ეს დამოკიდებულია ამ მანქანების ადგილობრივ ფაქტორებზე. არასოდეს იფიქროთ, რომ დროის ანაბეჭდები ყველა მანქანაზე ერთნაირი იქნება.

ახლა ჩვენ გვესმის, რას აკეთებს currentServerTime(): ბრუნდება სერვერის დროის ანაბეჭდი მიმდინარე რენდერის დროის. სხვა სიტყვებით რომ ვთქვათ, ეს არის სერვერის მიმდინარე დრო (firstServerTimestamp <+ (Date.now() - gameStart)) მინუს გადაცემის დაგვიანება (RENDER_DELAY).

ახლა მოდით შევხედოთ, თუ როგორ ვაწარმოებთ თამაშის განახლებებს. როდესაც განახლება მიიღება სერვერიდან, მას ეძახიან processGameUpdate()და ჩვენ ვინახავთ ახალ განახლებას მასივში gameUpdates. შემდეგ, მეხსიერების გამოყენების შესამოწმებლად, ჩვენ ვშლით ყველა ძველ განახლებას ბაზის განახლებარადგან ისინი აღარ გვჭირდება.

რა არის „ძირითადი განახლება“? ეს პირველი განახლება, რომელსაც ვპოულობთ სერვერის მიმდინარე დროიდან უკან გადაადგილებით. გახსოვთ ეს დიაგრამა?

თამაშის განახლება პირდაპირ "Client Render Time"-ის მარცხნივ არის საბაზისო განახლება.

რისთვის გამოიყენება ბაზის განახლება? რატომ შეგვიძლია ჩამოვაგდოთ განახლებები ბაზაზე? ამის გასაგებად, მოდით ბოლოს და ბოლოს განიხილეთ განხორციელება getCurrentState():

state.js, ნაწილი 2

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

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

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

ჩვენ განვიხილავთ სამ შემთხვევას:

1. base < 0 ნიშნავს, რომ არ არის განახლებები მიმდინარე რენდერის დრომდე (იხ. ზემოთ განხორციელების getBaseUpdate()). ეს შეიძლება მოხდეს თამაშის დაწყებისთანავე, რენდერის ჩამორჩენის გამო. ამ შემთხვევაში, ჩვენ ვიყენებთ მიღებულ უახლეს განახლებას.
2. base არის უახლესი განახლება, რაც გვაქვს. ეს შეიძლება მოხდეს ქსელის შეყოვნების ან ცუდი ინტერნეტის გამო. ამ შემთხვევაშიც ჩვენ ვიყენებთ უახლეს განახლებას, რაც გვაქვს.
3. ჩვენ გვაქვს განახლება როგორც მიმდინარე რენდერის დრომდე, ასევე მის შემდეგ, ასე რომ, შეგვიძლია ინტერპოლაცია!

ყველაფერი რაც შემორჩა state.js არის ხაზოვანი ინტერპოლაციის განხორციელება, რომელიც მარტივი (მაგრამ მოსაწყენი) მათემატიკაა. თუ გსურთ თავად შეისწავლოთ, მაშინ გახსენით state.js on Github.

ნაწილი 2. Backend სერვერი

ამ ნაწილში ჩვენ გადავხედავთ Node.js backend-ს, რომელიც აკონტროლებს ჩვენს .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 კონფიგურაციებს. ჩვენ გამოვიყენებთ მათ ორი გზით:

• გამოიყენეთ webpack-dev-middleware რომ ავტომატურად აღვადგინოთ ჩვენი განვითარების პაკეტები, ან
• სტატიკურად გადაიტანეთ საქაღალდე dist/, რომელშიც Webpack ჩაწერს ჩვენს ფაილებს წარმოების შექმნის შემდეგ.

კიდევ ერთი მნიშვნელოვანი ამოცანა server.js შედგება სერვერის დაყენებისგან სოკეტირომელიც უბრალოდ უკავშირდება Express სერვერს:

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 კავშირის წარმატებით დამყარების შემდეგ, ჩვენ ვაკონფიგურირებთ მოვლენის დამმუშავებლებს ახალი სოკეტისთვის. მოვლენის დამმუშავებლები ამუშავებენ კლიენტებისგან მიღებულ შეტყობინებებს singleton ობიექტზე დელეგირებით 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ასე რომ, ჩვენ არ გვჭირდება ამაზე ფიქრი. მე მას დავურეკავ მოთამაშის ID.

ამის გათვალისწინებით, მოდით გამოვიკვლიოთ ინსტანციის ცვლადები კლასში Game:

• sockets არის ობიექტი, რომელიც აკავშირებს მოთამაშის ID-ს სოკეტთან, რომელიც დაკავშირებულია მოთამაშესთან. ის საშუალებას გვაძლევს, დროთა განმავლობაში, წვდომა მივიღოთ სოკეტებზე მათი მოთამაშის ID-ებით.
• players არის ობიექტი, რომელიც აკავშირებს მოთამაშის ID-ს კოდთან>მოთამაშის ობიექტთან

bullets არის ობიექტების მასივი Bullet, რომელსაც არ აქვს გარკვეული წესრიგი.
lastUpdateTime - ეს არის თამაშის ბოლო განახლების დრო. მალე ვნახოთ როგორ გამოიყენებს.
shouldSendUpdate არის დამხმარე ცვლადი. ჩვენ ასევე ვნახავთ მის გამოყენებას მალე.
მეთოდები addPlayer(), removePlayer() и handleInput() არ არის საჭირო ახსნა, ისინი გამოიყენება server.js. თუ მეხსიერების განახლება გჭირდებათ, დაბრუნდით ცოტა მაღლა.

ბოლო ხაზი constructor() იწყება განახლების ციკლი თამაშები (60 განახლების სიხშირით / წმ):

game.js, ნაწილი 2

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

class Game {
  // ...

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

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

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

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

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

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

  // ...
}

მეთოდი update() შეიცავს სერვერის მხარის ლოგიკის ალბათ ყველაზე მნიშვნელოვან ნაწილს. მოდით ჩამოვთვალოთ ყველაფერი, რასაც აკეთებს თანმიმდევრობით:

1. ითვლის რომელი საათია dt ეს არის ბოლოდან update().
2. განაახლებს თითოეულ ჭურვს და საჭიროების შემთხვევაში ანადგურებს მათ. ამ ფუნქციის განხორციელებას მოგვიანებით ვიხილავთ. ჯერჯერობით საკმარისია ამის ცოდნა bullet.update() ბრუნდება trueთუ ჭურვი უნდა განადგურდეს (ის არენიდან გავიდა).
3. განაახლებს თითოეულ მოთამაშეს და საჭიროების შემთხვევაში ქმნის ჭურვებს. ჩვენ ასევე ვიხილავთ ამ განხორციელებას მოგვიანებით - player.update() შეუძლია ობიექტის დაბრუნება Bullet.
4. ამოწმებს შეჯახებას ჭურვებსა და მოთამაშეებს შორის applyCollisions(), რომელიც აბრუნებს ჭურვების მასივს, რომელიც მოხვდა მოთამაშეებს. თითოეული დაბრუნებული ჭურვისთვის, ჩვენ ვზრდით იმ მოთამაშის ქულას, რომელმაც ის ისროლა (გამოყენებით player.onDealtDamage()) და შემდეგ ამოიღეთ ჭურვი მასივიდან bullets.
5. აცნობებს და ანადგურებს ყველა მოკლულ მოთამაშეს.
6. უგზავნის თამაშის განახლებას ყველა მოთამაშეს ყოველ წამს ჯერ როცა იძახიან update(). ეს გვეხმარება თვალყური ადევნოთ ზემოთ ნახსენებ დამხმარე ცვლადს. shouldSendUpdate... როგორც update() დარეკვა 60-ჯერ/წმ, ჩვენ ვაგზავნით თამაშის განახლებებს 30-ჯერ/წმ. ამრიგად, საათის სიხშირე სერვერის საათი არის 30 საათი/წმ (ჩვენ პირველ ნაწილში ვისაუბრეთ საათის განაკვეთებზე).

რატომ გაგზავნეთ მხოლოდ თამაშის განახლებები დროთა განმავლობაში ? არხის შესანახად. თამაშის 30 განახლება წამში ბევრია!

რატომ არ დარეკე მაშინ? update() 30 ჯერ წამში? თამაშის სიმულაციის გასაუმჯობესებლად. რაც უფრო ხშირად ეძახიან update(), მით უფრო ზუსტი იქნება თამაშის სიმულაცია. ოღონდ ძალიან ნუ გაიტაცებთ გამოწვევების რაოდენობას. update(), რადგან ეს გამოთვლებით ძვირი დავალებაა - წამში 60 საკმარისია.

დანარჩენი კლასი Game შედგება დამხმარე მეთოდებისგან, რომლებიც გამოიყენება update():

game.js, ნაწილი 3

class Game {
  // ...

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

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

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

getLeaderboard() ეს საკმაოდ მარტივია - ის ახარისხებს მოთამაშეებს ქულების მიხედვით, იღებს ხუთეულს და აბრუნებს მომხმარებლის სახელს და ქულას თითოეულისთვის.

createUpdate() გამოიყენება update() თამაშის განახლებების შესაქმნელად, რომლებიც ნაწილდება მოთამაშეებზე. მისი მთავარი ამოცანაა მეთოდების გამოძახება serializeForUpdate(), განხორციელებული კლასებისთვის Player и Bullet. გაითვალისწინეთ, რომ ის მხოლოდ მონაცემებს გადასცემს თითოეულ მოთამაშეს შესახებ უახლოესი მოთამაშეები და ჭურვები - არ არის საჭირო ინფორმაციის გადაცემა თამაშის ობიექტების შესახებ, რომლებიც მოთამაშისგან შორს არიან!

3. თამაშის ობიექტები სერვერზე

ჩვენს თამაშში ჭურვები და მოთამაშეები რეალურად ძალიან ჰგვანან ერთმანეთს: ისინი აბსტრაქტული მრგვალი მოძრავი თამაშის ობიექტებია. იმისათვის, რომ ვისარგებლოთ ამ მსგავსებით მოთამაშეებსა და ჭურვებს შორის, დავიწყოთ საბაზისო კლასის განხორციელებით Object:

ობიექტი.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:

ტყვია.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:

მოთამაშე.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:

თამაში.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.

აი, როგორ გამოიყურება ჩვენი შეჯახების გამოვლენის განხორციელება:

შეჯახებები.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