একটি মাল্টিপ্লেয়ার .io ওয়েব গেম তৈরি করা

2015 সালে মুক্তি পায় Agar.io একটি নতুন ধারার পূর্বপুরুষ হয়ে উঠেছে গেমস .ioযা তখন থেকে জনপ্রিয়তা বৃদ্ধি পেয়েছে। আমি ব্যক্তিগতভাবে .io গেমের জনপ্রিয়তা বৃদ্ধির অভিজ্ঞতা পেয়েছি: গত তিন বছরে, আমি করেছি এই ধারার দুটি গেম তৈরি এবং বিক্রি করেছে।.

আপনি যদি এই গেমগুলির কথা আগে কখনও শোনেন নি, তবে এইগুলি বিনামূল্যে মাল্টিপ্লেয়ার ওয়েব গেম যা খেলা সহজ (কোন অ্যাকাউন্টের প্রয়োজন নেই)। তারা সাধারণত একই অঙ্গনে অনেক বিরোধী খেলোয়াড়ের মুখোমুখি হয়। অন্যান্য বিখ্যাত .io গেম: Slither.io и ডায়িপ.ইও.

এই পোস্টে, আমরা কিভাবে অন্বেষণ করব স্ক্র্যাচ থেকে একটি .io গেম তৈরি করুন. এই জন্য, শুধুমাত্র জাভাস্ক্রিপ্ট জ্ঞান যথেষ্ট হবে: আপনি সিনট্যাক্স মত জিনিস বুঝতে হবে ES6, কীওয়ার্ড this и অঙ্গিকার. জাভাস্ক্রিপ্ট সম্পর্কে আপনার জ্ঞান নিখুঁত না হলেও, আপনি এখনও বেশিরভাগ পোস্ট বুঝতে পারেন।

io গেমের উদাহরণ

শেখার সহায়তার জন্য, আমরা উল্লেখ করব io গেমের উদাহরণ. এটা খেলার চেষ্টা করুন!

গেমটি বেশ সহজ: আপনি এমন একটি অঙ্গনে একটি জাহাজ নিয়ন্ত্রণ করেন যেখানে অন্যান্য খেলোয়াড় রয়েছে। আপনার জাহাজ স্বয়ংক্রিয়ভাবে প্রজেক্টাইল ফায়ার করে এবং আপনি তাদের প্রজেক্টাইল এড়িয়ে অন্য খেলোয়াড়দের আঘাত করার চেষ্টা করেন।

1. প্রকল্পের সংক্ষিপ্ত বিবরণ / কাঠামো

আমি সুপারিশ করছি সোর্স কোড ডাউনলোড করুন উদাহরণ গেম যাতে আপনি আমাকে অনুসরণ করতে পারেন।

উদাহরণ নিম্নলিখিত ব্যবহার করে:

• প্রকাশ করা সবচেয়ে জনপ্রিয় Node.js ওয়েব ফ্রেমওয়ার্ক যা গেমের ওয়েব সার্ভার পরিচালনা করে।
• socket.io - ব্রাউজার এবং সার্ভারের মধ্যে ডেটা আদান-প্রদানের জন্য একটি ওয়েবসকেট লাইব্রেরি।
• webpack - মডিউল ম্যানেজার। আপনি কেন Webpack ব্যবহার করবেন সে সম্পর্কে পড়তে পারেন। এখানে.

এখানে প্রজেক্ট ডিরেক্টরি গঠন দেখতে কেমন:

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

সর্বজনীন/

