एक मल्टीप्लेयर .io वेब गेम बनाएं

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

यदि आपने पहले कभी इस तरह के खेलों के बारे में नहीं सुना है: ये मुफ्त मल्टीप्लेयर वेब गेम हैं जो (कोई खाता आवश्यक नहीं) में भाग लेना आसान है। आमतौर पर वे कई विरोधी खिलाड़ियों को एक ही क्षेत्र में धकेल देते हैं। .Io शैली के अन्य प्रसिद्ध खेल हैं: Slither.io और Diep.io.

इस पोस्ट में, हम यह पता लगाएंगे कि स्क्रैच से एक .io गेम कैसे बनाया जाए । इसके लिए, केवल जावास्क्रिप्ट का ज्ञान पर्याप्त होगा: आपको ES6 सिंटैक्स, this और प्रॉमिस जैसी चीजों को समझने की आवश्यकता है। भले ही आप जावास्क्रिप्ट को पूरी तरह से नहीं जानते हैं, फिर भी आप अधिकांश पोस्ट का पता लगा सकते हैं।

खेल उदाहरण .io

आपको सीखने में मदद करने के लिए, हम एक उदाहरण .io गेम का उल्लेख करेंगे। इसे खेलने की कोशिश करो!


खेल काफी सरल है: आप एक मैदान में एक जहाज को नियंत्रित करते हैं जहां अन्य खिलाड़ी हैं। आपका जहाज स्वचालित रूप से गोले दागता है और आप अन्य खिलाड़ियों को मारने की कोशिश करते हैं, जबकि उनके गोले से बचते हैं।

1. अवलोकन / परियोजना संरचना

मैं एक उदाहरण के खेल के लिए स्रोत कोड डाउनलोड करने की सलाह देता हूं ताकि आप मेरा अनुसरण कर सकें।

उदाहरण निम्नलिखित का उपयोग करता है:

• एक्सप्रेस Node.js के लिए सबसे लोकप्रिय वेब फ्रेमवर्क है जो गेम के वेब सर्वर का प्रबंधन करता है।
• socket.io - एक ब्राउज़र और सर्वर के बीच डेटा के आदान-प्रदान के लिए एक वेबसोकेट लाइब्रेरी।
• वेबपैक एक मॉड्यूल मैनेजर है। आप यहां वेबपैक का उपयोग करने के बारे में पढ़ सकते हैं।

यहां प्रोजेक्ट डायरेक्टरी स्ट्रक्चर कैसा दिखता है:

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

सार्वजनिक /

public/ फ़ोल्डर में सब कुछ सर्वर द्वारा सांख्यिकीय रूप से प्रेषित किया जाएगा। public/assets/ में हमारी परियोजना द्वारा उपयोग की जाने वाली छवियां शामिल हैं।

src /

सभी स्रोत कोड src/ folder में है। नाम 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 जावास्क्रिप्ट क्लाइंट (JS) के लिए इनपुट बिंदु है। वेबपैक यहां से शुरू होगा और अन्य आयातित फाइलों की पुनरावृत्ति करेगा।
• हमारे वेबपैक असेंबली का आउटपुट JS dist/ निर्देशिका में स्थित होगा। मैं इस फाइल को हमारे जेएस पैकेज कहूंगा।
• हम बैबल का उपयोग करते हैं, और विशेष रूप से @ जेस्सेल / प्रीसेट-एनवी कॉन्फ़िगरेशन पुराने ब्राउज़रों के लिए हमारे जेएस कोड को ट्रांसपाइल करने के लिए।
• हम जेएस फाइलों द्वारा संदर्भित सभी सीएसएस को निकालने और उन्हें एक स्थान पर संयोजित करने के लिए प्लगइन का उपयोग करते हैं। मैं इसे हमारे सीएसएस पैकेज कहूंगा।

आपने अजीब पैकेज फ़ाइल नामों पर ध्यान दिया हो सकता है '[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.dev.js का उपयोग करते webpack.dev.js , और उत्पादन में तैनात होने पर पैकेज आकारों को अनुकूलित करने के लिए webpack.prod.js पर स्विच करते हैं।

