ការបង្កើតហ្គេមបណ្តាញ .io អ្នកលេងច្រើន។

ចេញផ្សាយនៅឆ្នាំ 2015 អាហ្គៀ។ បានក្លាយជាបុព្វបុរសនៃប្រភេទថ្មី។ ហ្គេម .ioដែល​បាន​កើន​ឡើង​នៅ​ក្នុង​ប្រជាប្រិយភាព​ចាប់​តាំង​ពី​ពេល​នោះ​មក​។ ខ្ញុំបានជួបប្រទះដោយផ្ទាល់នូវការកើនឡើងនៃប្រជាប្រិយភាពនៃហ្គេម .io៖ ក្នុងរយៈពេលបីឆ្នាំកន្លងមកនេះ ខ្ញុំមាន បានបង្កើត និងលក់ហ្គេមពីរប្រភេទនេះ។.

ក្នុងករណីដែលអ្នកមិនធ្លាប់បានឮអំពីហ្គេមទាំងនេះពីមុនមក ទាំងនេះគឺជាហ្គេមអនឡាញដែលមានអ្នកលេងច្រើនដោយឥតគិតថ្លៃ ដែលងាយស្រួលលេង (មិនចាំបាច់មានគណនី)។ ជាធម្មតាពួកគេប្រឈមមុខនឹងអ្នកលេងប្រឆាំងជាច្រើននៅក្នុងសង្វៀនតែមួយ។ ហ្គេម .io ល្បីៗផ្សេងទៀត៖ Slither.io и ឌីភីអូអូ.

នៅក្នុងការប្រកាសនេះយើងនឹងស្វែងយល់ពីរបៀប បង្កើតហ្គេម .io ពីដំបូង. ចំពោះបញ្ហានេះ មានតែចំណេះដឹងអំពី Javascript ប៉ុណ្ណោះនឹងគ្រប់គ្រាន់៖ អ្នកត្រូវយល់អ្វីៗដូចជាវាក្យសម្ព័ន្ធ ES6, ពាក្យគន្លឹះ this и ការសន្យា។. ទោះបីជាចំណេះដឹងរបស់អ្នកអំពី Javascript មិនល្អឥតខ្ចោះក៏ដោយ អ្នកនៅតែអាចយល់ភាគច្រើននៃប្រកាស។

ឧទាហរណ៍នៃហ្គេម .io

សម្រាប់ជំនួយការរៀនសូត្រ យើងនឹងយោងទៅ ឧទាហរណ៍នៃហ្គេម .io. សាកលេងទៅ!

ហ្គេមនេះគឺសាមញ្ញណាស់៖ អ្នកគ្រប់គ្រងកប៉ាល់នៅក្នុងសង្វៀនដែលមានអ្នកលេងផ្សេងទៀត។ កប៉ាល់របស់អ្នកបាញ់កាំជ្រួចដោយស្វ័យប្រវត្តិ ហើយអ្នកព្យាយាមវាយប្រហារអ្នកលេងផ្សេងទៀត ខណៈពេលដែលជៀសវាងការបាញ់របស់ពួកគេ។

1. ទិដ្ឋភាពសង្ខេប / រចនាសម្ព័ន្ធនៃគម្រោង

ខ្ញុំសូមណែនាំ ទាញយកកូដប្រភព ឧទាហរណ៍ហ្គេម ដូច្នេះអ្នកអាចធ្វើតាមខ្ញុំ។

ឧទាហរណ៍ប្រើដូចខាងក្រោមៈ

• Express គឺជាក្របខ័ណ្ឌគេហទំព័រ Node.js ដែលពេញនិយមបំផុតដែលគ្រប់គ្រងម៉ាស៊ីនមេគេហទំព័ររបស់ហ្គេម។
• socket.io - បណ្ណាល័យ websocket សម្រាប់ផ្លាស់ប្តូរទិន្នន័យរវាង browser និង server ។
• វ៉ាយវែប។ - អ្នកគ្រប់គ្រងម៉ូឌុល។ អ្នកអាចអានអំពីមូលហេតុដែលត្រូវប្រើ 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 របស់យើង៖

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 នៃ ​​Webpack build របស់យើងនឹងមានទីតាំងនៅក្នុងថត dist/. ខ្ញុំនឹងហៅឯកសារនេះរបស់យើង។ កញ្ចប់ js.
• យើង​ប្រើ បាបិលនិងជាពិសេសការកំណត់រចនាសម្ព័ន្ធ @babel/preset-env ដើម្បីចម្លងកូដ JS របស់យើងសម្រាប់កម្មវិធីរុករកចាស់។
• យើងកំពុងប្រើកម្មវិធីជំនួយដើម្បីទាញយក CSS ទាំងអស់ដែលយោងដោយឯកសារ JS ហើយបញ្ចូលពួកវានៅកន្លែងតែមួយ។ ខ្ញុំនឹងហៅគាត់ថារបស់យើង។ កញ្ចប់ css.