একটি ফোল্ডারে সবকিছু public/ সার্ভার দ্বারা স্থিরভাবে জমা দেওয়া হবে। ভিতরে 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 জাভাস্ক্রিপ্ট (JS) ক্লায়েন্টের এন্ট্রি পয়েন্ট। ওয়েবপ্যাক এখান থেকে শুরু হবে এবং অন্যান্য আমদানি করা ফাইলগুলির জন্য বারবার অনুসন্ধান করবে।
• আমাদের ওয়েবপ্যাক বিল্ডের আউটপুট JS ডিরেক্টরিতে অবস্থিত হবে dist/. আমি এই ফাইলটিকে আমাদের কল করব js প্যাকেজ.
• আমরা ব্যাবহার করি হট্টগোল, এবং বিশেষ করে কনফিগারেশন @babel/preset-env পুরানো ব্রাউজারগুলির জন্য আমাদের জেএস কোড ট্রান্সপিলিং করতে।
• আমরা একটি প্লাগইন ব্যবহার করছি JS ফাইল দ্বারা রেফারেন্সকৃত সমস্ত CSS বের করতে এবং সেগুলিকে এক জায়গায় একত্রিত করতে। আমি তাকে আমাদের ডাকব css প্যাকেজ.

আপনি অদ্ভুত প্যাকেজ ফাইলের নাম লক্ষ্য করেছেন '[name].[contenthash].ext'. তারা ধারণ করে ফাইলের নাম প্রতিস্থাপন ওয়েবপ্যাক: [name] ইনপুট পয়েন্টের নামের সাথে প্রতিস্থাপিত হবে (আমাদের ক্ষেত্রে, এটি game), এবং [contenthash] ফাইলের বিষয়বস্তুর একটি হ্যাশ দিয়ে প্রতিস্থাপিত হবে। আমরা এটা করতে হ্যাশিংয়ের জন্য প্রকল্পটি অপ্টিমাইজ করুন - আপনি ব্রাউজারগুলিকে আমাদের জেএস প্যাকেজগুলিকে অনির্দিষ্টকালের জন্য ক্যাশে করতে বলতে পারেন, কারণ যদি একটি প্যাকেজ পরিবর্তন হয়, তাহলে তার ফাইলের নামও পরিবর্তিত হয় (পরিবর্তন 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

এবং ওয়েব ব্রাউজারে যান স্থানীয় হোস্ট: 3000. কোড পরিবর্তিত হওয়ার সাথে সাথে ডেভেলপমেন্ট সার্ভার স্বয়ংক্রিয়ভাবে JS এবং CSS প্যাকেজগুলিকে পুনর্নির্মাণ করবে - সমস্ত পরিবর্তন দেখতে পৃষ্ঠাটি রিফ্রেশ করুন!

3. ক্লায়েন্ট এন্ট্রি পয়েন্ট

আসুন গেম কোড নিজেই নামুন. প্রথমে আমাদের একটি পৃষ্ঠা দরকার index.html, সাইটটি দেখার সময়, ব্রাউজার প্রথমে এটি লোড করবে। আমাদের পৃষ্ঠাটি বেশ সহজ হবে:

index.html

একটি উদাহরণ .io গেম  খেলা

এই কোড উদাহরণটি স্বচ্ছতার জন্য সামান্য সরলীকৃত করা হয়েছে, এবং আমি অন্যান্য পোস্ট উদাহরণগুলির সাথে একই কাজ করব। সম্পূর্ণ কোড সর্বদা দেখা যাবে গিটহাব.

আমাদের আছে:

• HTML5 ক্যানভাস উপাদান (<canvas>) যা আমরা গেমটি রেন্ডার করতে ব্যবহার করব।
• <link> আমাদের CSS প্যাকেজ যোগ করতে।
• <script> আমাদের জাভাস্ক্রিপ্ট প্যাকেজ যোগ করতে.
• ব্যবহারকারীর নাম সহ প্রধান মেনু <input> এবং প্লে বোতাম (<button>).

হোম পেজ লোড করার পরে, ব্রাউজার জাভাস্ক্রিপ্ট কোড কার্যকর করা শুরু করবে, এন্ট্রি পয়েন্ট JS ফাইল থেকে শুরু করে: src/client/index.js.

index.js

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

import './css/main.css';

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

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

এটি জটিল শোনাতে পারে, তবে এখানে খুব বেশি কিছু হচ্ছে না:

1. অন্যান্য বেশ কয়েকটি JS ফাইল আমদানি করা হচ্ছে।
2. সিএসএস আমদানি (তাই ওয়েবপ্যাক আমাদের সিএসএস প্যাকেজে তাদের অন্তর্ভুক্ত করতে জানে)।
3. আরম্ভ connect() সার্ভারের সাথে সংযোগ স্থাপন করতে এবং চালাতে downloadAssets() গেমটি রেন্ডার করার জন্য প্রয়োজনীয় ছবি ডাউনলোড করতে।
4. পর্যায় 3 সমাপ্তির পর প্রধান মেনু প্রদর্শিত হয় (playMenu).
5. "PLAY" বোতাম টিপানোর জন্য হ্যান্ডলার সেট করা হচ্ছে৷ বোতাম টিপলে, কোডটি গেমটি শুরু করে এবং সার্ভারকে বলে যে আমরা খেলতে প্রস্তুত।

আমাদের ক্লায়েন্ট-সার্ভার লজিকের প্রধান "মাংস" সেই ফাইলগুলিতে রয়েছে যা ফাইল দ্বারা আমদানি করা হয়েছিল index.js. এখন আমরা সেগুলিকে ক্রমানুসারে বিবেচনা করব।

4. গ্রাহকের তথ্য বিনিময়

এই গেমটিতে, আমরা সার্ভারের সাথে যোগাযোগ করার জন্য একটি সুপরিচিত লাইব্রেরি ব্যবহার করি socket.io. Socket.io এর নেটিভ সমর্থন রয়েছে ওয়েবসকেট, যা দ্বি-মুখী যোগাযোগের জন্য উপযুক্ত: আমরা সার্ভারে বার্তা পাঠাতে পারি и সার্ভার একই সংযোগে আমাদের কাছে বার্তা পাঠাতে পারে।

আমাদের একটি ফাইল থাকবে src/client/networking.jsকে দেখভাল করবে সবার দ্বারা সার্ভারের সাথে যোগাযোগ:

networking.js

import io from 'socket.io-client';
import { processGameUpdate } from './state';

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

const socket = io(`ws://${window.location.host}`);
const connectedPromise = new Promise(resolve => {
  socket.on('connect', () => {
    console.log('Connected to server!');
    resolve();
  });
});

export const connect = onGameOver => (
  connectedPromise.then(() => {
    // Register callbacks
    socket.on(Constants.MSG_TYPES.GAME_UPDATE, processGameUpdate);
    socket.on(Constants.MSG_TYPES.GAME_OVER, onGameOver);
  })
);

export const play = username => {
  socket.emit(Constants.MSG_TYPES.JOIN_GAME, username);
};

export const updateDirection = dir => {
  socket.emit(Constants.MSG_TYPES.INPUT, dir);
};

এই কোডটিও স্বচ্ছতার জন্য সামান্য সংক্ষিপ্ত করা হয়েছে।

এই ফাইলটিতে তিনটি প্রধান ক্রিয়া রয়েছে:

• আমরা সার্ভারের সাথে সংযোগ করার চেষ্টা করছি। connectedPromise শুধুমাত্র যখন আমরা একটি সংযোগ স্থাপন করি তখনই অনুমোদিত৷
• সংযোগ সফল হলে, আমরা কলব্যাক ফাংশন নিবন্ধন করি (processGameUpdate() и onGameOver()) আমরা সার্ভার থেকে বার্তা পেতে পারি।
• আমরা রপ্তানি করি play() и updateDirection()যাতে অন্যান্য ফাইল তাদের ব্যবহার করতে পারে।

5. ক্লায়েন্ট রেন্ডারিং

এটি পর্দায় ছবি প্রদর্শন করার সময়!

…কিন্তু আমরা তা করতে পারার আগে, এর জন্য প্রয়োজনীয় সমস্ত ছবি (সম্পদ) ডাউনলোড করতে হবে। আসুন একটি রিসোর্স ম্যানেজার লিখি:

assets.js

const ASSET_NAMES = ['ship.svg', 'bullet.svg'];

const assets = {};
const downloadPromise = Promise.all(ASSET_NAMES.map(downloadAsset));

function downloadAsset(assetName) {
  return new Promise(resolve => {
    const asset = new Image();
    asset.onload = () => {
      console.log(`Downloaded ${assetName}`);
      assets[assetName] = asset;
      resolve();
    };
    asset.src = `/assets/${assetName}`;
  });
}

export const downloadAssets = () => downloadPromise;
export const getAsset = assetName => assets[assetName];

সম্পদ ব্যবস্থাপনা বাস্তবায়ন করা কঠিন নয়! মূল ধারণা একটি বস্তু সংরক্ষণ করা হয় assets, যা ফাইলের নামের কীটিকে অবজেক্টের মানের সাথে আবদ্ধ করবে Image. যখন রিসোর্স লোড হয়, তখন আমরা এটি একটি বস্তুতে সংরক্ষণ করি assets ভবিষ্যতে দ্রুত অ্যাক্সেসের জন্য। কখন প্রতিটি পৃথক সংস্থান ডাউনলোড করার অনুমতি দেওয়া হবে (অর্থাৎ, সব সম্পদ), আমরা অনুমতি দিই downloadPromise.

সংস্থানগুলি ডাউনলোড করার পরে, আপনি রেন্ডারিং শুরু করতে পারেন। আগে যেমন বলা হয়েছে, ওয়েব পেজে আঁকার জন্য আমরা ব্যবহার করি HTML5 ক্যানভাস (<canvas>) আমাদের গেমটি বেশ সহজ, তাই আমাদের শুধুমাত্র নিম্নলিখিতগুলি আঁকতে হবে:

1. পটভূমি
2. প্লেয়ার জাহাজ
3. খেলার অন্যান্য খেলোয়াড়রা
4. শেল

এখানে গুরুত্বপূর্ণ স্নিপেট আছে src/client/render.js, যা উপরে তালিকাভুক্ত চারটি আইটেমকে ঠিক রেন্ডার করে:

render.js

import { getAsset } from './assets';
import { getCurrentState } from './state';

const Constants = require('../shared/constants');
const { PLAYER_RADIUS, PLAYER_MAX_HP, BULLET_RADIUS, MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Make the canvas fullscreen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function render() {
  const { me, others, bullets } = getCurrentState();
  if (!me) {
    return;
  }

  // Draw background
  renderBackground(me.x, me.y);

  // Draw all bullets
  bullets.forEach(renderBullet.bind(null, me));

  // Draw all players
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

// ... Helper functions here excluded

let renderInterval = null;
export function startRendering() {
  renderInterval = setInterval(render, 1000 / 60);
}
export function stopRendering() {
  clearInterval(renderInterval);
}

এই কোডটিও স্বচ্ছতার জন্য সংক্ষিপ্ত করা হয়েছে।

render() এই ফাইলের প্রধান কাজ। startRendering() и stopRendering() 60 FPS এ রেন্ডার লুপের সক্রিয়করণ নিয়ন্ত্রণ করুন।

স্বতন্ত্র রেন্ডারিং হেল্পার ফাংশনের কংক্রিট বাস্তবায়ন (যেমন renderBullet()) এটি গুরুত্বপূর্ণ নয়, তবে এখানে একটি সাধারণ উদাহরণ রয়েছে:

render.js

function renderBullet(me, bullet) {
  const { x, y } = bullet;
  context.drawImage(
    getAsset('bullet.svg'),
    canvas.width / 2 + x - me.x - BULLET_RADIUS,
    canvas.height / 2 + y - me.y - BULLET_RADIUS,
    BULLET_RADIUS * 2,
    BULLET_RADIUS * 2,
  );
}

মনে রাখবেন যে আমরা পদ্ধতিটি ব্যবহার করছি getAsset(), যা আগে দেখা গিয়েছিল asset.js!

আপনি যদি অন্যান্য রেন্ডারিং সহায়ক সম্পর্কে জানতে আগ্রহী হন, তাহলে বাকিটা পড়ুন। src/client/render.js.

6. ক্লায়েন্ট ইনপুট

এটি একটি খেলা তৈরি করার সময় খেলার যোগ্য! নিয়ন্ত্রণ স্কিমটি খুব সহজ হবে: চলাচলের দিক পরিবর্তন করতে, আপনি মাউস ব্যবহার করতে পারেন (একটি কম্পিউটারে) বা স্ক্রীনটি স্পর্শ করতে পারেন (একটি মোবাইল ডিভাইসে)। এটি বাস্তবায়নের জন্য, আমরা নিবন্ধন করব ইভেন্ট শ্রোতা মাউস এবং টাচ ইভেন্টের জন্য।
এসব দেখভাল করবে src/client/input.js:

input.js

import { updateDirection } from './networking';

function onMouseInput(e) {
  handleInput(e.clientX, e.clientY);
}

function onTouchInput(e) {
  const touch = e.touches[0];
  handleInput(touch.clientX, touch.clientY);
}

function handleInput(x, y) {
  const dir = Math.atan2(x - window.innerWidth / 2, window.innerHeight / 2 - y);
  updateDirection(dir);
}

export function startCapturingInput() {
  window.addEventListener('mousemove', onMouseInput);
  window.addEventListener('touchmove', onTouchInput);
}

export function stopCapturingInput() {
  window.removeEventListener('mousemove', onMouseInput);
  window.removeEventListener('touchmove', onTouchInput);
}

onMouseInput() и onTouchInput() ইভেন্ট শ্রোতা যে কল updateDirection() (এর networking.js) যখন একটি ইনপুট ইভেন্ট ঘটে (উদাহরণস্বরূপ, যখন মাউস সরানো হয়)। updateDirection() সার্ভারের সাথে মেসেজিং পরিচালনা করে, যা ইনপুট ইভেন্ট পরিচালনা করে এবং সেই অনুযায়ী গেমের অবস্থা আপডেট করে।

7. ক্লায়েন্ট স্ট্যাটাস

এই বিভাগটি পোস্টের প্রথম অংশে সবচেয়ে কঠিন। আপনি যদি প্রথমবার এটি পড়ার সময় এটি বুঝতে না পারেন তবে হতাশ হবেন না! এমনকি আপনি এটি এড়িয়ে যেতে পারেন এবং পরে এটিতে ফিরে আসতে পারেন।

ক্লায়েন্ট/সার্ভার কোডটি সম্পূর্ণ করার জন্য প্রয়োজনীয় ধাঁধার শেষ অংশটি অবস্থা. ক্লায়েন্ট রেন্ডারিং বিভাগ থেকে কোড স্নিপেট মনে আছে?

render.js

import { getCurrentState } from './state';

function render() {
  const { me, others, bullets } = getCurrentState();

  // Do the rendering
  // ...
}

getCurrentState() ক্লায়েন্টে আমাদের গেমের বর্তমান অবস্থা দিতে সক্ষম হওয়া উচিত যে কোন সময়ে সার্ভার থেকে প্রাপ্ত আপডেটের উপর ভিত্তি করে। এখানে একটি গেম আপডেটের একটি উদাহরণ যা সার্ভার পাঠাতে পারে:

{
  "t": 1555960373725,
  "me": {
    "x": 2213.8050880413657,
    "y": 1469.370893425012,
    "direction": 1.3082443894581433,
    "id": "AhzgAtklgo2FJvwWAADO",
    "hp": 100
  },
  "others": [],
  "bullets": [
    {
      "id": "RUJfJ8Y18n",
      "x": 2354.029197099604,
      "y": 1431.6848318262666
    },
    {
      "id": "ctg5rht5s",
      "x": 2260.546457727445,
      "y": 1456.8088728920968
    }
  ],
  "leaderboard": [
    {
      "username": "Player",
      "score": 3
    }
  ]
}

প্রতিটি গেম আপডেটে পাঁচটি অভিন্ন ক্ষেত্র রয়েছে:

• t: সার্ভার টাইমস্ট্যাম্প নির্দেশ করে যে এই আপডেটটি কখন তৈরি করা হয়েছিল৷
• me: এই আপডেট প্রাপ্ত প্লেয়ার সম্পর্কে তথ্য.
• অন্যদের: একই খেলায় অংশগ্রহণকারী অন্যান্য খেলোয়াড়দের সম্পর্কে তথ্যের একটি বিন্যাস।
• বুলেট: গেমে প্রজেক্টাইল সম্পর্কে তথ্যের একটি বিন্যাস।
• লিডারবোর্ডে: বর্তমান লিডারবোর্ড ডেটা। এই পোস্টে, আমরা তাদের বিবেচনা করব না।

7.1 নিষ্পাপ ক্লায়েন্টের অবস্থা

নিষ্পাপ বাস্তবায়ন getCurrentState() শুধুমাত্র সাম্প্রতিক প্রাপ্ত গেম আপডেটের ডেটা সরাসরি ফেরত দিতে পারে।

naive-state.js

let lastGameUpdate = null;

// Handle a newly received game update.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

চমৎকার এবং পরিষ্কার! কিন্তু যদি এটা সহজ ছিল. এই বাস্তবায়ন সমস্যাযুক্ত কারণগুলির মধ্যে একটি: এটি রেন্ডারিং ফ্রেম রেটকে সার্ভার ঘড়ির হারে সীমাবদ্ধ করে.

চক্রের হার: ফ্রেমের সংখ্যা (যেমন কল render()) প্রতি সেকেন্ড, বা FPS। গেমগুলি সাধারণত কমপক্ষে 60 FPS অর্জন করার চেষ্টা করে।

টিক রেট: যে ফ্রিকোয়েন্সিতে সার্ভার ক্লায়েন্টদের গেম আপডেট পাঠায়। এটি প্রায়শই ফ্রেমের হারের চেয়ে কম হয়. আমাদের গেমে, সার্ভারটি প্রতি সেকেন্ডে 30 চক্রের ফ্রিকোয়েন্সিতে চলে।

আমরা যদি গেমের সর্বশেষ আপডেট রেন্ডার করি, তাহলে FPS কখনই 30-এর বেশি হবে না, কারণ আমরা কখনই সার্ভার থেকে প্রতি সেকেন্ডে ৩০টির বেশি আপডেট পাই না. আমরা ডাকলেও render() প্রতি সেকেন্ডে 60 বার, তারপর এই কলগুলির অর্ধেক একই জিনিস পুনরায় আঁকবে, মূলত কিছুই করবে না। নিষ্পাপ বাস্তবায়নের সাথে আরেকটি সমস্যা হল যে এটি বিলম্ব প্রবণ. একটি আদর্শ ইন্টারনেট গতির সাথে, ক্লায়েন্ট প্রতি 33ms (30 প্রতি সেকেন্ডে) একটি গেম আপডেট পাবেন:

দুর্ভাগ্যক্রমে, কিছুই নিখুঁত নয়। একটি আরো বাস্তবসম্মত ছবি হবে:

নিষ্প্রভ বাস্তবায়ন কার্যত সবচেয়ে খারাপ ক্ষেত্রে যখন এটি বিলম্বিত হয়. যদি 50ms বিলম্বের সাথে একটি গেম আপডেট পাওয়া যায়, তাহলে ক্লায়েন্ট স্টল একটি অতিরিক্ত 50ms কারণ এটি এখনও পূর্ববর্তী আপডেট থেকে গেমের অবস্থা রেন্ডার করছে। আপনি কল্পনা করতে পারেন যে এটি খেলোয়াড়ের জন্য কতটা অস্বস্তিকর: নির্বিচারে ব্রেকিং খেলাটিকে ঝাঁকুনি এবং অস্থির করে তুলবে।

7.2 উন্নত ক্লায়েন্ট অবস্থা

আমরা নিষ্পাপ বাস্তবায়ন কিছু উন্নতি করা হবে. প্রথমত, আমরা ব্যবহার করি রেন্ডারিং বিলম্ব 100 ms জন্য এর মানে হল যে ক্লায়েন্টের "বর্তমান" অবস্থা সর্বদা সার্ভারে গেমের অবস্থা থেকে 100ms পিছিয়ে থাকবে। উদাহরণস্বরূপ, যদি সার্ভারে সময় থাকে 150, তারপর ক্লায়েন্ট সেই অবস্থায় রেন্ডার করবে যে সময়ে সার্ভারটি ছিল 50:

এটি আমাদের একটি 100ms বাফার দেয় অপ্রত্যাশিত গেম আপডেট সময় বেঁচে থাকার জন্য:

এর জন্য পাওনা স্থায়ী হবে ইনপুট ল্যাগ 100 ms জন্য মসৃণ গেমপ্লের জন্য এটি একটি ছোটখাটো ত্যাগ - বেশিরভাগ খেলোয়াড় (বিশেষত নৈমিত্তিক খেলোয়াড়) এমনকি এই বিলম্বটি লক্ষ্য করবেন না। এটি একটি অপ্রত্যাশিত বিলম্বের সাথে খেলার চেয়ে একটি স্থির 100ms লেটেন্সির সাথে সামঞ্জস্য করা অনেক সহজ।

আমরা নামক আরেকটি কৌশলও ব্যবহার করতে পারি ক্লায়েন্ট-সাইড পূর্বাভাস, যা অনুভূত লেটেন্সি কমাতে একটি ভাল কাজ করে, কিন্তু এই পোস্টে কভার করা হবে না।

আরেকটি উন্নতি আমরা ব্যবহার করছি রৈখিক ক্ষেপক. রেন্ডারিং ল্যাগের কারণে, আমরা সাধারণত ক্লায়েন্টের বর্তমান সময়ের থেকে অন্তত একটি আপডেট এগিয়ে থাকি। ডাকলে getCurrentState(), আমরা চালাতে পারি রৈখিক ক্ষেপক ক্লায়েন্টের বর্তমান সময়ের ঠিক আগে এবং পরে গেম আপডেটের মধ্যে:

এটি ফ্রেম রেট সমস্যার সমাধান করে: আমরা এখন যে কোনো ফ্রেম হারে অনন্য ফ্রেম রেন্ডার করতে পারি!

7.3 উন্নত ক্লায়েন্ট রাষ্ট্র বাস্তবায়ন

মধ্যে বাস্তবায়ন উদাহরণ src/client/state.js রেন্ডার ল্যাগ এবং লিনিয়ার ইন্টারপোলেশন উভয়ই ব্যবহার করে, কিন্তু দীর্ঘ সময়ের জন্য নয়। কোডটিকে দুটি ভাগে ভাগ করা যাক। এখানে প্রথম একটি:

state.js অংশ 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(). আমরা আগে দেখেছি, প্রতিটি গেম আপডেটে একটি সার্ভার টাইমস্ট্যাম্প অন্তর্ভুক্ত থাকে। আমরা সার্ভারের পিছনে 100ms ইমেজ রেন্ডার করতে রেন্ডার লেটেন্সি ব্যবহার করতে চাই, কিন্তু আমরা কখনই সার্ভারে বর্তমান সময় জানতে পারব না, কারণ আমরা জানি না যে কোনো আপডেট আমাদের কাছে পেতে কতক্ষণ লেগেছে। ইন্টারনেট অপ্রত্যাশিত এবং এর গতি ব্যাপকভাবে পরিবর্তিত হতে পারে!

এই সমস্যাটি পেতে, আমরা একটি যুক্তিসঙ্গত অনুমান ব্যবহার করতে পারি: আমরা প্রথম আপডেট অবিলম্বে আগত ভান. যদি এটি সত্য হয়, তাহলে আমরা এই বিশেষ মুহূর্তে সার্ভারের সময় জানতে পারতাম! আমরা সার্ভারের টাইমস্ট্যাম্প সংরক্ষণ করি 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. আমাদের বর্তমান রেন্ডার সময়ের আগে এবং পরে উভয়ই আপডেট আছে, তাই আমরা করতে পারি ইন্টারপোলেট!

যে সব বাকি আছে 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-midleware স্বয়ংক্রিয়ভাবে আমাদের উন্নয়ন প্যাকেজ পুনর্নির্মাণ করতে, বা
• স্থিরভাবে ফোল্ডার স্থানান্তর dist/, যেটিতে Webpack প্রোডাকশন বিল্ড করার পরে আমাদের ফাইলগুলি লিখবে।

আরেকটি গুরুত্বপূর্ণ কাজ 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() সম্ভবত সার্ভার-সাইড লজিকের সবচেয়ে গুরুত্বপূর্ণ অংশ রয়েছে। ক্রমানুসারে এটি যা করে তা এখানে:

1. কতক্ষণ হিসাব করে dt শেষ থেকে পাস update().
2. প্রতিটি প্রজেক্টাইল রিফ্রেশ করে এবং প্রয়োজনে তাদের ধ্বংস করে। আমরা পরে এই কার্যকারিতা বাস্তবায়ন দেখতে হবে. আপাতত আমাদের জন্য সেটা জানাই যথেষ্ট bullet.update() প্রত্যাবর্তন trueযদি প্রক্ষিপ্ত ধ্বংস করা উচিত (তিনি ময়দান থেকে বেরিয়ে আসেন)।
3. প্রতিটি খেলোয়াড়কে আপডেট করে এবং প্রয়োজনে একটি প্রজেক্টাইল তৈরি করে। আমরা পরে এই বাস্তবায়ন দেখতে পাব- player.update() একটি বস্তু ফেরত দিতে পারেন Bullet.
4. প্রজেক্টাইল এবং প্লেয়ারদের মধ্যে সংঘর্ষের জন্য পরীক্ষা করে applyCollisions(), যা খেলোয়াড়দের আঘাতকারী প্রজেক্টাইলের একটি অ্যারে প্রদান করে। প্রত্যাবর্তিত প্রতিটি প্রজেক্টাইলের জন্য, যে প্লেয়ারটি এটিকে গুলি করেছে আমরা তার পয়েন্ট বাড়াই (ব্যবহার করে player.onDealtDamage()) এবং তারপর অ্যারে থেকে প্রজেক্টাইলটি সরান bullets.
5. সমস্ত নিহত খেলোয়াড়কে অবহিত করে এবং ধ্বংস করে।
6. সমস্ত খেলোয়াড়দের একটি গেম আপডেট পাঠায় প্রতি মুহূর্ত বার যখন ডাকা হয় update(). এটি আমাদের উপরে উল্লিখিত অক্জিলিয়ারী ভেরিয়েবলের ট্র্যাক রাখতে সাহায্য করে। shouldSendUpdate. হিসাবে update() 60 বার/সেকেন্ড বলা হয়, আমরা 30 বার/সেকেন্ড গেম আপডেট পাঠাই। এইভাবে, ঘড়ি ফ্রিকোয়েন্সি সার্ভার ঘড়ি হল 30 ঘড়ি/সে (আমরা প্রথম অংশে ঘড়ির হার সম্পর্কে কথা বলেছি)।

কেন শুধুমাত্র গেম আপডেট পাঠান সময় মাধ্যমে ? চ্যানেল সংরক্ষণ করতে। প্রতি সেকেন্ডে ৩০টি গেম আপডেট অনেক!

শুধু ডাকবে না কেন update() প্রতি সেকেন্ডে ৩০ বার? গেম সিমুলেশন উন্নত করতে. আরো প্রায়ই বলা হয় 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:

বুলেট.জেএস

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