स्थानीय सेटिंग

मैं एक स्थानीय मशीन पर परियोजना को स्थापित करने की सलाह देता हूं ताकि आप इस पोस्ट में सूचीबद्ध चरणों का पालन कर सकें। सेटअप सरल है: पहले, नोड और एनपीएम को सिस्टम पर स्थापित किया जाना चाहिए। आगे आपको प्रदर्शन करने की आवश्यकता है

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

और आप जाने के लिए तैयार हैं! विकास सर्वर शुरू करने के लिए, बस चलाएं

 $ npm run develop 

और लोकलहोस्ट का उपयोग करें : वेब ब्राउजर में 3000 । कोड बदलते ही जेएस और सीएसएस पैकेजों का विकास सर्वर अपने आप फिर से तैयार हो जाएगा - सभी परिवर्तनों को देखने के लिए पृष्ठ को ताज़ा करें!

3. ग्राहक प्रवेश बिंदु

चलो खेल कोड के लिए ही नीचे आते हैं। सबसे पहले, हमें index.html पेज की आवश्यकता है, जब आप साइट पर जाते हैं, तो ब्राउज़र इसे पहले लोड करेगा। हमारा पृष्ठ काफी सरल होगा:

index.html

  <! DOCTYPE html>
 <Html>
 <Head>
   <शीर्षक> एक उदाहरण .io खेल </ शीर्षक>
   <लिंक प्रकार = "टेक्स्ट / सीएसएस" rel = "स्टाइलशीट" href = "/ game.bundle.css">
 </ Head>
 <Body>
   <कैनवास आईडी = "गेम-कैनवास"> </ कैनवास>
   <script async src = "/ game.bundle.js"> </ script>
   <div id = "play-menu" वर्ग = "छिपा हुआ">
     <इनपुट प्रकार = "टेक्स्ट" आईडी = "उपयोगकर्ता नाम-इनपुट" प्लेसहोल्डर = "उपयोगकर्ता नाम" />
     <बटन आईडी = "प्ले-बटन"> प्ले </ बटन>
   </ Div>
 </ Body>
 </ Html> 

यह कोड उदाहरण स्पष्टता के लिए थोड़ा सरल है, मैं पोस्ट के कई अन्य उदाहरणों के साथ भी ऐसा ही करूंगा। पूर्ण कोड हमेशा Github पर देखा जा सकता है।

हमारे पास है:

• एचटीएमएल 5 कैनवस ( <canvas> ) <canvas> जो हम गेम को रेंडर करने के लिए उपयोग करेंगे।
• हमारे सीएसएस पैकेज को जोड़ने के लिए <link> ।
• <script> हमारे जावास्क्रिप्ट पैकेज को जोड़ने के लिए।
• उपयोगकर्ता नाम <input> और "प्ले" ( <button> ) <button> साथ मुख्य मेनू।

होम पेज को लोड करने के बाद, जावास्क्रिप्ट कोड ब्राउज़र में निष्पादित करना शुरू कर देगा, प्रवेश बिंदु के जेएस फ़ाइल के साथ शुरू होगा: 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. कई अन्य जेएस फाइलें आयात करें।
2. आयात सीएसएस (ताकि वेबपैक हमारे सीएसएस पैकेज में उन्हें शामिल करना जानता है)।
3. सर्वर से कनेक्शन स्थापित करने के लिए रनिंग connect() और गेम को रेंडर करने के लिए आवश्यक छवियां डाउनलोड करने के लिए डाउनलोडअसैट downloadAssets() चल रहा है।
4. चरण 3 को पूरा करने के बाद , मुख्य मेनू ( playMenu ) playMenu जाता playMenu ।
5. PLAY बटन दबाने के लिए हैंडलर को कॉन्फ़िगर करना। जब बटन दबाया जाता है, तो कोड गेम को इनिशियलाइज़ करता है और सर्वर को बताता है कि हम खेलने के लिए तैयार हैं।

हमारे क्लाइंट-सर्वर लॉजिक का मुख्य "मांस" उन फाइलों में है, जिन्हें index.js फ़ाइल द्वारा आयात किया गया था। अब हम उन सभी पर विचार करेंगे।