អ្នកប្រហែលជាបានកត់សម្គាល់ឃើញឈ្មោះឯកសារកញ្ចប់ចម្លែក '[name].[contenthash].ext'. ពួកវាមាន ការជំនួសឈ្មោះឯកសារ គេហទំព័រ [name] នឹងត្រូវបានជំនួសដោយឈ្មោះនៃចំណុចបញ្ចូល (ក្នុងករណីរបស់យើង នេះ។ game) និង [contenthash] នឹងត្រូវបានជំនួសដោយ hash នៃមាតិការបស់ឯកសារ។ យើងធ្វើវាទៅ បង្កើនប្រសិទ្ធភាពគម្រោងសម្រាប់ hashing - អ្នកអាចប្រាប់កម្មវិធីរុករកឱ្យរក្សាទុកកញ្ចប់ 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 ហ្គេម  លេង

ឧទាហរណ៍កូដនេះត្រូវបានធ្វើឱ្យសាមញ្ញបន្តិចសម្រាប់ភាពច្បាស់លាស់ ហើយខ្ញុំនឹងធ្វើដូចគ្នាជាមួយនឹងឧទាហរណ៍នៃការបង្ហោះផ្សេងទៀតជាច្រើន។ លេខកូដពេញអាចមើលបានគ្រប់ពេល 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. កំណត់ឧបករណ៍ដោះស្រាយសម្រាប់ការចុចប៊ូតុង "លេង" ។ នៅពេលដែលប៊ូតុងត្រូវបានចុច លេខកូដចាប់ផ្តើមហ្គេម ហើយប្រាប់ម៉ាស៊ីនមេថាយើងរួចរាល់ក្នុងការលេង។

"សាច់" សំខាន់នៃតក្កវិជ្ជាម៉ាស៊ីនបម្រើអតិថិជនរបស់យើងគឺនៅក្នុងឯកសារទាំងនោះដែលត្រូវបាននាំចូលដោយឯកសារ 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. ការបង្ហាញអតិថិជន

ដល់ពេលបង្ហាញរូបភាពនៅលើអេក្រង់ហើយ!

… ប៉ុន្តែមុននឹងយើងអាចធ្វើវាបាន យើងត្រូវទាញយករូបភាពទាំងអស់ (ធនធាន) ដែលត្រូវការសម្រាប់ការនេះ។ តោះសរសេរអ្នកគ្រប់គ្រងធនធាន៖

ទ្រព្យសកម្ម.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. ការបញ្ចូលរបស់អតិថិជន

ដល់ពេលបង្កើតហ្គេមហើយ។ អាចលេងបាន។! គ្រោងការណ៍បញ្ជានឹងមានលក្ខណៈសាមញ្ញណាស់៖ ដើម្បីផ្លាស់ប្តូរទិសដៅនៃចលនាអ្នកអាចប្រើកណ្តុរ (នៅលើកុំព្យូទ័រ) ឬប៉ះអេក្រង់ (នៅលើឧបករណ៍ចល័ត) ។ ដើម្បីអនុវត្តវាយើងនឹងចុះឈ្មោះ អ្នកស្តាប់ព្រឹត្តិការណ៍ សម្រាប់ព្រឹត្តិការណ៍ Mouse និង Touch។
នឹងថែរក្សាអ្វីៗទាំងអស់នេះ 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៖ ព័ត៌មានអំពីអ្នកលេងដែលទទួលបានការអាប់ដេតនេះ។
• អ្នកផ្សេងទៀត៖ អារេនៃព័ត៌មានអំពីអ្នកលេងផ្សេងទៀតដែលចូលរួមក្នុងហ្គេមដូចគ្នា។
• គ្រាប់កាំភ្លើង៖ អារេនៃព័ត៌មានអំពី projectiles នៅក្នុងហ្គេម។
• តារាងពិន្ទុ៖ ទិន្នន័យតារាងពិន្ទុបច្ចុប្បន្ន។ នៅក្នុងការប្រកាសនេះយើងនឹងមិនពិចារណាពួកគេទេ។

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 ដងក្នុងមួយវិនាទី បន្ទាប់មកពាក់កណ្តាលនៃការហៅទូរស័ព្ទទាំងនេះនឹងគ្រាន់តែគូរឡើងវិញនូវរឿងដដែលនេះ ដោយមិនចាំបាច់ធ្វើអ្វីទាំងអស់។ បញ្ហាមួយទៀតជាមួយការអនុវត្តឆោតល្ងង់គឺថាវា។ ងាយនឹងពន្យារពេល. ជាមួយនឹងល្បឿនអ៊ីនធឺណិតដ៏ល្អ អតិថិជននឹងទទួលបានការអាប់ដេតហ្គេមយ៉ាងពិតប្រាកដរៀងរាល់ 33ms (30 ក្នុងមួយវិនាទី)៖

