👦🏼 🤱 🤰🏼 LibCanvas का उपयोग करके पिंगपोंग कैसे लिखें 👃🏿 😟 🆙

शुभ दिन। इस विषय में मैं आपको बताऊंगा कि LibCanvas का उपयोग करके पिंग-पोंग कैसे बनाया जाए। मैंने इसे बहुत सरल कर दिया, केवल सबसे महत्वपूर्ण हिस्सा छोड़ दिया, क्योंकि विषय का लक्ष्य पिंग-पोंग गेम बनाना नहीं है, लेकिन लिबासनवास की मूल बातें समझाना है।

तो, विषय में, कदम-कदम पर निर्देश दिए गए हैं कि लिबकनवास (अनुकूलन के बिना) का उपयोग करके पिंग-पोंग कैसे बनाया जाए।

तो, पिंग पोंग - दो बोर्ड, जिसमें से गेंद धड़कती है। सामान्य तौर पर, आप सभी जानते हैं। शुरुआती HTML फ़ाइल बनाने के लिए हमें सबसे पहली चीज़ चाहिए। यह काफी सरल है - एक अकेला कैनवास तत्व, AtomJS और LibCanvas के लिए लिंक, और अनुप्रयोग फ़ाइलों के लिए लिंक:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>LibCanvas :: ping-pong</title> <link href="/styles.css" rel="stylesheet" /> <script src="/lib/atom.js"></script> <script src="/lib/libcanvas.js"></script> </head> <body> <canvas></canvas> <!-- Game engine --> <script src="js/init.js"></script> <script src="js/controller.js"></script> <script src="js/field.js"></script> <script src="js/unit.js"></script> <script src="js/ball.js"></script> </body> </html>

प्रारंभ

यह सब एक आरंभीकरण फ़ाइल के साथ शुरू होता है।

इसमें, मैं LibCanvas.extract को कॉल करता LibCanvas.extract ताकि वैश्विक नामों का उपयोग करने में सक्षम हो। डिफ़ॉल्ट रूप से, सभी वर्गों को उनके नामस्थानों में संग्रहीत किया जाता है: LibCanvas.Shapes.Circle । extract बाद उन्हें संक्षिप्त रूप में उपयोग किया जा सकता है: Circle

दूसरा कदम मेरे खिलौने के लिए एक नाम स्थान की घोषणा करना है। इसमें सभी कक्षाएं संग्रहीत की जाएंगी।

जब आप डोम शुरू करते हैं तो अंतिम चरण एक नियंत्रक बनाना होता है।

 LibCanvas.extract(); window.Pong = {}; atom.dom(function () { new Pong.Controller('canvas'); });

प्रारंभिककरण आवेदन के आधार पर भिन्न हो सकता है, लेकिन, सामान्य तौर पर, यह उनके बीच समान है। मेरे एक मित्र को एक दिलचस्प दृष्टिकोण पसंद है - जावास्क्रिप्ट में सभी तर्क (यहां तक कि एक तत्व बनाने और स्क्रिप्ट को जोड़ने) के साथ एक न्यूनतम HTML फ़ाइल। और हाँ, यह कोड मान्य है!

 <!DOCTYPE html> <title>LibCanvas :: ping-pong</title> <script src="js/load.ls"></script>

नियंत्रक

अगला कदम एक नियंत्रक बनाना है। इसमें हम एक LibCanvas ऑब्जेक्ट और गेम एलिमेंट्स LibCanvas । मैं atom.Class का उपयोग करके सभी खेल कक्षाएं atom.Class , जहां atom.Class निर्माणकर्ता है।

 Pong.Controller = atom.Class({ initialize: function (canvas) { this.libcanvas = new LibCanvas(canvas, { preloadImages: { elems : 'im/elems.png' } }) .listenKeyboard([ 'aup', 'adown', 'w', 's' ]) .addEvent('ready', this.start.bind(this)) .start(); }, start: function () { var libcanvas = this.libcanvas; [...] } });

हम छवि को प्रीलोड करने के लिए कंस्ट्रक्टर को ऑब्जेक्ट पास करते हैं। चित्र डाउनलोड होने तक आवेदन शुरू नहीं होता है। ये दो प्रेत हैं - लाठी और गेंद।

हम LibCanvas को LibCanvas कि हम कीबोर्ड का उपयोग करेंगे और हमें 'aup', 'adown', 'w' और 's' की कीज़ के लिए डिफ़ॉल्ट क्रियाओं से बचने की आवश्यकता है। यह आपको सुविधाजनक नियंत्रण लागू करने की अनुमति देगा और, एक ही समय में, उदाहरण के लिए, तीर के साथ ब्राउज़र विंडो को स्थानांतरित नहीं करेगा।

