हम NodeJS, Express और Socket.IO पर एक ऑनलाइन गेम लिखते हैं

हाय% हबरनाम%!

*** इस सामग्री में खेल में ही तार्किक त्रुटियां हैं, लेकिन यह लेख की तकनीकी सामग्री को प्रभावित नहीं करता है, जिसका उद्देश्य खेलना नहीं है, बल्कि यह पता लगाना है कि शीर्षक में वर्णित उपकरणों के साथ कैसे काम किया जाए। जारी रखा जाए। हम टिप्पणियों में वर्णित सभी त्रुटियों को ध्यान में रखते हुए खेल को काम करने की स्थिति में लाते हैं

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

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

लेकिन अब मैं अपने आप में पहले से ही पूर्ण शैक्षिक और शुरुआती से वास्तविक काम करने के लिए सुस्त सामग्री नहीं लिखने की ताकत महसूस करता हूं। यह सिर्फ एक एप्लिकेशन नहीं होगा, बल्कि सबसे लोकप्रिय एक्सप्रेस और सॉकेट.आईओ टूल्स का उपयोग करके एक ऑनलाइन गेम है, हाँ, एक मल्टीप्लेयर जो किसी भी औसत सांख्यिकीय js डेवलपर कर सकता है।

एक्सप्रेस और सॉकेट.आईओ ने पहले से ही बहुत कुछ लिखा है, इसलिए, मैं इसे फिर से वर्णन नहीं करूंगा, विकास की प्रक्रिया पर अधिक ध्यान देना।

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

और इसलिए, यह तय है! मैं टिक-टैक-टू बनाना शुरू कर रहा हूं।

हम भविष्य के खेल की संरचना का निर्धारण करेंगे, जिसके परिणामस्वरूप हमें क्या चाहिए:

• खेल के बारे में जानकारी के साथ कुछ सामान्य इंटरफ़ेस
• हैंडलर के साथ खेल के मैदान की यूआई
• सर्वर गेम के सभी तर्कों के साथ है

मैंने इंटरफ़ेस के साथ हमेशा की तरह विकास शुरू किया। मैंने क्रमशः jQuery और jQueryUI ढांचे को चुना।

पेज बनाने और आवश्यक शैलियों और पुस्तकालयों को जोड़ने के बाद, jqueryUI:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/vader/jquery-ui.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

इंटरफ़ेस स्थिति पट्टी, सांख्यिकी साइडबार और गेम फ़ील्ड को ही बनाता है, सब कुछ साधारण तालिकाओं के साथ किया जाता है:

 <table border="0" width="100%"> <thead> <th colspan="2" id="status" class="ui-widget ui-state-hover ui-corner-all">  ...</th> </thead> <tbody> <td id="stats" class="ui-widget" valign="top"><br /><button id="reload"> </button><br /><br /></td> <td id="board" class="ui-widget" valign="top"><div id="masked" class="ui-widget-shadow ui-corner-all ui-widget-overlay"></div> <table class="ui-widget ui-corner-all" cellpadding="0" cellspacing="0" align="left" id="board-table"></table> </td> </tbody> </table> 

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

मैंने सभी कोड को यथासंभव सफाई से और तार्किक रूप से लिखने की कोशिश की, इस उम्मीद के साथ कि यह प्रशिक्षण सामग्री है जो केवल अच्छी चीजों को सिखाना चाहिए, यहां तक ​​कि छोटी चीजों में भी :)