ជាអកុសល គ្មានអ្វីល្អឥតខ្ចោះទេ។ រូបភាពជាក់ស្តែងជាងនេះនឹងមានៈ

ការអនុវត្តដោយឆោតល្ងង់គឺជាករណីដ៏អាក្រក់បំផុតនៅពេលដែលវាមកដល់ភាពយឺតយ៉ាវ។ ប្រសិនបើការអាប់ដេតហ្គេមត្រូវបានទទួលជាមួយនឹងការពន្យាពេល 50ms នោះ តូបអតិថិជន បន្ថែម 50ms ព្រោះវានៅតែបង្ហាញស្ថានភាពហ្គេមពីការអាប់ដេតពីមុន។ អ្នក​អាច​ស្រមៃ​មើល​ថា​តើ​វា​មិន​ស្រួល​សម្រាប់​អ្នក​លេង​ប៉ុណ្ណា៖ ការ​ចាប់​ហ្វ្រាំង​ដោយ​បំពាន​នឹង​ធ្វើ​ឱ្យ​ហ្គេម​មាន​អារម្មណ៍​កន្ត្រាក់ និង​មិន​ស្ថិតស្ថេរ។

7.2 ស្ថានភាពអតិថិជនប្រសើរឡើង

យើង​នឹង​ធ្វើ​ការ​កែ​លម្អ​មួយ​ចំនួន​ចំពោះ​ការ​អនុវត្ត​បែប​ឆោតល្ងង់។ ដំបូងយើងប្រើ ការពន្យាពេលនៃការបង្ហាញ សម្រាប់ 100 ms ។ នេះមានន័យថាស្ថានភាព "បច្ចុប្បន្ន" របស់អតិថិជននឹងតែងតែយឺតយ៉ាវនៅពីក្រោយស្ថានភាពនៃហ្គេមនៅលើម៉ាស៊ីនមេ 100ms ។ ឧទាហរណ៍ប្រសិនបើពេលវេលានៅលើម៉ាស៊ីនមេគឺ 150បន្ទាប់មកម៉ាស៊ីនភ្ញៀវនឹងបង្ហាញស្ថានភាពដែលម៉ាស៊ីនមេនៅពេលនោះ។ 50:

វាផ្តល់ឱ្យយើងនូវសតិបណ្ដោះអាសន្ន 100ms ដើម្បីរស់រានមានពេលវេលាធ្វើបច្ចុប្បន្នភាពហ្គេមដែលមិនអាចទាយទុកជាមុនបាន៖

ការទូទាត់សម្រាប់ការនេះនឹងមានជារៀងរហូត ភាពយឺតយ៉ាវនៃការបញ្ចូល សម្រាប់ 100 ms ។ នេះគឺជាការលះបង់តិចតួចសម្រាប់ការលេងហ្គេមរលូន - អ្នកលេងភាគច្រើន (ជាពិសេសអ្នកលេងធម្មតា) នឹងមិនកត់សម្គាល់ការពន្យារពេលនេះទេ។ វាកាន់តែងាយស្រួលសម្រាប់មនុស្សក្នុងការកែតម្រូវទៅនឹងភាពយឺត 100ms ថេរ ជាជាងការលេងជាមួយនឹងភាពយឺតដែលមិនអាចទាយទុកជាមុនបាន។

យើងក៏អាចប្រើបច្ចេកទេសមួយទៀតហៅថា ការព្យាករណ៍ពីភាគីអតិថិជនដែលធ្វើការងារបានល្អក្នុងការកាត់បន្ថយភាពយឺតយ៉ាវនៃការយល់ឃើញ ប៉ុន្តែនឹងមិនត្រូវបានគ្របដណ្តប់នៅក្នុងការប្រកាសនេះទេ។

