हम एक ऑनलाइन गेम भाग 2 लिखते हैं या बग पर काम करते हैं

नमस्कार% हब्रनाम%!

कल के लेख में, मेरे लिए, यह आमतौर पर उम्मीद की गई थी कि अधिकांश को नोडज में दिलचस्पी नहीं होगी, कई केवल डेमो देखेंगे। लेकिन दुर्भाग्य से मैंने इस बात पर ध्यान नहीं दिया कि लेख में खेल का मूल्यांकन किया जाएगा! हालाँकि यह मेरे लिए एक लेख लिखने में बहुत समय बिताने के लिए एक दया थी (और, सबसे महत्वपूर्ण बात, खेल सिर्फ लेख के लिए लिखा गया था, और इसके विपरीत नहीं), आज मैंने एक अगली कड़ी लिखने का फैसला किया।

तो ठीक है! हम बग्स पर काम करेंगे और हमारे द्वारा मांगी गई हर चीज के साथ एक कार्यशील गेम बनाएंगे, लेकिन हम ब्लॉग के विषय से विचलित नहीं हुए और परीक्षण के दौरान आने वाले सभी तकनीकी मुद्दों पर विचार करते हैं।

विषय में पहला संदेश habravchanin Assargin की पहली बग रिपोर्ट थी :

यह बहुत अच्छा है - मैं इसे लगातार 5-6 बार दबाने का प्रबंधन करता हूं जबकि ब्राउज़र और / या इंटरनेट धीमा हो जाता है और पहली चाल के बाद स्वचालित रूप से जीत जाता है! प्रतिद्वंद्वी के लिए कोई मौका नहीं है! :)
और यह एफएफ 3.6.24 और क्रोम 15.0.874.106 में दोनों है

और मोर्फी से उसके बाद:

ऐसा कैसे?

यहां मैंने एक दोहरे कदम के साथ इस क्षण को याद किया, ठीक है, यह समझ में आता है, खेल का परीक्षण करने का लक्ष्य सब कुछ काम करना था। दूसरी ओर, सत्यापन केवल उस ग्राहक पर था जो चल रहा है। इसे सर्वर पर स्थानांतरित करें।

जाँच करें कि सर्वर पर कौन जाता है

हम अपनी फ़ाइल को गेम मॉड्यूल / tictactoe.js के दिल के साथ खोलते हैं, इस मूव फंक्शन की तलाश करते हैं, जो गेम का उद्देश्य है:

GameItem.prototype.step = function(x, y, user, cb) { if(this.board[x + 'x' + y] !== undefined) return; //    "      ",   <hh user="theshock"></hh>     ! this.board[x + 'x' + y] = this.getTurn(user); this.steps++; cb(this.checkWinner(x, y, this.getTurn(user)), this.getTurn(user)); } 

जैसा कि हम देखते हैं कि एक चाल प्राप्त करते समय, हमने इसे केवल फ़ील्ड अधिभोग के लिए चेक किया था, अब हमें किसकी चाल पर एक चेक जोड़ने की आवश्यकता है, एक शुरुआत के लिए हम खेल ऑब्जेक्ट के लिए एक नई संपत्ति पेश करेंगे जिसे टर्न कहा जाता है:

 var GameItem = function(user, opponent, x, y, stepsToWin) { ... //   this.turn = 'X'; //      , ..         . } 

कदम को रोकने के लिए एक चेक जोड़ें और प्रतिद्वंद्वी को स्थानांतरित करें:

 GameItem.prototype.step = function(x, y, user, cb) { if(this.board[x + 'x' + y] !== undefined || this.getTurn(user) != this.turn) return; //      turn       this.board[x + 'x' + y] = this.getTurn(user); this.turn = (user != this.user ? 'X' : 'O'); //       this.steps++; cb(this.checkWinner(x, y, this.getTurn(user)), this.getTurn(user)); } 

यह पहला बग प्रोफाइल है। लेकिन जब मैंने मॉरी स्क्रीन देखी, तो यूआई में एक बग ने मेरी आंख को पकड़ लिया जिसने इंटरफ़ेस को अपडेट नहीं किया, यह वह जगह है जहां 3 बार यह कहता है "आप खेलते हैं: पैर की अंगुली"। खेल के डिबग ने कहा कि खेल के अंत में हम उपयोगकर्ता को सॉकेट.आईओ में व्यक्तिगत गेम रूम से डिस्कनेक्ट करते हैं और इस तरह उसे नए गेम के लिए आम कमरे में लाते हैं। और इस तरह हम उपयोगकर्ता को नए गेम से जोड़ते हैं, हालांकि उसके पास अभी भी बटन "नया गेम" दबाने का समय नहीं है। यह आसानी से तय किया जा सकता है; हम एक बटन के क्लिक पर खेल में एक प्रविष्टि जोड़ देंगे, और अब स्वचालित रूप से नहीं।

गेम का अंत स्वचालित रूप से एक नए को पुनरारंभ किए बिना

हम अपने क्लाइंट फ़ाइल tictactoe.js को खोलते हैं जो सार्वजनिक फ़ोल्डर में स्थित है और बटन पर गेम की शुरुआत के बारे में घटना में एक कॉल जोड़ता है, जिसके बाद हम पृष्ठ को फिर से लोड करने के लिए क्लिक इवेंट को बदलते हैं:

 $('#reload').hide().button({icons:{primary:'ui-icon-refresh'}}).click(function() { $('#reload').off('click').click(function(){window.location.reload();}); socket.emit('start'); }); 

और index.js के सर्वर साइड पर हम गेम को एक अलग ईवेंट में लॉन्च करने के लिए फंक्शन लेते हैं:

 socket.on('start', function () { if(Game.users[socket.id] !== undefined) return; //    ,         Game.start(socket.id.toString(), function(start, gameId, opponent, x, y){ ... }); }); 

अब हमें उपयोगकर्ता के ज्ञान के बिना पुनरारंभ करने में कोई समस्या नहीं होगी जब तक कि वह खुद नया गेम शुरू करने के लिए क्लिक नहीं करता है।

प्रगति का समय समाप्त

कई लोग शिकायत करने लगे कि कोई भी नहीं चल रहा है, यह सबसे बड़ी बुराई थी, शायद उन समस्याओं के कारण जो खेल के साथ बहुत से थे, वे बस नहीं चल सकते थे और खेल मूर्खतापूर्ण रूप से खुला था। जैसा कि सही ढंग से नोट किया गया है कि इवनगार्ड को टाइमआउट की जरूरत है आइए अपनी क्लाइंट फ़ाइल पर वापस जाएं, जिसे हमने पहले / सार्वजनिक / titactoe.js से थोड़ा पहले संपादित किया था और इसमें एक नया वेरिएबल जोड़ा गया था और मास्क फ़ंक्शन को बदल दिया था:

 var TicTacToe = { gameId: null, turn: null, i: false, socket: null, interval: null, //  ... mask: function(state) { var mask = $('#masked'), board = $('#board-table'); clearInterval(this.interval); $('#timer').html(15); this.interval = setInterval(function(){ var i = parseInt($('#timer').html()); i--; $('#timer').html(i); }, 1000); if(state) { mask.show(); var p = board.position(); mask.css({ width: board.width(), height: board.height(), left: p.left, top: p.top }); } else { mask.hide(); } }, 

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

सर्वर टाइमआउट और EventEmitter का अध्ययन करें

अब सर्वर साइड में चलते हैं। यहां हमें टाइमर को सही ढंग से सेट करने की आवश्यकता है ताकि यह केवल वांछित गेम के लिए काम करे, इसलिए हम गेम के ऑब्जेक्ट को और बढ़ाएंगे। लेकिन, मैंने वादा किया कि यह लेख शैक्षिक सामग्री होगी, इसलिए हम एक साधारण कार्य नहीं करेंगे, लेकिन यह अध्ययन करेंगे कि NodeJS में कौन-कौन सी घटनाएं होती हैं, या फिर EventEmitter को बेहतर तरीके से जाना जा सकता है।
काम करने के लिए, आपको इसे कनेक्ट करने की आवश्यकता होगी, क्योंकि यह नोडज में एक अलग ईवेंट मॉड्यूल है।
मॉडल / tictactoe.js फ़ाइल की बहुत शुरुआत में, हम एक EventEmitter और Util कनेक्शन जोड़ेंगे, जिसके लिए हमें बाद की आवश्यकता है मैं थोड़ा बाद में समझाऊंगा।

 var util = require('util'), EventEmitter = require("events").EventEmitter; 

इस कॉल में, हम न केवल मॉड्यूल को कनेक्ट करते हैं, बल्कि निर्यात किए गए फ़ंक्शन का एक नया ऑब्जेक्ट भी बनाते हैं।

सिद्धांत की बिट

चूंकि हम पहले से ही सॉकेट का उपयोग करते हैं। यह घटनाओं पर आधारित है, जिसका अर्थ है कि EventEmitter पहले से ही वहां से जुड़ा हुआ है, लेकिन हमारे संदर्भ में घोषित नहीं किया गया है। इसका उपयोग करने के लिए, हम इसके कनेक्शन को एक नए तरीके से पंजीकृत करेंगे, जबकि नोडज इसे फिर से कनेक्ट नहीं करेंगे, सभी की आवश्यकता कैश की गई है, और प्रत्येक दोहराया कॉल केवल पहले से जुड़े मॉड्यूल के लिए एक कॉल है। EventEmitter क्या है? यह एक इवेंट मशीन का एक ऑब्जेक्ट है, साधारण शब्दों में यह इवेंट कॉल की एक तरह की मॉनिटरिंग है, बिल्कुल सामान्य जावास्क्रिप्ट की तरह, लेकिन इसके साथ काम करने के लिए आपको थोड़ा फोकस करने की आवश्यकता है।

वापस अभ्यास करने के लिए

पहले हमें अपने गेम ऑब्जेक्ट्स में एक इवेंट हैंडलर जोड़ने की आवश्यकता है, यही कारण है कि मैंने एक और उपयोग मॉड्यूल को जोड़ा है जिसमें विभिन्न कार्यों का एक सेट शामिल है, उनमें से प्रत्येक का विस्तृत विवरण आधिकारिक दस्तावेज में पाया जा सकता है, और हमें केवल TicTacToe और GameItem के लिए एक ईवेंटमीटर जोड़ने की आवश्यकता है :

 var TicTacToe = module.exports = function() { //   EventEmitter.call(this); ... } util.inherits(TicTacToe, EventEmitter); var GameItem = function(user, opponent, x, y, stepsToWin) { //   EventEmitter.call(this); ... } util.inherits(GameItem, EventEmitter); 

याद रखें, मैंने एक निश्चित फ़ोकस का उल्लेख किया है, और वह बस यह है। इस प्रकार, हमारी वस्तुएं अब उनकी घटनाओं के साथ काम कर सकती हैं। यह उनके साथ है कि हम गेम टाइमर को नियंत्रित करेंगे।

ID टाइमर, साथ ही हमारे GameItem में हमारा पहला ईवेंट हैंडलर संग्रहीत करने के लिए एक संपत्ति जोड़ें:

 var GameItem = function(user, opponent, x, y, stepsToWin) { ... //   this.timeout = null; //   this.on('timer', function(state, user) { if(state == 'stop') { //   clearTimeout(this.timeout); this.timeout = null; } else { //   var game = this; this.timeout = setTimeout(function() { //  ,    game.emit('timeout', user); }, 15000); } }); 

एक महत्वपूर्ण बिंदु पर ध्यान दें, GameItem में अभी तक कोई टाइमआउट घटना नहीं है, लेकिन अब हम इसे जोड़ देंगे और हम इसे index.js फ़ाइल में जोड़ देंगे, हम वहाँ क्यों करते हैं मैं कोड के बाद समझाऊंगा:

 socket.on('start', function () { if(Game.users[socket.id] !== undefined) return; Game.start(socket.id.toString(), function(start, gameId, opponent, x, y){ if(start) { //      timeout Game.games[gameId].on('timeout', function(user) { Game.end(user, function(gameId, opponent, turn) { io.sockets.in(gameId).emit('timeout', turn); closeRoom(gameId, opponent); //    }); }); ... }); }); 

हमने ईवेंट हैंडलर 2 लेयर्स को अधिक संभाला, जहां वेब सॉकेट्स के साथ काम होता है। यह सब घटना के ट्रिगर होने के बाद वेब सॉकेट और गेम ऑब्जेक्ट (TicTacToe) के नियंत्रण को चालू करने के लिए आवश्यक है।

एक बग ओपेरा में टिमटिमा या आँकड़ों के साथ मेरी बेवकूफ गलती के साथ

उपयोगकर्ता seriyPS ने लिखा है:

मुझे नहीं पता कि यह किससे जुड़ा है, लेकिन आंकड़े आपके "खेल" को 100 प्रति सेकंड के टुकड़े भेजते हैं। इस तरह की प्रत्येक घटना के साथ, UI का एक महत्वपूर्ण हिस्सा फिर से तैयार हो जाता है और सब कुछ धीमा हो जाता है। यह खेलना असंभव है (और किसी के साथ नहीं)। सामान्य रूप से डरावना।

और यहां तक ​​कि बहुत पेशेवर रूप से इस समस्या से संपर्क किया, इसका पूरी तरह से अध्ययन किया। मैंने तुरंत एक टिप्पणी में लिखा कि यह वास्तव में मेरी गलती है, और अब मैं समझाऊंगा कि यह क्या है, यह कोड को देखने के लिए है

 io.sockets.on('connection', function (socket) { io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); setInterval(function() { io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); }, 5000); ... }); 

वेब सॉकेट्स के कनेक्शन को स्थापित करने के बाद, हम हर 5 सेकंड में अंतराल में आंकड़े भेजना शुरू करते हैं, 50 उपयोगकर्ताओं को अलग-अलग समय पर 5 * 50 = 250 आँकड़े अनुरोध हर 5 सेकंड में सर्वर द्वारा भेजे गए थे। ऐसी बगिया।
और आप इसे वेब सॉकेट कनेक्शन घटना की सीमा से बाहर आँकड़ों के कोड के द्वारा हल कर सकते हैं:

 setInterval(function() { io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); }, 5000); io.sockets.on('connection', function (socket) { io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); ... }); 

रिफैक्टरिंग

इस पर, त्रुटि सुधार पूरा हो गया था और मैंने रिफैक्टरिंग करने का फैसला किया।
Index.js फ़ाइल में, मैंने जो पहला काम किया, वह अतिरिक्त कोड को हटा दिया गया, उपयोगकर्ताओं को कमरों से हटा दिया, इसे किसी फ़ंक्शन में रखा:

 io.sockets.on('connection', function (socket) { ... function closeRoom(gameId, opponent) { socket.leave(gameId); io.sockets.socket(opponent).leave(gameId); } ... }); 

मैंने ऑनलाइन खिलाड़ियों और खेलों के काउंटरों को पूरी तरह से हटा दिया, क्योंकि वे पहले से ही वस्तुओं में हैं:

 var countGames = 0, countPlayers = [], Game = new TicTacToe(); ... io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + Object.keys(Game.games).length, ' : ' + Object.keys(Game.users).length ]); 

अभी भी बहुत सी छोटी चीजें अलग-अलग थीं, लेख पहले ही बहुत अच्छा निकला :)
आप सभी को धन्यवाद जिन्होंने इस लेख को इस लाइन के पहले लेख से पढ़ा!

मैं भी खेल के साथ कई समस्याओं को जोड़ना चाहता हूं, अर्थात् संचार, सॉकेट की समस्याओं से संबंधित है। पुस्तकालय, इसलिए सब कुछ उतना ही सही नहीं है जितना कि यह प्रतीत हो सकता है, अक्सर ग्राहक जो Google एनालिटिक्स आंकड़ों द्वारा त्रुटियों की पुष्टि नहीं करते हैं, वे इसकी पुष्टि करते हैं।

पुनश्च: मैं इस तथ्य के लिए माफी मांगता हूं कि 15 वीं शुरुआत तक लेख के लिए एक सक्रिय लिंक था, लेकिन इस लेख को यूएफओ द्वारा छिपाया गया था, और "पोस्ट्स में पॉकेट पिकिंग" के लिए मुझे 7 दिनों के लिए प्रतिबंधित कर दिया गया था। चूंकि प्रशासन के कार्यों पर चर्चा करना असंभव है, मैं बस चुप रहूंगा।

खेलने के लिए

अब आप खेल शुरू करने के लिए खेल सकते हैं, आपको "नया खेल" पर क्लिक करना होगा:
ivan.zhuravlev.name/game - जीतने के लिए 4 चालों के साथ 6x6 फ़ील्ड
ivan.zhuravlev.name/game3 - जीतने के लिए 3 चालों के साथ 3x3 फ़ील्ड

स्रोत देखें: github.com/intech/TicTacToe
मैंने एक के लिए सभी परिवर्तन किए: github.com/intech/TicTacToe/commit/ff3c1d6e9e298a84ab660b52385c378f69f24f01