खेल का उद्देश्य बनाया गया था:

 var TicTacToe = { gameId: null, //      ID . turn: null, //    ,   X  O i: false, //   ,    init: function() { ... }, //         startGame: function (gameId, turn, x, y) { ... }, //         mask: function(state) { ... }, //    ,            :) move: function (id, turn, win) { ... }, //      endGame: function (turn, win) { ... } //  ,   } 

अब हम बदले में प्रत्येक फ़ंक्शन पर विचार करेंगे, जितना संभव हो उतना टिप्पणी की जाएगी, और इसलिए Init ():

 $(function() { // UI    $('#reload').button({icons:{primary:'ui-icon-refresh'}}).click(function(){window.location.reload();}); //    nodejs  socket.io var socket = io.connect(window.location.hostname + ':1337', {resource: 'api'}); //   event' ()   socket.io //  socket.on('connect', function () { $('#status').html('    '); }); //  socket.on('reconnect', function () { $('#connect-status').html(',  '); }); //   socket.on('reconnecting', function () { $('#status').html('   , ...'); }); //  socket.on('error', function (e) { $('#status').html(': ' + (e ? e : ' ')); }); //        //   socket.on('wait', function(){ $('#status').append('...  ...'); }); //   socket.on('exit', function() { //           TicTacToe.endGame(TicTacToe.turn, 'exit'); }); //    ,   //  ID ,        xy socket.on('ready', function(gameId, turn, x, y) { $('#status').html('   !  ! ' + (turn == 'X' ? '   ' : '  ') + '!'); //        TicTacToe.startGame(gameId, turn, x, y); //     ,    :) $('#stats').append($('<div/>').attr('class', 'turn ui-state-hover ui-corner-all').html(' : <b>' + (turn=='X'?'':'') + '</b>')); //       ,   $("#board-table td").click(function (e) { //  ,      ID   ID  ,    XxY if(TicTacToe.i) socket.emit('step', TicTacToe.gameId, e.target.id); //        }).hover(function(){ $(this).toggleClass('ui-state-hover'); }, function(){ $(this).toggleClass('ui-state-hover'); }); }); //   socket.on('step', function(id, turn, win) { //  ID ,      . win          TicTacToe.move(id, turn, win); }); //  socket.on('stats', function (arr) { var stats = $('#stats'); stats.find('div').not('.turn').remove(); for(val in arr) { stats.prepend($('<div/>').attr('class', 'ui-state-hover ui-corner-all').html(arr[val])); } }); }); 

अब खेल शुरू होता है पर एक करीब से देखो:

 startGame: function (gameId, turn, x, y) { //  ID  this.gameId = gameId; //    this.turn = turn; //   ,  X        :) this.i = (turn == 'X'); //    var table = $('#board-table').empty(); //      for(var i = 1; i <= y; i++) { var tr = $('<tr/>'); for(var j = 0; j < x; j++) { //        ID  X  Y  (id="2x3") tr.append($('<td/>').attr('id', (j+1) + 'x' + i).addClass('ui-state-default').html(' ')); } table.append(tr); } //   $("#board").show(); //     ,   this.mask(!this.i); }, 

मैं मुखौटा के कार्य का वर्णन नहीं करूंगा, वहां सब कुछ सामान्य है।
इसके अलावा, खिलाड़ी के कदम को प्राप्त करने का कार्य:

 move: function (id, turn, win) { //  : ID    ,  ,     this.i = (turn != this.turn); //    $("#" + id).attr('class', 'ui-state-hover').html(turn); //     if (!win) { //   ,   this.mask(!this.i); //        $('#status').html(' ' + (this.i ? ' ' : ' ')); //   } else { this.endGame(turn, win); //    ,   } }, 

खेल पूरा:

 endGame: function (turn, win) { //  :   ,    var text = ''; //     3  switch(win) { case 'none': text = '!'; break; //     case 'exit': text = '    !  '; break; //    default: text = ' ' + (this.i ? '! =(' : '! =)'); //   } //        $("<div/>").html(text).dialog({ title: ' ', modal: true, closeOnEscape: false, resizable: false, buttons: { "  ": function() { $(this).dialog("close"); window.location.reload(); }}, close: function() { window.location.reload(); } }); } 

वह सब है! सभी बनाई गई फाइलें सार्वजनिक नामक एक नए फ़ोल्डर में डाल दी जाती हैं।

क्या क्लाइंट का हिस्सा बहुत आसान था? सर्वर साइड थोड़ा और अधिक जटिल है!

आवश्यक मॉड्यूल स्थापित करें:

 npm install express npm install socket.io 

हम शुरुआती फ़ाइल index.js बनाते हैं, अब तक सरल है, आइए इसे समझें:

 //    var express = require('express'), socketio = require('socket.io'); //      express var app = express.createServer(); //        express  //      ,      var io = socketio.listen(app); //   express    app.use(express.static(__dirname + '/public')); //       app.listen(80); //     socket.io       3,     io.set('log level', 3); //     ,     /socket.io io.set('resource', '/api'); 

अब हम एक ही बात लिखते हैं लेकिन टिप्पणी के बिना और सरल रूप में, इसलिए क्लीनर:

 var express = require('express'), app = express.createServer(), io = require('socket.io').listen(app), TicTacToe = require('./models/tictactoe'); app.use(express.static(__dirname + '/public')); app.listen(1337); io.set('log level', 1); io.set('resource', '/api'); 

यदि आपने यहाँ ध्यान दिया, तो मैंने एक मॉडल भी जोड़ा

 TicTacToe = require('./models/tictactoe'); 

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

चूंकि हम एक ऑनलाइन गेम लिख रहे हैं, इसलिए शुरू में हमारे पास उपयोगकर्ता, गेम और उनके संग्रह ऑब्जेक्ट के रूप में सर्वर एप्लिकेशन की वास्तुकला थी।

मुख्य वस्तुएं बनाएं:

 //    ,  ,          var TicTacToe = module.exports = function() { //  id  =   this.games = []; //    = id  this.users = []; //        this.free = []; //   this.x = 6; this.y = 6; //    this.stepsToWin = 4; } //  ,       var GameItem = function(user, opponent, x, y, stepsToWin) { //        this.board[id  ] =   this.board = []; //  this.user = user; // X this.opponent = opponent; // O //   this.x = x; this.y = y; //    this.stepsToWin = stepsToWin; // -   this.steps = 0; } 

इस प्रकार, जब हमारा सर्वर शुरू होता है, तो यह एक TicTacToe गेम बनाता है, और जब उपयोगकर्ता कनेक्ट होते हैं, तो हम TicTacToe संग्रह के भीतर व्यक्तिगत GameItem गेम बनाएंगे, जिसमें यह देखा जाएगा कि कौन किसके साथ और किन मापदंडों पर खेलता है।

अब संग्रह में इन बहुत खेल बनाने के कार्य पर विचार करें:

 TicTacToe.prototype.start = function(user, cb) { //     -    //     Object.keys      if(Object.keys(this.free).length > 0) { //       ID var opponent = Object.keys(this.free).shift(); //      var game = new GameItem(user, opponent, this.x, this.y, this.stepsToWin); //   ID   ID  var id = user + opponent; //      this.games[id] = game; //       this.users[user] = id; //      this.users[opponent] = id; //  callback    cb(true, id, opponent, this.x, this.y); } else { //  ,    this.free[user] = true; //  callback    cb(false); } } 

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

मैं जल्दी से फिर से समझाऊंगा कि यह एक सरल उदाहरण के साथ क्यों आवश्यक है, अगर किसी ने अभी तक अतुल्यकालिक के बारे में दर्जनों लेखों में से एक नहीं पढ़ा है :)

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

 1. -->    2. TicTacToe.start(); 3. <--   

तो इस मामले में, चरण 1 के बाद, चरण 2 और 3 तुल्यकालिक रूप से काम करेंगे, अर्थात, उपयोगकर्ता को गेम बनाने से पहले एक उत्तर प्राप्त होगा। इसलिए, हम कॉलबैक फ़ंक्शन का उपयोग करते हैं, तर्क को इस प्रकार बदलते हैं:

 1. -->    2. TicTacToe.start(function(){ 3. <--   }); 

अब, चरण 1 के बाद, हम केवल चरण 2 में फ़ंक्शन शुरू करते हैं, और कॉलबैक के बाद ही अनाम फ़ंक्शन काम करता है और उपयोगकर्ता को परिणाम का जवाब देने के लिए चरण 3 पर जाता है।

वापस हमारे खेल के लिए। हमने उसे खेल स्थानों की कतार निर्धारित करने और खेल के लिए उपयोगकर्ताओं के जोड़े जोड़ने के लिए सिखाया।

अब देखते हैं कि हमारा खेल कैसे समाप्त होगा:

 TicTacToe.prototype.end = function(user, cb) { //          delete this.free[user]; //      ,     if(this.users[user] === undefined) return; //  ID      var gameId = this.users[user]; //     ,  if(this.games[gameId] === undefined) return; //      ID var game = this.games[gameId]; //      var opponent = (user == game.user ? game.opponent : game.user); //    delete this.games[gameId]; //   game = null; //     delete this.users[user]; //  ID   ID     cb(gameId, opponent); } 

अब सबसे दिलचस्प पर चलते हैं, टिक टीएसी को पैर की अंगुली कैसे काम करती है।

इस बार हम कार्यक्षमता को केवल संग्रह में ही नहीं, बल्कि खेल के उद्देश्य से भी जोड़ेंगे, हम खिलाड़ी को आगे बढ़ाएँगे:

 TicTacToe.prototype.step = function(gameId, x, y, user, cb) { //     proxy             this.games[gameId].step(x, y, user, cb); } GameItem.prototype.step = function(x, y, user, cb) { //        if(this.board[x + 'x' + y] !== undefined) return; //   X  Y    ,          this.board[x + 'x' + y] = this.getTurn(user); //     this.steps++; //            cb(this.checkWinner(x, y, this.getTurn(user)), this.getTurn(user)); } 

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

 GameItem.prototype.getTurn = function(user) { return (user == this.user ? 'X' : 'O'); } 

यह सरल है, अगर यह उपयोगकर्ता है जिसने गेम बनाया है, तो यह स्पष्ट है कि वह एक्स चलता है, और यदि प्रतिद्वंद्वी ओ है।

कॉलबैक में कहा जाने वाला दूसरा फ़ंक्शन विजेता चेक है:

 GameItem.prototype.checkWinner = function(x, y, turn) { //   ,      if(this.steps == (this.x * this.y)) { //  return 'none'; //    } else if( //      this.checkWinnerDynamic('-', x, y, turn) || this.checkWinnerDynamic('|', x, y, turn) || this.checkWinnerDynamic('\\', x , y, turn) || this.checkWinnerDynamic('/', x, y, turn) ) { //   return true; } else { //   return false; } } 

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

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

अब विजेता के लिए जाँच के कार्य के बारे में, इसके 4 पैरामीटर हैं:
1 - खोज एल्गोरिथ्म, इसमें मान हो सकते हैं -,। /, और \ (हाँ, एक बैकस्लैश, क्योंकि उद्धरण चिह्न कोड में बच गए हैं) आप आइकन से क्यों पूछते हैं, सब कुछ बहुत सरल है, ये वे मार्गदर्शिकाएं हैं जो आप जाँच रहे हैं, मैंने स्पष्टता के लिए इसका उपयोग करने का निर्णय लिया। उन्हें।
2,3 - चाल निर्देशांक
4 - क्या गया

अब यह अपने आप में एक शक्तिशाली और अनूठा कार्य है, मैं आपको सलाह देता हूं कि आप इसे देखकर शुरू करें और ध्यान दें कि प्रत्येक मामले में लगभग बॉयलरप्लेट दिखता है, और कोड के बाद क्या अंतर है:

 GameItem.prototype.checkWinnerDynamic = function(a, x, y, turn) { //    4 : ,   2  //          ,,     4  var win = 1; switch(a) { //    case '-': var toLeft = toRight = true, min = x - this.stepsToWin, max = x + this.stepsToWin; min = (min < 1) ? 1 : min; max = (max > this.x) ? this.x : max; for(var i = 1; i <= this.stepsToWin; i++) { if(win >= this.stepsToWin) return true; if(!toLeft && !toRight) return false; if(toLeft && min <= (xi) && this.board[(xi) + 'x' + y] == turn) { win++; } else { toLeft = false; } if(toRight && (x+i) <= max && this.board[(x+i) + 'x' + y] == turn) { win++; } else { toRight = false; } } break; //    case '|': var toUp = toDown = true, min = y - this.stepsToWin, max = y + this.stepsToWin; min = (min < 1) ? 1 : min; max = (max > this.y) ? this.y : max; for(var i = 1; i <= this.stepsToWin; i++) { if(win >= this.stepsToWin) return true; if(!toUp && !toDown) return false; if(toUp && min <= (yi) && this.board[x + 'x' + (yi)] == turn) { win++; } else { toUp = false; } if(toDown && (y+i) <= max && this.board[x + 'x' + (y+i)] == turn) { win++; } else { toDown = false; } } break; //      case '\\': var toUpLeft = toDownRight = true, minX = x - this.stepsToWin, maxX = x + this.stepsToWin, minY = y - this.stepsToWin, maxY = y + this.stepsToWin; minX = (minX < 1) ? 1 : minX; maxX = (maxX > this.x) ? this.x : maxX; minY = (minY < 1) ? 1 : minY; maxY = (maxY > this.y) ? this.y : maxY; for(var i = 1; i <= this.stepsToWin; i++) { if(win >= this.stepsToWin) return true; if(!toUpLeft && !toDownRight) return false; if(toUpLeft && minX <= (xi) && minY <= (yi) && this.board[(xi) + 'x' + (yi)] == turn) { win++; } else { toUpLeft = false; } if(toDownRight && (x+i) <= maxX && (y+i) <= maxY && this.board[(x+i) + 'x' + (y+i)] == turn) { win++; } else { toDownRight = false; } } break; //      case '/': var toDownLeft = toUpRight = true, minX = x - this.stepsToWin, maxX = x + this.stepsToWin, minY = y - this.stepsToWin, maxY = y + this.stepsToWin; minX = (minX < 1) ? 1 : minX; maxX = (maxX > this.x) ? this.x : maxX; minY = (minY < 1) ? 1 : minY; maxY = (maxY > this.y) ? this.y : maxY; for(var i = 1; i <= this.stepsToWin; i++) { if(win >= this.stepsToWin) return true; if(!toDownLeft && !toUpRight) return false; if(toDownLeft && minX <= (xi) && (y+i) <= maxY && this.board[(xi) + 'x' + (y+i)] == turn) { win++; } else { toDownLeft = false; } if(toUpRight && (x+i) <= maxX && (yi) <= maxY && this.board[(x+i) + 'x' + (yi)] == turn) { win++; } else { toUpRight = false; } } break; default: return false; break; } return(win >= this.stepsToWin); } 

algorithmization

प्रत्येक मामला अलग-अलग एल्गोरिदम के अनुसार एक अलग जांच है, लेकिन उन सभी में एक चीज समान है, यह वर्तमान स्थिति से खेल के मैदान में एक सामान्य बदलाव है और इन क्षेत्रों के मूल्य की जांच करना है।
चूंकि मैं शुरू में अपने काम को जटिल करता हूं और खेल में किसी भी क्षेत्र का आकार, साथ ही जीतने के लिए किसी भी संख्या में कदम हो सकते हैं, तो हमारे पास एक सार्वभौमिक एल्गोरिथ्म है जिसमें निम्नलिखित जांच शामिल हैं:

• क्षैतिज खोज

  शुरुआत में, हम चक्र के लिए बाएं और दाएं चर सीमाओं की घोषणा करते हैं, साथ ही एक्स अक्ष के साथ न्यूनतम और अधिकतम आकार।
  यही है, जीतने के लिए चाल की संख्या के साथ वर्तमान चाल + मूल्य का यह मूल्य।
  अगला, हम अधिकतम और न्यूनतम मानों को वास्तविक पर लाते हैं, यदि न्यूनतम 1 से कम है, तो 1 सेट करें।
  यदि एक्स अक्ष में फ़ील्ड की तुलना में अधिकतम है, तो फ़ील्ड लंबाई का मान सेट करें।
  आगे चक्र में हम सभी पड़ोसी क्षेत्रों से गुजरेंगे जो चरम से शुरू होगा और जीत के लिए आवश्यक संख्या तक आगे बढ़ेगा।
  लूप में प्रत्येक पुनरावृत्ति पर, हम यह जांच करेंगे कि क्या आवश्यक संख्या में कोशिकाओं को जीतने के लिए एक ही चाल के साथ संचित किया गया है, यदि ऐसा है, तो हम फ़ंक्शन से बाहर निकलते हैं और सही पास करते हैं - एक विजेता है।
  हम यह भी जांचेंगे कि क्या शिफ्ट अब संभव नहीं है, बाएं से दाएं और दाएं से, फिर हम चक्र को रोकते हैं और फ़ंक्शन से बाहर निकलते हैं, लेकिन पहले से ही झूठे के साथ - कोई विजेता नहीं है।
  इसके बाद बाईं ओर की शुरुआत से चेक आता है, फिर चाहे बाईं ओर सेल की जांच करना संभव है या नहीं और इसका मूल्य न्यूनतम से अधिक है या नहीं, और यह भी है कि इस सेल में वर्तमान चाल का मूल्य है या नहीं। यदि सभी स्थितियां मेल खाती हैं, तो हम चिन्हित करते हैं कि चर जीत में हमारा मैच है, जिससे उसका मान बढ़ता है। यदि कौन सी स्थिति मेल नहीं खाती है, तो हम चिह्नित करते हैं कि अब हम बाईं ओर नहीं देखेंगे। आखिरकार, जब मान एक पंक्ति में जाते हैं तो स्थितियां जीत रही होती हैं।
  हम सही पक्ष की जाँच के लिए एक ही एल्गोरिथ्म का उपयोग करेंगे, केवल वहाँ सही बदलाव के लिए पारी के अधिकतम मूल्य के लिए जाँच करने के लिए शर्तें।

• ऊर्ध्वाधर खोज

  शुरुआत में, उसी तरह, हम सीमा चर और सीमाएं घोषित करेंगे।
  केवल इस बार हम वाई अक्ष और उसके मूल्यों के साथ काम करेंगे। विस्थापन भी Y अक्ष के साथ गुजरेंगे।
  बाकी सब कुछ अलग नहीं है।

• ऊपर से नीचे तक विकर्ण (आमतौर पर यह बाएं से दाएं होना चाहिए, इसलिए मैं इसके बारे में नहीं लिख रहा हूं :)

  शुरुआत में, इसी तरह, हम सीमा चर और सीमाएं घोषित करेंगे, लेकिन अब हमारी अलग-अलग सीमाएँ हैं, हम दोनों अक्षों को देखेंगे।
  हम ऑफसेट पर दोनों कुल्हाड़ियों के साथ काम करेंगे। ऊपर और बाएं के लिए, हम ऑफसेट के लिए XY को कम कर देंगे, और न्यूनतम X और न्यूनतम Y मान भी जांचेंगे। और अधिकतम पूर्वाग्रह मूल्यों के लिए उचित जांच करके XY को बढ़ाने के अधिकार में कमी के लिए।

• विकर्ण नीचे से ऊपर

  यहां, पूर्वाग्रह और सत्यापन के साथ एक तिपाई को छोड़कर लगभग सब कुछ समान है।
  एक नीचे की ओर की शिफ्ट एक्स अक्ष के साथ एक कमी है और वाई अक्ष के साथ वृद्धि है, जिसका अर्थ है न्यूनतम एक्स मान और अधिकतम एम के लिए जाँच।
  और जब ऊपर और दाईं ओर शिफ्ट किया गया, तो यह एक्स अक्ष के साथ वृद्धि है और अधिकतम एक्स और न्यूनतम वाई के लिए चेक के साथ वाई अक्ष के साथ कमी है।

हमने अपने खेल मॉड्यूल का वर्णन करना समाप्त कर दिया है। सभी कार्य तैयार हैं! अब हम क्लाइंट हैंडलर के साथ बातचीत करने के लिए सर्वर साइड हैंडलर लटकाएंगे और यह सब कार्रवाई में देखेंगे।

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

 //    ,      ,        var countGames = onlinePlayers = onlineGames = 0, countPlayers = [], Game = new TicTacToe(); //   ,         Game.x = Game.y = 6; // Default: 6 //  -      Game.stepsToWin = 4; // Default: 4 //         io.sockets.on('connection', function (socket) { //          ID  IP  console.log('%s: %s - connected', socket.id.toString(), socket.handshake.address.address); //       stats       io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); //       5 ,    setInterval(function() { io.sockets.emit('stats', [ ' : ' + countGames, ' : ' + Object.keys(countPlayers).length, ' : ' + onlineGames, ' : ' + onlinePlayers ]); }, 5000); //    ,  ID     ID   md5  Game.start(socket.id.toString(), function(start, gameId, opponent, x, y){ //  callback'       ,      //       ,       null if(start) { //        ID  ID  //      socket.io socket.join(gameId); //   ()        io.sockets.socket(opponent).join(gameId); //          socket.emit('ready', gameId, 'X', x, y); //     io.sockets.socket(opponent).emit('ready', gameId, 'O', x, y); //          countGames++; onlineGames++; } else { //  ,      io.sockets.socket(socket.id).emit('wait'); } //        ip     if(countPlayers[socket.handshake.address.address] == undefined) countPlayers[socket.handshake.address.address] = true; //     onlinePlayers++; }); //     socket.on('step', function (gameId, id) { //   ID   XxY var coordinates = id.split('x'); //       ,   proxy        Game.step(gameId, parseInt(coordinates[0]), parseInt(coordinates[1]), socket.id.toString(), function(win, turn) { //     ,  ,             //       in()        io.sockets.in(gameId).emit('step', id, turn, win); //      if(win) { //      ,     Game.end(socket.id.toString(), function(gameId, opponent) { //          socket.leave(gameId); //     io.sockets.socket(opponent).leave(gameId); }); } }); }); //             socket.on('disconnect', function () { //     ,      //       ,   Game.end(socket.id.toString(), function(gameId, opponent) { //     ,    Game.end       , ID  io.sockets.socket(opponent).emit('exit'); //     socket.leave(gameId); //     io.sockets.socket(opponent).leave(gameId); //     onlineGames--; }); //    onlinePlayers--; //      console.log('%s: %s - disconnected', socket.id.toString(), socket.handshake.address.address); }); }); 

हमने अपना खेल लिखना समाप्त कर दिया है! हम NodeJS से परिचित हो गए, याद आया कि अतुल्यकालिक प्रोग्रामिंग क्या था, काम में सॉकेट.आईओ की कोशिश की, और स्टैटिक्स उत्पन्न करने के लिए एक्सप्रेस की एक झलक भी पकड़ी।

अब आप खेल शुरू करने के लिए खेल सकते हैं, आपको "नया खेल" पर क्लिक करने की आवश्यकता है:
ivan.zhuravlev.name/game - 6x6 फ़ील्ड 4 चाल के साथ जीतने के लिए
ivan.zhuravlev.name/game3 - 3x3 फ़ील्ड 3 चालों से जीतें
स्रोत देखें: github .com / intech / TicTacToe
मैंने हब्र इफेक्ट के लिए जितना संभव हो सके तैयार किया, स्टेटिक्स के लिए प्रॉक्सी नग्नेक्स लगाया, वेबसोकेट एक अलग पोर्ट 1337 पर काम करेगा
मुझे उम्मीद है कि कुछ भी नहीं गिरेगा, सब कुछ सिलेक्टेड क्लाउड में है, वर्चुअल मशीन पर 8 कोर 1GB RAM के संसाधन पर्याप्त होने चाहिए अगर मैं बढ़ाऊं। :)
- सभी विकास और डिबगिंग में लग गए: 12 घंटे 22 मिनट।
कुल समय बीत चुका है: 3 दिन, चौथे के लिए एक लेख लिखा गया था

आंकड़े

प्रोसेसर

स्मृति

मैं गूगल एनालिटिक्स को देखता हूं और एक अन्य मॉनिटर पर मेरे पास सर्वर का सारा डेटा खुला है।
औसतन, 30 से 50 लोग वर्तमान में ऑनलाइन हैं, सर्वर पर लोड व्यावहारिक रूप से ध्यान देने योग्य नहीं है, बहुत छोटे कूद हैं, लेकिन वे इसे लोड कहने के लिए वास्तव में बहुत छोटे हैं।