आपका स्वागत है! मेरा सुझाव है कि आप और मैं जावास्क्रिप्ट कंप्यूटर पर एक कंप्यूटर पर कई लोगों के लिए एक छोटा सा आकस्मिक गेम बनाएं।

लेख में, मैंने स्टेप-बाय-स्टेप ने MooTools और LibCanvas का उपयोग करके इस तरह के गेम को बनाने की प्रक्रिया का विश्लेषण किया, प्रत्येक छोटी कार्रवाई पर रोक लगाते हुए , नए जोड़ने और मौजूदा कोड को फिर से भरने के कारणों और तर्क की व्याख्या की।

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

नियम

हम खिलाड़ी (खिलाड़ी) को नियंत्रित करते हैं, जिसे चारा (बैट) को पकड़ना चाहिए - और साथ ही साथ दिखने वाले "शिकारियों" (बैरियर) को चकमा देना चाहिए।

खेल का लक्ष्य शिकारियों को छूने के बिना चारा की अधिकतम संख्या को पकड़ना है।

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

HTML फ़ाइल

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

[[ कोड। पिछले पृष्ठ पर /index.html ]]

एक प्रोजेक्ट बनाएं

सबसे पहले, प्रोजेक्ट स्वयं बनाएं। हमें यह केवल तब करने की आवश्यकता है जब दस्तावेज़ तैयार हो - हम domready

द्वारा प्रदान की गई " domready

" की घटना का उपयोग करेंगे

हम एक LibCanvas.Canvas2D ऑब्जेक्ट भी बनाएंगे जो हमें एनीमेशन में मदद करेगा।

./js/start.js