जब LibCanvas रेंडरिंग शुरू करने के लिए तैयार होता है, तो हम कंट्रोलर की स्टार्ट विधि शुरू करेंगे। हम बाद में उसके पास लौट आएंगे।

खेल का मैदान

हमारे साथ खेल का मैदान पृष्ठभूमि, अंक, कुछ गणना, इकाइयों का निर्माण करने के लिए जिम्मेदार होगा।

 Pong.Field = atom.Class({ Implements: [ Drawable ], width : 800, height: 500, [...] });

एक इकाई बनाएँ और प्रतिपादन के लिए libcanvas में जोड़ें। ध्यान दें कि हम कैसे चतुराई से कैनवास का आकार बदलते हैं। ऐसा इसलिए है क्योंकि हमारी वस्तु में चौड़ाई और ऊंचाई के गुण हैं।

 Pong.Controller = atom.Class({ [...] start: function () { var libcanvas = this.libcanvas; var field = new Pond.Field(); libcanvas.size( field, true ); libcanvas.addElement( field ); [...] } });

गेंद

गेंद का तर्क बेहद सरल है - इसमें एक "आवेग" है - आंदोलन की दिशा और गति।
गति पिक्सेल / सेकंड में सेट की गई है। हर बार अपडेट के दौरान, हमें वह समय मिलता है, जो पिछले अपडेट के बाद से गुजरा है, जिसके द्वारा हम गति को गुणा करते हैं। इसके कारण, एफपीएस की परवाह किए बिना, हमारे पास निरंतर गति है
जब गेंद ऊपरी या निचली सीमा पर पहुँचती है - तो वह हिट करती है और विपरीत दिशा में उड़ती है।
appendTo क्षेत्र में गेंद को पिन करना आसान बनाता है। प्रारंभिक स्थिति और दीवारों के लिए लेखांकन के लिए हमारे लिए क्षेत्र का आकार जानना महत्वपूर्ण है।
प्रतिपादन बहुत सरल है - हम स्प्राइट के वांछित भाग को वर्तमान आयत में बनाते हैं।
कृपया ध्यान दें कि ऑब्जेक्ट का निर्माण करते समय, libcanvas संपत्ति अभी तक उपलब्ध नहीं है, इसलिए आपको libcanvasSet इवेंट की प्रतीक्षा करने की आवश्यकता है और उसके बाद ही libcanvas उपयोग libcanvas

 Pong.Ball = atom.Class({ Implements: [ Drawable ], impulse: null, initialize: function (controller) { this.impulse = new Point( Number.random(325, 375), Number.random(325, 375) ); this.addEvent('libcanvasSet', function () { this.image = this.libcanvas.getImage('elems').sprite( 23, 0, 26, 26 ); }); }, move: function (time) { this.shape.move( this.impulse.clone().mul(time / 1000) ); }, update: function (time) { this.move(time); var from = this.shape.from, to = this.shape.to; //      if ( (this.impulse.y < 0 && from.y < 0) || (this.impulse.y > 0 && to.y > this.field.height) ) this.impulse.y *= -1; }, appendTo: function (field) { this.shape = new Rectangle( 40, field.height / 2, 24, 24 ); this.field = field; return this; }, draw: function () { this.libcanvas.ctx.drawImage(this.image, this.shape); } });

नियंत्रक को इसकी कॉल जोड़ें। हमें हर फ्रेम में गेंद की स्थिति को अपडेट करने की आवश्यकता है, इसलिए हम addFunc का उपयोग करके अपडेट की सदस्यता addFunc

 Pong.Controller = atom.Class({ [...] start: function () { [...] ball = new Pong.Ball(); libcanvas [...] .addElement( ball.appendTo( field ) ) .addFunc(function (time) { ball.update( time ); libcanvas.update(); }); } });

इकाइयाँ बनाएँ

अगली चीज जो हमें चाहिए वह है रैकेट। उन्हें कीबोर्ड का उपयोग करके नियंत्रित किया जाएगा (बाएं के लिए ws और दाएं के लिए ऊपर और नीचे)।
यह वर्ग नियंत्रण, आंदोलन, गेंद के साथ संपर्क के लिए जिम्मेदार होगा।
ध्यान दें कि "गति" गुण स्थिर है, अर्थात्, प्रोटोटाइप में जोड़ा जाता है। हम इसे बदलेंगे नहीं, बल्कि इसका उपयोग करेंगे।
नियंत्रण में, हम कैनवास को अपडेट करने और आवश्यक कुंजियों की स्थिति की जांच करने के लिए खुद को संलग्न करते हैं। यदि आवश्यक हो, तो ऑब्जेक्ट को स्थानांतरित करें।
आकार को वांछित गति तक ले जाने का एक दिलचस्प तरीका यह करने के लिए बस हमारी आयत की चाल विधि का उपयोग करना है।
fitToField सुनिश्चित करता है कि तत्व स्वीकार्य सीमा के भीतर है और यदि यह नहीं है, तो इसे अपनी जगह पर लौटाता है।
गेंद के साथ सादृश्य द्वारा ड्रा विधि में, चित्र का आवश्यक हिस्सा वर्तमान आकार में खींचा जाता है।

 Pong.Unit = atom.Class({ Implements: [ Drawable ], size: { width: 20, height: 100, padding: 20 }, speed: new Point( 0, 300 ), score: 0, controls: function (up, down) { this.addEvent('libcanvasSet', function () { var lc = this.libcanvas.addFunc(function (time) { if (lc.getKey(up)) { this.move( -time ); } else if (lc.getKey(down)) { this.move( time ); } }.bind(this)); }); return this; }, appendTo: function (field, number) { var s = this.size; this.field = field; this.number = number; this.shape = new Rectangle({ // field.width, field.height from: [ (number == 2 ? field.width - s.width - s.padding : s.padding), (field.height - s.height) / 2 ], size: s }); return this; }, fitToField: function () { var shape = this.shape; var top = shape.from.y, bottom = shape.to.y - this.field.height; if (top < 0) shape.move(new Point(0, -top)); if (bottom > 0) shape.move(new Point(0, -bottom)); }, move: function (time) { this.shape.move( this.speed.clone().mul( time / 1000 ) ); this.fitToField(); }, draw: function() { this.libcanvas.ctx.drawImage( this.libcanvas.getImage('elems').sprite(0,0,20,100), this.shape ); } });

हम मैदान पर इकाइयाँ बनाएंगे, जहाँ हम उन्हें नियंत्रण और स्थिति देंगे:

 Pong.Field = atom.Class({ [...] createUnits: function (libcanvas) { this.unit = new Pong.Unit() .controls('w', 's') .appendTo( this, 1 ); this.enemy = new Pong.Unit() .controls('aup', 'adown') .appendTo( this, 2 ); libcanvas .addElement( this.unit ) .addElement( this.enemy ); }, [...]

स्वाभाविक रूप से, आपको नियंत्रक के लिए एक विधि कॉल जोड़ना होगा:

 Pong.Controller = atom.Class({ [...], start: function () { [...], field.createUnits( libcanvas ); } });

वस्तु सहभागिता

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

 Pong.Ball = atom.Class({ [...] checkCollisions: function () { var coll = this.field.collidesUnits( this ), isOut = this.field.isOut( this.shape ); if ( (( coll < 0 || isOut < 0 ) && this.impulse.x < 0) || (( coll > 0 || isOut > 0 ) && this.impulse.x > 0) ) this.impulse.x *= -1; }, update: function (time) { [...] this.checkCollisions(); }, [...] });

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

 Pong.Field = atom.Class({ [...] collidesUnits: function (ball) { return this.unit .collides(ball) ? -1 : this.enemy.collides(ball) ? 1 : 0; }, isOut: function (shape) { if (shape.from.x < 0) { this.enemy.score++; return -1; } else if (shape.to.x > this.width) { this.unit.score++; return 1; } return 0; }, [...]

इकाई के अंदर, हम अंतर्निहित Rectangle().intersect उपयोग करेंगे Rectangle().intersect यह जांचने के लिए विधि है कि क्या दो आयतें प्रतिच्छेद करती हैं।

 Pong.Unit = atom.Class({ [...] collides: function (ball) { return ball.shape.intersect(this.shape); }, });

खाता वापसी

अंतिम चरण खिलाड़ियों के स्कोर को प्रदर्शित करना है। इसे आसानी से ctx.text का उपयोग करके किया जा सकता है - यह आपको पाठ को css के अधिक निकट प्रदर्शित करने की अनुमति देता है, इंडेंट निर्दिष्ट करता है, एक आयत जिसमें आप पाठ और कुछ अतिरिक्त सुविधाएँ प्रदर्शित करना चाहते हैं।

 Pong.Field = atom.Class({ [...] drawScore: function (unit, align) { this.libcanvas.ctx.text({ text: unit.score, size: 32, padding: [0, 70], color: 'white', align: align }); return this; }, draw: function () { this .drawScore( this.unit , 'left' ) .drawScore( this.enemy, 'right' ); } });

निष्कर्ष

वह सब है। पूर्ण कोड और खेल में पाया जा सकता है

libcanvas.github.com/games/pingpong/

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

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

यह मुझे लगता है कि कभी-कभी विचार काफी अराजक थे, इसलिए यदि आप हैबे पर पंजीकृत नहीं हैं, तो टिप्पणियों में या ईमेल पर सवाल पूछने में संकोच न करें।

LibCanvas का उपयोग करके पिंगपोंग कैसे लिखें