ការកែលម្អមួយទៀតដែលយើងកំពុងប្រើគឺ អន្តរប៉ូលលីនេអ៊ែរ. ដោយសារ​ការ​បង្ហាញ​ភាពយឺតយ៉ាវ ជាធម្មតា​យើង​មាន​ការអាប់ដេត​យ៉ាងហោចណាស់​មួយ​មុន​ពេល​បច្ចុប្បន្ន​នៅក្នុង​ម៉ាស៊ីនភ្ញៀវ។ នៅពេលគេហៅ getCurrentState()យើងអាចប្រតិបត្តិបាន។ អន្តរប៉ូលលីនេអ៊ែរ រវាងការអាប់ដេតហ្គេមមុន និងក្រោយពេលវេលាបច្ចុប្បន្ននៅក្នុងម៉ាស៊ីនភ្ញៀវ៖

វាដោះស្រាយបញ្ហាអត្រាស៊ុម៖ ឥឡូវនេះយើងអាចបង្ហាញស៊ុមតែមួយគត់តាមអត្រាស៊ុមណាមួយដែលយើងចង់បាន!

7.3 ការអនុវត្តស្ថានភាពអតិថិជនដែលប្រសើរឡើង

ឧទាហរណ៍នៃការអនុវត្តនៅក្នុង src/client/state.js ប្រើទាំង render lag និង linear interpolation ប៉ុន្តែមិនយូរទេ។ ចូរបំបែកកូដជាពីរផ្នែក។ នេះគឺជាទីមួយ៖

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(). ដូចដែលយើងបានឃើញមុននេះ រាល់ការអាប់ដេតហ្គេមរួមបញ្ចូលការត្រាពេលវេលារបស់ម៉ាស៊ីនមេ។ យើងចង់ប្រើ render latency ដើម្បីបង្ហាញរូបភាព 100ms នៅខាងក្រោយ server ប៉ុន្តែ យើងនឹងមិនដឹងពីពេលវេលាបច្ចុប្បន្ននៅលើម៉ាស៊ីនមេទេ។ដោយ​សារ​តែ​យើង​មិន​អាច​ដឹង​ថា​តើ​វា​ត្រូវ​ចំណាយ​ពេល​ប៉ុន្មាន​សម្រាប់​ការ​អាប់ដេត​ណា​មួយ​ដើម្បី​មក​ដល់​យើង។ អ៊ីនធឺណែតមិនអាចទាយទុកជាមុនបាន ហើយល្បឿនរបស់វាអាចប្រែប្រួលយ៉ាងខ្លាំង!

ដើម្បីដោះស្រាយបញ្ហានេះ យើងអាចប្រើការប៉ាន់ស្មានសមហេតុផល៖ យើង ធ្វើពុតថាការអាប់ដេតដំបូងបានមកដល់ភ្លាមៗ. ប្រសិនបើនេះជាការពិត នោះយើងនឹងដឹងពីពេលវេលារបស់ម៉ាស៊ីនមេនៅពេលនេះ! យើងរក្សាទុកត្រាពេលវេលារបស់ម៉ាស៊ីនមេ 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),
    };
  }
}

យើងដោះស្រាយបីករណី៖

1. base < 0 មាន​ន័យ​ថា​មិន​មាន​ការ​ធ្វើ​ឱ្យ​ទាន់​សម័យ​រហូត​ដល់​ពេល​វេលា​បង្ហាញ​បច្ចុប្បន្ន (មើល​ការ​អនុវត្ត​ខាង​លើ getBaseUpdate()) វាអាចកើតឡើងភ្លាមៗនៅពេលចាប់ផ្តើមហ្គេម ដោយសារការបង្ហាញពីភាពយឺតយ៉ាវ។ ក្នុងករណីនេះ យើងប្រើការអាប់ដេតចុងក្រោយបំផុតដែលទទួលបាន។
2. base គឺជាការអាប់ដេតចុងក្រោយបំផុតដែលយើងមាន។ នេះអាចបណ្តាលមកពីការពន្យាពេលបណ្តាញ ឬការតភ្ជាប់អ៊ីនធឺណិតខ្សោយ។ ក្នុងករណីនេះ យើងក៏កំពុងប្រើការអាប់ដេតចុងក្រោយបំផុតដែលយើងមានផងដែរ។
3. យើងមានការអាប់ដេតទាំងមុន និងក្រោយពេលវេលា render បច្ចុប្បន្ន ដូច្នេះយើងអាចធ្វើបាន។ អន្តរប៉ូល។!

