JQuery, CoffeeScript, SVG और node.JS का उपयोग करके ब्राउज़र ऑनलाइन गेम

मैं लंबे समय से अपना छोटा खिलौना लिखना चाहता था। और अब, उपयुक्त तकनीकों का अध्ययन करने के बाद, उन्होंने एक "उत्कृष्ट कृति" बनाई।

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

यहाँ एक बैश स्क्रिप्ट इस प्रकार है:

coffee --compile --output ../js/ js/ while inotifywait -q -r -e modify .; do coffee --compile --output ../js/ js/ done 

यह वर्तमान निर्देशिका के जेएस फ़ोल्डर में सभी कॉफी फ़ाइलों को सुनता है और, जब बदला जाता है, तो संकलित फ़ाइल को निर्देशिका के जेएस फ़ोल्डर में एक स्तर अधिक बचाता है।

मैं लेख के अंत में संक्षेप में अपने खेल का वर्णन करूंगा। शुरुआत करने के लिए, मैं क्लाइंट-सर्वर इंटरैक्शन के तंत्र को दिखाना चाहूंगा।

यहाँ एक साधारण कॉफी ग्राहक उदाहरण है (jQuery जुड़ा है):

 class @Hello constructor: -> window.WebSocket = window.WebSocket || window.MozWebSocket; if !window.WebSocket alert(['   WebSocket']) return false #     @connection = new WebSocket('ws://localhost:1337') @connection.onopen = @onopen @connection.onmessage = @message # ,       node  onopen: => #          @connection.send(JSON.stringify( 'index':'test_message' 'text':'' )) # ,      message:(message) => #    alert(message.data) #       "hello"  jQuery $.fn['hello'] = () => object = new @Hello() return $(@).data('hello', object) 

"हैलो" वर्ग बनाया गया है, "कंस्ट्रक्टर" विधि, जो नोड सर्वर से कनेक्ट करने का प्रयास कर रही है।

सफल कनेक्शन पर, ऑनोपेन विधि चालू हो जाती है, जो तुरंत JSON प्रारूप में सर्वर को एक परीक्षण संदेश भेजती है।

और अंतिम चरण: यदि सर्वर ने संदेश को सफलतापूर्वक संसाधित किया और प्रतिक्रिया भेजी, तो "संदेश" विधि चालू हो जाती है, जो प्राप्त संदेश को सचेत करती है।

यहाँ एक सर्वर है जो मेरे छोटे उदाहरण की आवश्यकताओं को पूरा करता है:

 process.title = 'node-test'; var webSocketServer = require('websocket').server; var http = require('http'); var fs = require('fs'); var sys = require('sys'); var server = http.createServer(function(request, response) {}); server.listen(1337, function() {console.log('Web server runing...');}); var wsServer = new webSocketServer({httpServer: server}); wsServer.on('request', function(request) { var connection = request.accept(null, request.origin); connection.on('message', function(message) { var json = JSON.parse(message.utf8Data); switch (json.index) { case 'test_message': connection.sendUTF(' !'); break; } }); }); 

समझाने के लिए कुछ खास नहीं है। हम आवश्यक मॉड्यूल कनेक्ट करते हैं, "कनेक्शन.ऑन" पर एक सर्वर बनाते हैं, हम एक फ़ंक्शन को लटकाते हैं जो क्लाइंट से प्राप्त संदेशों को संसाधित करता है। यदि संदेश ऑब्जेक्ट से चर "इंडेक्स" "test_message" के बराबर है (वास्तव में हम क्लाइंट से क्या भेज रहे हैं), तो हम क्लाइंट "वेल हेलो!" का जवाब देते हैं। कनेक्शन सूची को एक सरणी में सहेजने की आवश्यकता है।

यह पूरा तंत्र है जिस पर नोड सर्वर के साथ मेरे खेल का संबंध बनाया गया है। अब खेल के करीब। मैंने पौराणिक बैटल सिटी खेलने का फैसला किया। परिणाम एक बहुत अच्छी बात थी (डिजाइन के मामले में थोड़ा नम)।

आप कार्यशील स्थानीय संस्करण खेल सकते हैं, साथ ही मेरी वेबसाइट पर स्थानीय और वेब संस्करणों के साथ अभिलेखागार डाउनलोड कर सकते हैं:
1) खेल
2) डाउनलोड करें

गेम इंटरफ़ेस को लागू करने के लिए, मैंने सक्रिय रूप से jQ टेम्प्लेट का उपयोग किया। युद्धक्षेत्र स्वयं SVG का उपयोग करके तैयार किया गया है।

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

पूरे युद्धक्षेत्र को कोशिकाओं (20 से 20) में विभाजित किया गया है। एक कोशिका में केवल एक ही वस्तु हो सकती है (गोले की गिनती नहीं होती है)।

स्तर के नक्शे JSON प्रारूप में फ़ाइलों में संग्रहीत किए जाते हैं और क्लाइंट के अनुरोध पर नोड सर्वर द्वारा लोड किए जाते हैं। उन्हें बदलने के लिए एक व्यवस्थापक पैनल है।

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

बस, संक्षेप में यही है। अधिक विस्तृत समीक्षा के लिए, समाप्त संस्करण डाउनलोड करें और देखें। खेल के युद्ध के मैदान का स्क्रीनशॉट:



ध्यान देने के लिए आप सभी का धन्यवाद।