4. ग्राहक डेटा का आदान-प्रदान

इस गेम में हम सर्वर के साथ संचार करने के लिए प्रसिद्ध सॉकेट.आईओ लाइब्रेरी का उपयोग करते हैं। Socket.io ने WebSockets के लिए अंतर्निहित समर्थन दिया है, जो दो-तरफ़ा संचार के लिए अच्छी तरह से अनुकूल हैं: हम सर्वर को संदेश भेज सकते हैं और सर्वर हमें उसी कनेक्शन पर संदेश भेज सकता है।

हमारे पास एक 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() निर्यात करते play() ताकि अन्य फाइलें उनका उपयोग कर सकें।

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 सक्षम करते हैं।

संसाधनों को डाउनलोड करने के बाद, आप प्रतिपादन शुरू कर सकते हैं। जैसा कि पहले कहा गया है, हम वेब पेज पर आकर्षित करने के लिए एचटीएमएल 5 कैनवस ( <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 में देखा गया था। 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() ( updateDirection() से updateDirection() कॉल updateDirection() । 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 : यह अद्यतन बनाया गया था उस समय के लिए सर्वर टाइमस्टैम्प।
• मुझे : इस अपडेट को प्राप्त करने वाले खिलाड़ी के बारे में जानकारी।
• अन्य : एक ही खेल में भाग लेने वाले अन्य खिलाड़ियों के बारे में जानकारी की एक सरणी।
• गोलियों : खेल में गोले के बारे में जानकारी की एक सरणी।
• लीडरबोर्ड : वर्तमान लीडरबोर्ड डेटा। इस पोस्ट में हम उन्हें ध्यान में नहीं लेंगे।

7.1 ग्राहक की अनुभवहीन अवस्था

getCurrentState() का भोली कार्यान्वयन केवल हाल ही में प्राप्त गेम अपडेट से सीधे डेटा लौटा सकता है।

भोली-state.js

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

सुंदर और स्पष्ट! लेकिन अगर सब कुछ इतना सरल था। इस कार्यान्वयन के कारणों में से एक समस्याग्रस्त है: यह सर्वर घड़ी की आवृत्ति को रेंडर की फ्रेम दर को सीमित करता है ।

फ्रेम दर : फ्रेम की संख्या (यानी render() कॉल) प्रति सेकंड या एफपीएस। खेल आमतौर पर कम से कम 60 एफपीएस तक पहुंचते हैं।

टिक दर : वह आवृत्ति जिस पर सर्वर ग्राहकों को गेम अपडेट भेजता है। अक्सर यह फ्रेम दर से कम होता है । हमारे खेल में, सर्वर 30 चक्र प्रति सेकंड की आवृत्ति पर चलता है।

यदि हम गेम के नवीनतम अपडेट को केवल प्रस्तुत करते हैं, तो एफपीएस वास्तव में कभी भी 30 से अधिक नहीं हो पाएगा, क्योंकि हमें सर्वर से प्रति सेकंड 30 से अधिक अपडेट कभी नहीं मिलते हैं । भले ही हम render() कॉल करते render() प्रति सेकंड 60 बार, इनमें से आधे कॉल केवल एक ही चीज़ को फिर से करेंगे, अनिवार्य रूप से कुछ भी नहीं कर रहे हैं। भोली कार्यान्वयन की एक और समस्या यह है कि इसमें देरी होने का खतरा है । एक आदर्श इंटरनेट स्पीड के साथ, क्लाइंट को हर 33 एमएस (प्रति सेकंड 30) का गेम अपडेट मिलेगा:


दुर्भाग्य से, कुछ भी सही नहीं है। एक अधिक यथार्थवादी चित्र होगा:

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

7.2 ग्राहक की स्थिति में सुधार

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


यह हमें 100 एमएस का बफर देता है, जिससे हमें गेम अपडेट प्राप्त करने के लिए अप्रत्याशित समय तक जीवित रहने की अनुमति मिलती है:


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

हम "क्लाइंट-साइड फोरकास्टिंग" नामक एक अन्य तकनीक का उपयोग कर सकते हैं , जो कथित देरी को कम करने का अच्छा काम करता है, लेकिन इस पोस्ट में विचार नहीं किया जाएगा।

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


यह फ्रेम दर के साथ समस्या को हल करता है: अब हम किसी भी आवृत्ति की आवश्यकता के साथ अद्वितीय फ्रेम प्रदान कर सकते हैं!

7.3 एन्हांस्ड क्लाइंट स्थिति लागू करना

src/client/state.js में एक उदाहरण कार्यान्वयन रेंडरिंग देरी और रैखिक प्रक्षेप दोनों का उपयोग करता है, लेकिन यह लंबे समय तक नहीं है। कोड को दो भागों में तोड़ते हैं। यहाँ पहले एक है:

State.js भाग 1

 const RENDER_DELAY = 100; const gameUpdates = []; let gameStart = 0; let firstServerTimestamp = 0; export function initState() { gameStart = 0; firstServerTimestamp = 0; } export function processGameUpdate(update) { if (!firstServerTimestamp) { firstServerTimestamp = update.t; gameStart = Date.now(); } gameUpdates.push(update); // Keep only one game update before the current server time const base = getBaseUpdate(); if (base > 0) { gameUpdates.splice(0, base); } } function currentServerTime() { return firstServerTimestamp + (Date.now() - gameStart) - RENDER_DELAY; } // Returns the index of the base update, the first game update before // current server time, or -1 if N/A. function getBaseUpdate() { const serverTime = currentServerTime(); for (let i = gameUpdates.length - 1; i >= 0; i--) { if (gameUpdates[i].t <= serverTime) { return i; } } return -1; } 

पहला कदम यह पता लगाना है कि currentServerTime() क्या करता है। जैसा कि हमने पहले देखा, हर गेम अपडेट में एक सर्वर टाइमस्टैम्प शामिल होता है। हम सर्वर के पीछे छवि 100 एमएस को रेंडर करने के लिए रेंडरिंग देरी का उपयोग करना चाहते हैं, लेकिन हम कभी भी सर्वर पर वर्तमान समय को नहीं जान पाएंगे , क्योंकि हम यह नहीं जान सकते कि कोई भी अपडेट हमें कब तक मिला। इंटरनेट अप्रत्याशित है और इसकी गति बहुत भिन्न हो सकती है!

इस समस्या को हल करने के लिए, आप एक उचित अनुमान का उपयोग कर सकते हैं: हम इस बात का ढोंग करेंगे कि पहला अपडेट तुरंत आ गया । यदि यह सच होता, तो हमें इस विशेष समय में सर्वर का समय पता होता! हम पहले सर्वर में टाइमस्टैम्प को सेव करते हैं और firstServerTimestamp में उसी समय अपने लोकल (क्लाइंट) टाइमस्टैम्प को gameStart ।

ओह रुको। क्या क्लाइंट में सर्वर = समय नहीं होना चाहिए? हम "सर्वर टाइमस्टैम्प" और "क्लाइंट टाइमस्टैम्प" के बीच अंतर क्यों करते हैं? यह एक महान प्रश्न है! यह पता चला कि यह एक ही बात नहीं है। Date.now() क्लाइंट और सर्वर में अलग-अलग टाइमस्टैम्प लौटाएगा, और यह इन मशीनों के लिए स्थानीय कारकों पर निर्भर करता है। यह कभी न मानें कि टाइमस्टैम्प सभी मशीनों पर समान हैं।

अब हम समझते हैं कि currentServerTime() क्या करता है: यह वर्तमान रेंडरिंग समय के लिए सर्वर का टाइमस्टैम्प लौटाता है।दूसरे शब्दों में, यह वर्तमान सर्वर समय है ( firstServerTimestamp <+ (Date.now() - gameStart)) ऋण देने में देरी ( RENDER_DELAY)।

अब देखते हैं कि हम गेम अपडेट को कैसे संभालते हैं। जब सर्वर से कोई अपडेट प्राप्त होता है, तो उसे कॉल किया जाता है processGameUpdate(), और हम नए अपडेट को एक अरै में सेव करते हैं gameUpdates। फिर, मेमोरी उपयोग की जांच करने के लिए, हम सभी पुराने अपडेट को आधार अपडेट में हटा देते हैं , क्योंकि अब हमें उनकी आवश्यकता नहीं है।

एक "बुनियादी अद्यतन" क्या है? यह पहला अपडेट है जो हम वर्तमान सर्वर समय से पीछे की ओर बढ़ते हुए पाते हैं । इस सर्किट को याद रखें?


क्लाइंट रेंडर टाइम के बाईं ओर सीधे गेम अपडेट एक बुनियादी अपडेट है।

मूल अद्यतन किसके लिए उपयोग किया जाता है? हम आधार से अपडेट क्यों छोड़ सकते हैं? इसे समझने के लिए, आइए अंत में कार्यान्वयन को देखें getCurrentState():

state.js भाग 2

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

हम तीन मामलों को संभालते हैं:

1. base < 0इसका मतलब है कि मौजूदा रेंडरिंग टाइम (ऊपर कार्यान्वयन देखें getBaseUpdate()) के लिए कोई अपडेट नहीं है । यह विलंब के प्रतिपादन के कारण खेल की शुरुआत में सही हो सकता है। इस मामले में, हम सबसे हालिया अपडेट का उपयोग करते हैं।
2. baseयह हमारे पास नवीनतम अपडेट है। यह नेटवर्क विलंबता या खराब इंटरनेट कनेक्शन के कारण हो सकता है। इस मामले में, हमारे पास नवीनतम अपडेट का भी उपयोग होता है।
3. वर्तमान रेंडरिंग समय से पहले और बाद में हमारे पास एक अपडेट है, ताकि आप इंटरपोल कर सकें !

जो कुछ भी रहता state.jsहै वह रैखिक प्रक्षेप का कार्यान्वयन है, जो एक सरल (लेकिन उबाऊ) गणित है। यदि आप इसे स्वयं सीखना चाहते हैं, तो इसे गीथूबstate.js पर खोलें ।

भाग 2. बैकेंड सर्वर

इस भाग में, हम हमारे .io गेम उदाहरण को चलाने वाले Node.js बैकएंड को देखेंगे ।

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}`); 

याद रखें कि पहले भाग में हमने वेबपैक पर चर्चा की थी? यह वह जगह है जहां हम अपने वेबपैक कॉन्फ़िगरेशन का उपयोग करेंगे। हम उन्हें दो तरीकों से लागू करेंगे:

• वेबपैक-देव-मिडलवेयर का उपयोग हमारे विकास पैकेजों को स्वचालित रूप से पुनर्निर्माण करने के लिए करें, या
• वैधानिक रूप से उस फ़ोल्डर dist/को हस्तांतरित करें जिसके लिए Webpack उत्पादन की विधानसभा के बाद हमारी फाइलें लिखेगा।

एक अन्य महत्वपूर्ण कार्य socket.ioserver.js सर्वर को कॉन्फ़िगर करना है , जो बस एक्सप्रेस सर्वर से जुड़ता है:

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); }); 

सर्वर के साथ सॉकेट.आईओ कनेक्शन को सफलतापूर्वक स्थापित करने के बाद, हम नए सॉकेट के लिए ईवेंट हैंडलर कॉन्फ़िगर करते हैं। इवेंट हैंडलर ग्राहकों से प्राप्त संदेश को सिंगलटन ऑब्जेक्ट पर भेजते हैं 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उनके सॉकेट सॉकेट के क्षेत्र द्वारा पहचानेंगे। (यदि आप भ्रमित हैं, तो वापस लौटें 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 / ( ).

? . 30 – !

फिर update()प्रति सेकंड 30 बार कॉल क्यों नहीं किया जाता ? खेल के सिमुलेशन में सुधार करने के लिए। अधिक बार कहा जाता है update(), अधिक सटीक खेल का अनुकरण होगा। लेकिन कॉल की संख्या के साथ बहुत दूर मत जाओ update(), क्योंकि यह एक कम्प्यूटेशनल रूप से महंगा काम है - 60 प्रति सेकंड काफी पर्याप्त है।

कक्षा में शेष Gameसहायक विधियों का उपयोग किया जाता है update():

game.js, भाग 3

 class Game { // ... getLeaderboard() { return Object.values(this.players) .sort((p1, p2) => p2.score - p1.score) .slice(0, 5) .map(p => ({ username: p.username, score: Math.round(p.score) })); } createUpdate(player, leaderboard) { const nearbyPlayers = Object.values(this.players).filter( p => p !== player && p.distanceTo(player) <= Constants.MAP_SIZE / 2, ); const nearbyBullets = this.bullets.filter( b => b.distanceTo(player) <= Constants.MAP_SIZE / 2, ); return { t: Date.now(), me: player.serializeForUpdate(), others: nearbyPlayers.map(p => p.serializeForUpdate()), bullets: nearbyBullets.map(b => b.serializeForUpdate()), leaderboard, }; } } 

getLeaderboard()काफी सरल - यह अंकों की संख्या से खिलाड़ियों को छाँटता है, पाँच सर्वश्रेष्ठ लेता है और प्रत्येक उपयोगकर्ता नाम और स्कोर के लिए रिटर्न देता है। खिलाड़ियों को पारित कर दिया जाता है कि खेल अद्यतन बनाने के लिए

createUpdate()इस्तेमाल किया update()। इसका मुख्य कार्य serializeForUpdate()कक्षाओं Playerऔर कक्षाओं के लिए लागू तरीकों को कॉल करना है Bullet। ध्यान दें कि वह प्रत्येक खिलाड़ी को केवल निकटतम खिलाड़ियों और गोले पर डेटा स्थानांतरित करता है - खिलाड़ी से दूर स्थित खेल वस्तुओं के बारे में जानकारी प्रसारित करने की कोई आवश्यकता नहीं है!

3. सर्वर पर गेम ऑब्जेक्ट

हमारे खेल में, गोले और खिलाड़ी वास्तव में बहुत समान हैं: वे अमूर्त गोल चलती हुई खेल वस्तुएं हैं। खिलाड़ियों और गोले की इस समानता का लाभ उठाने के लिए, आइए आधार वर्ग के कार्यान्वयन से शुरू करें Object:

object.js

 class Object { constructor(id, x, y, dir, speed) { this.id = id; this.x = x; this.y = y; this.direction = dir; this.speed = speed; } update(dt) { this.x += dt * this.speed * Math.sin(this.direction); this.y -= dt * this.speed * Math.cos(this.direction); } distanceTo(object) { const dx = this.x - object.x; const dy = this.y - object.y; return Math.sqrt(dx * dx + dy * dy); } setDirection(dir) { this.direction = dir; } serializeForUpdate() { return { id: this.id, x: this.x, y: this.y, }; } } 

यहां कुछ भी जटिल नहीं है। यह वर्ग विस्तार के लिए एक अच्छा संदर्भ बिंदु होगा। आइए देखें कि वर्ग कैसे Bulletउपयोग करता है Object:

bullet.js

 const shortid = require('shortid'); const ObjectClass = require('./object'); const Constants = require('../shared/constants'); class Bullet extends ObjectClass { constructor(parentID, x, y, dir) { super(shortid(), x, y, dir, Constants.BULLET_SPEED); this.parentID = parentID; } // Returns true if the bullet should be destroyed update(dt) { super.update(dt); return this.x < 0 || this.x > Constants.MAP_SIZE || this.y < 0 || this.y > Constants.MAP_SIZE; } } 

कार्यान्वयन Bulletबहुत कम है! हमने Objectकेवल निम्नलिखित एक्सटेंशनों को जोड़ा :

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

चलो आगे बढ़ते हैं Player:

player.js

 const ObjectClass = require('./object'); const Bullet = require('./bullet'); const Constants = require('../shared/constants'); class Player extends ObjectClass { constructor(id, username, x, y) { super(id, x, y, Math.random() * 2 * Math.PI, Constants.PLAYER_SPEED); this.username = username; this.hp = Constants.PLAYER_MAX_HP; this.fireCooldown = 0; this.score = 0; } // Returns a newly created bullet, or null. update(dt) { super.update(dt); // Update score this.score += dt * Constants.SCORE_PER_SECOND; // Make sure the player stays in bounds this.x = Math.max(0, Math.min(Constants.MAP_SIZE, this.x)); this.y = Math.max(0, Math.min(Constants.MAP_SIZE, this.y)); // Fire a bullet, if needed this.fireCooldown -= dt; if (this.fireCooldown <= 0) { this.fireCooldown += Constants.PLAYER_FIRE_COOLDOWN; return new Bullet(this.id, this.x, this.y, this.direction); } return null; } takeBulletDamage() { this.hp -= Constants.BULLET_DAMAGE; } onDealtDamage() { this.score += Constants.SCORE_BULLET_HIT; } serializeForUpdate() { return { ...(super.serializeForUpdate()), direction: this.direction, hp: this.hp, }; } } 

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

बेस क्लास Objectहोना एक महत्वपूर्ण कदम है । उदाहरण के लिए, एक वर्ग के बिना, Objectहर गेम ऑब्जेक्ट का एक ही कार्यान्वयन होना चाहिए distanceTo(), और कई फाइलों में इन सभी कार्यान्वयनों की कॉपी-पेस्ट सिंक्रनाइज़ेशन एक बुरा सपना होगा। विस्तार परियोजनाओं की संख्या Objectबढ़ने पर यह बड़ी परियोजनाओं के लिए विशेष रूप से महत्वपूर्ण हो जाता है।

4. संघर्ष मान्यता

हमारे लिए केवल एक चीज बची है, जब यह पता चलेगा कि गोले खिलाड़ियों को किस तरह मारते हैं! update()एक वर्ग में एक विधि से कोड का यह टुकड़ा याद रखें Game:

game.js

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

हमें एक ऐसा तरीका लागू करने की जरूरत है applyCollisions()जो खिलाड़ियों को हिट करने वाले सभी गोले लौटाए। सौभाग्य से, ऐसा करना इतना मुश्किल नहीं है, क्योंकि

• सभी टकराने वाली वस्तुएं मंडलियां हैं, और टकराव की मान्यता को लागू करने के लिए यह सबसे सरल आंकड़ा है।
• हमारे पास पहले से ही एक विधि है distanceTo()जिसे हमने कक्षा में पिछले अनुभाग में लागू किया है Object।

यहां हमारी टक्कर मान्यता कार्यान्वयन जैसा दिखता है:

collisions.js

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

यह साधारण टक्कर की मान्यता इस तथ्य पर आधारित है कि दो वृत्त टकराते हैं यदि उनके केंद्रों के बीच की दूरी उनके रेडी के योग से कम हो । यहां ऐसा मामला है जब दो सर्कल के केंद्रों के बीच की दूरी उनके रेडी के योग के बराबर है:


यहां आपको कुछ पहलुओं पर सावधानी से विचार करने की आवश्यकता है:

• प्रक्षेप्य उस खिलाड़ी में नहीं गिरना चाहिए जिसने इसे बनाया है। यह तुलना द्वारा प्राप्त किया जा सकता bullet.parentIDके साथ player.id।
• प्रक्षेप्य केवल एक बार कई खिलाड़ियों के साथ एक साथ टकराव के चरम मामले में हिट होना चाहिए। हम ऑपरेटर की मदद से इस समस्या का समाधान करेंगे break: जैसे ही एक खिलाड़ी को पता चलता है कि उसे एक प्रोजेक्टाइल का सामना करना पड़ा है, हम खोज को रोकते हैं और अगले प्रोजेक्टाइल पर जाते हैं।

अंत

वह सब है! हमने एक .io वेब गेम बनाने के लिए आपको जो कुछ भी जानना आवश्यक है उसे कवर किया है। आगे क्या है? अपने खुद के .io खेल का निर्माण!

सभी सैंपल कोड ओपन सोर्स हैं और इन्हें जीथब पर पोस्ट किया गया है ।