អ្វីទាំងអស់ដែលនៅសេសសល់ state.js គឺ​ជា​ការ​អនុវត្ត​នៃ​ការ​កាត់​បញ្ចូល​លីនេអ៊ែរ​ដែល​សាមញ្ញ (ប៉ុន្តែ​គួរ​ឱ្យ​ធុញ​) គណិតវិទ្យា។ ប្រសិនបើអ្នកចង់រុករកវាដោយខ្លួនឯង បន្ទាប់មកបើក state.js នៅលើ Github.

ផ្នែកទី 2. ម៉ាស៊ីនមេផ្នែកខាងក្រោយ

នៅក្នុងផ្នែកនេះ យើងនឹងពិនិត្យមើលផ្នែកខាងក្រោយ Node.js ដែលគ្រប់គ្រងរបស់យើង។ ឧទាហរណ៍នៃហ្គេម .io.

1. ចំណុចចូលម៉ាស៊ីនមេ

ដើម្បីគ្រប់គ្រង web server យើងនឹងប្រើ web framework ដ៏ពេញនិយមមួយសម្រាប់ Node.js ដែលហៅថា Express. វានឹងត្រូវបានកំណត់រចនាសម្ព័ន្ធដោយឯកសារចំណុចបញ្ចូលម៉ាស៊ីនមេរបស់យើង។ 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 គឺ​ដើម្បី​ដំឡើង​ម៉ាស៊ីន​បម្រើ socket.ioដែលគ្រាន់តែភ្ជាប់ទៅម៉ាស៊ីនមេ 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ដូច្នេះ យើង​មិន​ចាំបាច់​បារម្ភ​អំពី​រឿង​នោះ​ទេ។ ខ្ញុំនឹងហៅគាត់ លេខសម្គាល់អ្នកលេង.

ដោយគិតក្នុងចិត្តនោះ ចូរយើងស្វែងយល់ពីអថេរឧទាហរណ៍នៅក្នុងថ្នាក់មួយ។ Game:

• sockets គឺ​ជា​វត្ថុ​ដែល​ភ្ជាប់​លេខ​សម្គាល់​អ្នក​លេង​ទៅ​នឹង​រន្ធ​ដែល​មាន​ទំនាក់ទំនង​ជាមួយ​នឹង​អ្នក​លេង។ វាអនុញ្ញាតឱ្យយើងចូលប្រើរន្ធដោយលេខសម្គាល់អ្នកលេងរបស់ពួកគេក្នុងរយៈពេលថេរ។
• players គឺជាវត្ថុដែលភ្ជាប់ ID អ្នកលេងទៅនឹងកូដ> វត្ថុអ្នកលេង

bullets គឺជាអារេនៃវត្ថុ Bulletដែលមិនមានលំដាប់ច្បាស់លាស់។
lastUpdateTime គឺជាពេលវេលាចុងក្រោយដែលហ្គេមត្រូវបានអាប់ដេត។ យើង​នឹង​ឃើញ​ពី​របៀប​ដែល​វា​ត្រូវ​បាន​ប្រើ​ក្នុង​ពេល​ខ្លី។
shouldSendUpdate គឺជាអថេរជំនួយ។ យើងក៏នឹងឃើញការប្រើប្រាស់របស់វាក្នុងពេលឆាប់ៗនេះផងដែរ។
វិធីសាស្រ្ត។ addPlayer(), removePlayer() и handleInput() មិនចាំបាច់ពន្យល់ទេ គេប្រើក្នុង server.js. ប្រសិនបើអ្នកត្រូវការធ្វើឱ្យការចងចាំរបស់អ្នកឡើងវិញ សូមត្រលប់ទៅខ្ពស់ជាងនេះបន្តិច។

បន្ទាត់ចុងក្រោយ constructor() ចាប់ផ្តើម វដ្តធ្វើឱ្យទាន់សម័យ ហ្គេម (ជាមួយនឹងភាពញឹកញាប់នៃការធ្វើបច្ចុប្បន្នភាព 60 / s):

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()) ហើយបន្ទាប់មកយក projectile ចេញពី array 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:

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() ធ្វើការងារច្រើន ជាពិសេស ត្រឡប់ projectile ដែលទើបបង្កើតថ្មី ប្រសិនបើគ្មានសល់ 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