window . addEvent ( 'domready' , function () { // var elem = $$( 'canvas' )[ 0 ]; // LibCanvas var libcanvas = new LibCanvas . Canvas2D ( elem ); // , libcanvas . autoUpdate = true ; // 60 fps libcanvas . fps = 60 ; // libcanvas . start (); });

उपयोगकर्ता जोड़ें

एक नया ऑब्जेक्ट जोड़ें - प्लेयर, जिसे माउस द्वारा नियंत्रित किया जाएगा - इसके निर्देशांक माउस कर्सर के निर्देशांक के बराबर होंगे।

यह ऑब्जेक्ट एक निश्चित रंग और आकार के चक्र की तरह दिखेगा (संपत्ति में निर्दिष्ट)

[[ कोड ।/js/Player.js पास्टबिन पर ]]

libcanvas.start();

से पहले libcanvas.start();

जोड़ें libcanvas.start();

:

libcanvas . listenMouse (); var player = new Player (). setZIndex ( 30 ); libcanvas . addElement ( player );

= चरण 1 =

आप देख सकते हैं कि परिणाम वैसा नहीं है जैसा कि हमें उम्मीद थी, क्योंकि प्रत्येक फ्रेम के बाद कैनवास स्वचालित रूप से स्पष्ट नहीं होता है।

आपको ./js/start.js पर क्लींजिंग और ब्लैक फिल प्रीप्रोसेसर जोड़ना होगा

libcanvas . addProcessor ( 'pre' , new LibCanvas . Processors . Clearer ( '#000' ) );

= चरण 2 =

चारा जोड़ें

[[ कोड ./js/Bait.js पास्टबिन पर ]]

./Js/start.js में जोड़ें:

// , var bait = new Bait (). setZIndex ( 20 ); libcanvas . addElement ( bait );

Refactoring - एक मूल वर्ग बनाएं

हमारे पास बहुत समान बैट और प्लेयर कक्षाएं हैं। चलिए एक GameObject क्लास बनाते हैं, जहाँ से वे हमें विरासत में मिलेंगे।

आरंभ करने के लिए, हम प्लेयर क्लास के निर्माता से createPosition बनाते हैं:

./js/Player.js

var Player = new Class({ // ... initialize : function () { // .. this . shape = new LibCanvas . Shapes . Circle ({ center : this . createPosition () // ... }, createPosition : function () { return this . libcanvas . mouse . point ; },

अब एक GameObject क्लास बनाएं

[[ कोड ।/js/GameObject.js पास्टबिन पर ]]

उसके बाद, अन्य वर्गों को हल्का किया जा सकता है:

./js/Bait.js

var Bait = new Class({ Extends : GameObject , radius : 15 , color : '#f0f' });

./js/Player.js

var Player = new Class({ Extends : GameObject , radius : 15 , color : '#080' , createPosition : function () { return this . libcanvas . mouse . point ; }, draw : function () { if ( this . libcanvas . mouse . inCanvas ) { this . parent (); } } });

हम देखते हैं, अगर कुछ भी नहीं टूटा:

= चरण 3 =

हुर्रे! सब कुछ हर जगह काम करता है, और कोड बहुत आसान हो गया है।

एक चारा खिलाड़ी के दोस्त

स्क्रीन पर सब कुछ बढ़ रहा है, लेकिन वास्तव में हमारे कार्यों पर कोई प्रतिक्रिया नहीं है।

आइए, चारा और खिलाड़ी के दोस्त बनाने से शुरू करें - जब वे इसमें दौड़ते हैं, तो चारा को किसी अन्य यादृच्छिक स्थान पर जाना चाहिए।

ऐसा करने के लिए, रेंडरिंग से अलग एक टाइमआउट बनाएं, जो संपर्क के लिए जांच करेगा।

हम अंत में लिखते हैं ।/js/start.js :

(function(){ bait . isCatched ( player ); }. periodical ( 30 ));

अब हमें ./js/Bait.js में isCatched विधि लागू करने की आवश्यकता है:

isCatched : function ( player ) { if ( player . shape . intersect ( this . shape )) { this . move (); return true ; } return false ; }, move : function () { // this . shape . center = this . createPosition (); }

= चरण 4 =

लगभग उत्कृष्ट, लेकिन हम देखते हैं कि आंदोलन अशिष्ट और कष्टप्रद है। बेहतर होगा कि चारा आसानी से भाग जाए।

ऐसा करने के लिए, आप LibCanvas व्यवहार में से एक का उपयोग कर सकते हैं। यह एक पंक्ति जोड़ने और चाल विधि को थोड़ा बदलने के लिए पर्याप्त है:

अब हमें ./js/Bait.js में isCatched विधि लागू करने की आवश्यकता है:

var Bait = new Class({ Extends : GameObject , Implements : [ LibCanvas . Behaviors . Moveable ], // ... move : function () { // (800), this . moveTo ( this . createPosition (), 800 ); } });

बहुत सरल है, है ना? और मुझे परिणाम बहुत पसंद है:

= चरण ५ =

शिकारियों को जोड़ें

./js/Barrier.js :

var Barrier = new Class({ Extends : GameObject , full : null , speed : null , radius : 8 , color : '#0ff' , initialize : function () { this . parent (); this . speed = new LibCanvas . Point ( $random ( 2 , 5 ), $random ( 2 , 5 ) ); // , $random ( 0 , 1 ) && ( this . speed . x *= - 1 ); // , $random ( 0 , 1 ) && ( this . speed . y *= - 1 ); }, move : function () { this . shape . center . move ( this . speed ); return this ; }, intersect : function ( player ) { return ( player . shape . intersect ( this . shape )); } });

इसके अलावा, आइए बदल दें ।/js/start.js थोड़ा ताकि शिकारियों को मछली पकड़ने के लिए चारा दिखाई दे:

bait . isCatched ( player ); // if ( bait . isCatched ( player )) { player . createBarrier (); } player . checkBarriers ();

हम खिलाड़ी के लिए बाधाओं को लागू करते हैं ।/js/Player.js और उन सभी को हर चेक में स्थानांतरित करते हैं:

barriers : [], createBarrier : function () { var barrier = new Barrier (). setZIndex ( 10 ); this . barriers . push ( barrier ); // libcanvas, this . libcanvas . addElement ( barrier ); return barrier ; }, checkBarriers : function () { for (var i = this . barriers . length ; i --;) { if ( this . barriers [ i ]. move (). intersect ( this )) { this .die(); return true ; } } return false ; }, die : function () { },;

= चरण ६ =

खैर, खेल में आंदोलन था। लेकिन हम तीन समस्याएं देखते हैं:

1. शिकारी खेल के मैदान के लिए उड़ जाते हैं - आपको "दीवारों से लड़ने" की ज़रूरत है।

2. कभी-कभी चारा को दो बार खींचने का समय होता है जब तक वह उड़ नहीं जाता है - आपको थोड़े समय के लिए "अयोग्यता" बनाने की आवश्यकता है।

3. मौत का मामला संसाधित नहीं किया गया है।

शिकारी दीवारों से लड़ते हैं, चारा को "अयोग्यता" का कम समय मिलता है

दीवार हमलों का एहसास आसान है। फ़ाइल में बैरियर क्लास की चाल विधि को थोड़ा बदल दें ।/js/Barrier.js :

[[ पेस्टबिन पर बैरियर। लोवे कोड ]]

चारा समस्या को ठीक करना भी बहुत मुश्किल नहीं है - हम ./js/Bait.js फ़ाइल में बैट वर्ग में बदलाव करते हैं।

[[ पास्टबिन पर Bait.makeInvulnerable कोड ]]

= चरण 7 =

हमें मौत और स्कोरिंग का एहसास है

क्योंकि अंक - यह कितनी बार चारा पकड़ा जाता है और यह स्क्रीन पर शिकारियों की संख्या के बराबर है - अंक गिनना बहुत आसान है:

खिलाड़ी वर्ग में ड्रा विधि को थोड़ा बढ़ाएँ, फ़ाइल ./js/Player.js :

draw : function () { // ... this . libcanvas . ctx . text ({ text : 'Score : ' + this . barriers . length , to : [ 20 , 10 , 200 , 40 ], color : this . color }); }, // .. - - - die : function () { for (var i = this . barriers . length ; i --;) { this . libcanvas . rmElement ( this . barriers [ i ]); } this . barriers = []; }

एकल खिलाड़ी खेल खत्म हो गया है!

= चरण 8 - एकल खिलाड़ी =

हमें एक कंप्यूटर पर एक मल्टीप्लेयर गेम का एहसास होता है

कीबोर्ड आंदोलन

शुरू करने के लिए - हम माउस से कीबोर्ड पर नियंत्रण स्थानांतरित करेंगे। In/ js/start.js हम libcanvas.listenMouse()

को libcanvas.listenKeyboard()

इसमें, हम मध्यांतर में player.checkMovement();

को जोड़ते हैं player.checkMovement();

।

In/ js/Player.js हम ओवरराइड createPosition

, draw

विधि में हम माउस चेक को हटाते हैं और एरो का उपयोग करके आंदोलन को कार्यान्वित करते हैं:

speed : 8 , checkMovement : function () { var pos = this . shape . center ; if ( this . libcanvas . getKey ( 'left' )) pos . x -= this . speed ; if ( this . libcanvas . getKey ( 'right' )) pos . x += this . speed ; if ( this . libcanvas . getKey ( 'up' )) pos . y -= this . speed ; if ( this . libcanvas . getKey ( 'down' )) pos . y += this . speed ; },

= चरण 9 =

एक अप्रिय अति सूक्ष्म अंतर - खिलाड़ी स्क्रीन के पीछे क्रॉल करता है और वहां यह खो सकता है।

आइए इसके आंदोलन को प्रतिबंधित करें और कोड को थोड़ा अलग करें, कुंजी राज्य को एक अलग विधि पर ले जाएं

isMoveTo : function ( dir ) { return this . libcanvas . getKey ( dir ); }, checkMovement : function () { var pos = this . shape . center ; var full = this . getFull (); if ( this . isMoveTo ( 'left' ) && pos . x > 0 ) pos . x -= this . speed ; if ( this . isMoveTo ( 'right' ) && pos . x < full . width ) pos . x += this . speed ; if ( this . isMoveTo ( 'up' ) && pos . y > 0 ) pos . y -= this . speed ; if ( this . isMoveTo ( 'down' ) && pos . y < full . height ) pos . y += this . speed ; },

हम isMoveTo पद्धति को भी थोड़ा संशोधित करेंगे - ताकि आप खिलाड़ी को नियंत्रित करने के लिए आसानी से चाबियाँ बदल सकें:

control : { up : 'up' , down : 'down' , left : 'left' , right : 'right' }, isMoveTo : function ( dir ) { return this . libcanvas . getKey ( this . control [ dir ]); },

= चरण १० =

दूसरा खिलाड़ी दर्ज करें

हम फ़ाइल को बदलते हैं ।/js/start.js :

var player = new Player (). setZIndex ( 30 ); libcanvas . addElement ( player ); // => var players = []; ( 2 ). times (function ( i ) { var player = new Player (). setZIndex ( 30 + i ); libcanvas . addElement ( player ); players . push ( player ); }); // players [ 1 ]. color = '#ff0' ; players [ 1 ]. control = { up : 'w' , down : 's' , left : 'a' , right : 'd' };

टाइमर की सामग्री players . each (function ( player ) { /* * */ });

में लिपटे हुए players . each (function ( player ) { /* * */ });

players . each (function ( player ) { /* * */ });

= चरण 11 =

यह छोटे सुधार करने के लिए बनी हुई है:

1. पहले खिलाड़ी की तुलना में दूसरे खिलाड़ी का स्कोर कम करें।

2. अलग-अलग रंगों में अलग-अलग खिलाड़ियों के शिकारियों को रंग दें।

3. आंकड़ों की खातिर, "रिकॉर्ड" दर्ज करें - किस खिलाड़ी द्वारा अधिकतम स्कोर प्राप्त किया गया था।

./Js/Player.js : के लिए उपयुक्त परिवर्तन करें

var Player = new Class({ // ... // : createBarrier : function () { // ... barrier . color = this . barrierColor || this . color ; // ... }, // maxScore : 0 , die : function () { this . maxScore = Math . max ( this . maxScore , this . barriers . length ); // ... }, index : 0 , draw : function () { this . parent (); this . libcanvas . ctx . text ({ // : text : 'Score : ' + this . barriers . length + ' (' + this . maxScore + ')' , // 20 : to : [ 20 , 10 + 20 * this . index , 200 , 40 ], color : this . color }); } });

हम ./js/start.js में सुधार करते हैं :

( 2 ). times (function ( i ) { var player = new Player (). setZIndex ( 30 + i ); player . index = i ; // ... }); players [ 0 ]. color = '#09f' ; players [ 0 ]. barrierColor = '#069' ; // players [ 1 ]. color = '#ff0' ; players [ 1 ]. barrierColor = '#960' ; players [ 1 ]. control = { up : 'w' , down : 's' , left : 'a' , right : 'd' };

बधाई हो, खेल हो गया!

= चरण 12 - दो के लिए खेलते हैं =

एक तीसरा और चौथा खिलाड़ी जोड़ें

यदि आप चाहें, तो तीसरे और चौथे खिलाड़ी को जोड़ना बहुत आसान है:

players [ 2 ]. color = '#f30' ; players [ 2 ]. barrierColor = '#900' ; players [ 2 ]. control = { up : 'i' , down : 'k' , left : 'j' , right : 'l' }; // players[0] uses numpad // players[3] uses home end delete & pagedown players [ 3 ]. color = '#3f0' ; players [ 3 ]. barrierColor = '#090' ; players [ 3 ]. control = { up : '$' , down : '#' , left : 'delete' , right : '"' };

एक जावास्क्रिप्ट कैनवस गेम बनाना