🤱🏼 🥒 ✋🏻 HTML5 और LibCanvas पर क्लासिक सैपर 💆🏽 🗨️ ☀️

इस लेख में, मैं चरण दर चरण समझाऊंगा कि एचटीएमएल 5 कैनवस, एटमॉज और लिब्कनवास टाइल इंजन का उपयोग करते हुए सबसे साधारण, क्लासिक सैपर कैसे लिखें।

और निरंतरता भी देखें - " LibCanvas (html5) पर आइसोमेट्रिक सैपर "

हम अपने आवेदन के "प्रारंभ" के लिए मानक टेम्पलेट का उपयोग करेंगे। यह महत्वपूर्ण है कि संबंधित कक्षाओं को बनाने के बाद js फ़ाइलों को शामिल करना न भूलें।

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>LibCanvas :: Mines</title> <link href="/files/styles.css" rel="stylesheet" /> <script src="/files/js/atom.js"></script> <script src="/files/js/libcanvas.js"></script> </head> <body> <p><a href="/">Return to index</a></p> <script> new function () { LibCanvas.extract(); atom.dom(function () { new Mines.Controller(); }); }; </script> <script src="js/controller.js"></script> </body> </html>

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

 /** @class Mines.Controller */ atom.declare( 'Mines.Controller', { initialize: function () { atom.ImagePreloader.run({ flag: 'flag-mine.png [48:48]{0:0}', mine: 'flag-mine.png [48:48]{1:0}' }, this.start.bind(this) ); }, start: function (images) { this.images = images; } });

ड्राइंग

मुझे नेत्रहीन देखना पसंद है कि क्या आ रहा है, इसलिए मैं रेंडरिंग प्रोग्रामिंग के साथ शुरू करना पसंद करता हूं, और उसके बाद ही तर्क पर आगे बढ़ता हूं। हमारे कोड को काम करने के लिए, हम LibCanvas.Engines.Tile उपयोग LibCanvas.Engines.Tile । View क्लास जोड़ें, जिसमें हम अपना इंजन बनाएंगे। हमें एक साधारण एप्लिकेशन बनाने और TileEngine.Element.app का उपयोग करके इंजन को बांधने की भी आवश्यकता है। डिफ़ॉल्ट मान एक बंद सेल के बराबर होगा। हमारे कंट्रोलर में यह View बनाना न भूलें।

 /** @class Mines.View */ atom.declare( 'Mines.View', { initialize: function (controller, fieldSize) { this.images = controller.images; this.engine = new TileEngine({ size: fieldSize, cellSize: new Size(24, 24), cellMargin: new Size(0, 0), defaultValue: 'closed' }) .setMethod( this.createMethods() ); this.app = new App({ size : this.engine.countSize(), simple: true }); this.element = TileEngine.Element.app( this.app, this.engine ); },

 /** @class Mines.Controller */ // ... start: function (images) { this.images = images; this.view = new Mines.View( this, new Size(15,8) ); }

इस कोड को चलाने के लिए अपना समय लें, हमने अभी तक View क्लास की createMethods विधि को परिभाषित नहीं किया है। आइए तय करें कि हमारे पास किस प्रकार की सेल अवस्था हो सकती है।

खेल के दौरान, हम इसे देख सकते हैं:

1. नंबर 1 से 8 तक।
2. बंद सेल
3. एक खुली लेकिन खाली सेल
4. चेक बॉक्स

इसके पूरा होने के बाद - निम्नलिखित:

1. सभी खानों
2. यदि उनमें से एक पर उड़ा - यह हाइलाइट किया गया है
3. अगर कहीं गलत तरीके से झंडा लगाया गया है

कुल, 8 + 3 + 3 = 14 विभिन्न राज्य। हम उन सभी का वर्णन करेंगे:

 /** @class Mines.View */ // ... createMethods: function () { return { 1: this.number.bind(this, 1), 2: this.number.bind(this, 2), 3: this.number.bind(this, 3), 4: this.number.bind(this, 4), 5: this.number.bind(this, 5), 6: this.number.bind(this, 6), 7: this.number.bind(this, 7), 8: this.number.bind(this, 8), explode : this.explode.bind(this), closed : this.closed .bind(this), mine : this.mine .bind(this), flag : this.flag .bind(this), empty : this.empty .bind(this), wrong : this.wrong .bind(this) }; },

जैसा कि आप देख सकते हैं, हम उचित View विधियों को कॉल करेंगे, उन्हें वर्तमान संदर्भ में संलग्न करेंगे। यह देखने के लिए कि हमें क्या मिलता है, आपको क्षेत्र में उपयुक्त सेल जोड़ने की आवश्यकता है।

 /** @class Mines.Controller */ // ... start: function (images) { // ... // todo: remove after debug '1 2 3 4 5 6 7 8 empty mine flag explode wrong closed' .split(' ') .forEach(function (name, i) { this.view.engine .getCellByIndex(new Point(i, 3)) .value = name; }.bind(this));

हमने सिर्फ सभी सूचकांकों को लिया और उन्हें क्षेत्र में विभिन्न कोशिकाओं के बदले में सौंपा। अब ड्राइंग। सबसे पहले, हमें एक सामान्य विधि बनाने की आवश्यकता है जो आवश्यक रंग के साथ सेल को भरें और सर्कल करें। यदि पूर्णांक निर्देशांक में 1 पिक्सेल की चौड़ाई वाली एक रेखा खींची जाएगी - तो यह पलक झपकेंगी (देखें htmlbook.ru/html5/canvas , प्रश्न का उत्तर "Q. हम x और yc 0.5 क्यों शुरू करते हैं, और 0 के साथ नहीं?") , इसलिए हम प्रायोगिक का उपयोग करेंगे ? snapToPixel आयत snapToPixel

 /** @class Mines.View */ // ... color: function (ctx, cell, fillStyle, strokeStyle) { var strokeRect = cell.rectangle.clone().snapToPixel(); return ctx .fill( cell.rectangle, fillStyle) .stroke( strokeRect, strokeStyle ); },

अब हम बदले में रेंडरिंग विधियों को जोड़ते हैं। खाली सेल - बस पेंट:

 /** @class Mines.View */ // ... empty: function (ctx, cell) { return this.color(ctx, cell, '#999', '#aaa'); },

मेरा और झंडा एक खाली सेल पर सिर्फ चित्र हैं:

 /** @class Mines.View */ // ... mine: function (ctx, cell) { return this .empty(ctx, cell) .drawImage( this.images.get('mine'), cell.rectangle ); }, flag: function (ctx, cell) { return this .empty(ctx, cell) .drawImage( this.images.get('flag'), cell.rectangle ); },

मीना, जिस पर हमने विस्फोट किया था, एक लाल पृष्ठभूमि के साथ खींची गई है:

 /** @class Mines.View */ // ... explode: function (ctx, cell) { return this .color(ctx, cell, '#c00', '#aaa') .drawImage( this.images.get('mine'), cell.rectangle ); },

गलत झंडा सेट - लाल क्रॉस। इसे खींचना काफी सरल है। सबसे पहले, हम clip साथ अपने आयत के भीतर प्रतिपादन को सीमित करते हैं।
इसे पृष्ठभूमि के साथ भरें, और फिर दो लाल रेखाएं खींचें - ऊपरी-बाएं से निचले-दाएं और निचले-बाएं कोने से ऊपरी-दाएं तक।

 /** @class Mines.View */ // ... wrong: function (ctx, cell) { var r = cell.rectangle; return this.empty(ctx, cell) .save() .clip( r ) .set({ lineWidth: Math.round(cell.rectangle.width / 8) }) .stroke( new Line( r.from , r.to ), '#900' ) .stroke( new Line( r.bottomLeft, r.topRight ), '#900' ) .restore(); },

एक बंद सेल भी काफी सरलता से खींची गई है - अंधेरे से प्रकाश तक, ढाल के ऊपर-बाएं कोने से नीचे-दाएं तक।

 /** @class Mines.View */ // ... closed: function (ctx, cell) { return ctx.fill( cell.rectangle, ctx.createGradient(cell.rectangle, { 0: '#eee', 1: '#aaa' }) ); },

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

 /** @class Mines.View */ // ... numberColors: [null, '#009', '#060', '#550', '#808', '#900', '#555', '#055', '#000' ], number: function (number, ctx, cell) { var size = Math.round(cell.rectangle.height * 0.8); return this.empty(ctx, cell) .text({ text : number, color : this.numberColors[number], size : size, lineHeight: size, weight: 'bold', align : 'center', to : cell.rectangle }); }

हमारा कार्यान्वयन हमें कोशिकाओं का आकार बदलने की अनुमति देता है और वे वैसे भी बहुत अच्छे दिखेंगे:

न्यूनतम जनरेटर

जैसा कि आप देख सकते हैं, प्रतिपादन पूरी तरह से तैयार है। अब हमें बस एक सरल क्रिया करने की आवश्यकता है और सेल अपना स्वरूप बदल देगा।

हमारा डिबग कोड हटाएं और जनरेटर का उदाहरण बनाएं:

 /** @class Mines.Controller */ // .. start: function (images) { this.images = images; this.size = new Size(15, 8); this.mines = 20; this.view = new Mines.View( this, this.size ); this.generator = new Mines.Generator( this.size, this.mines ); }

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

मेरा पीढ़ी का एल्गोरिथ्म बहुत सरल होगा - मान्य बिंदुओं की सूची बनाएं (जिस पर क्लिक किया गया था उसे छोड़कर सब कुछ) - snapshot विधि, उसके बाद हम उनमें से यादृच्छिक संख्याओं की आवश्यक संख्या - createMines विधि:

 /** @class Mines.Generator */ atom.declare( 'Mines.Generator', { mines: null, initialize: function (fieldSize, minesCount) { this.fieldSize = fieldSize; this.minesCount = minesCount; }, /** @private */ snapshot: function (ignore) { var x, y, point, result = [], size = this.fieldSize; for (y = size.height; y--;) for (x = size.width; x--;) { point = new Point(x, y); if (!point.equals(ignore)) { result.push(point); } } return result; }, /** @private */ createMines: function (count, ignore) { var snapshot = this.snapshot( ignore ); return atom.array.create(count, function () { return snapshot.popRandom(); }); } });

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

 /** @class Mines.Generator */ // .. isReady: function () { return this.mines != null; }, isMine: function (point) { return this.mines[point.y][point.x]; }, generate: function (ignore) { var mines, minesIndex, size = this.fieldSize; mines = this.createMines(this.minesCount, ignore); minesIndex = atom.array.fillMatrix(size.width, size.height, 0); mines.forEach(function (point) { minesIndex[point.y][point.x] = 1; }); this.mines = minesIndex; },

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

 /** @class Mines.Generator */ // .. initialize: function (fieldSize, minesCount) { //       ,      this.bindMethods([ 'isValidPoint', 'isMine' ]); // .. getValue: function (point) { //    return this.getNeighbours(point) //      (1  0) .map(this.isMine) //       .sum(); }, // ,        isValidPoint: function (point) { return point.x >= 0 && point.y >= 0 && point.x < this.fieldSize.width && point.y < this.fieldSize.height; }, //   -   ,  ,     getNeighbours: function (point) { return point.neighbours.filter( this.isValidPoint ); },

उपयोगकर्ता सहभागिता

हमारे पास एक गेम इंजन है, अब हमें एक गेम के साथ यह सब करने की ज़रूरत है, न कि केवल तर्क। हम एक Action क्लास बनाते हैं जो सभी उपयोगकर्ता क्रियाओं के लिए जिम्मेदार होगा। पहली चीज जो हम करेंगे वह है उपयोगकर्ता की क्लिक पर प्रतिक्रिया। TileEngine.Mouse साथ TileEngine.Mouse हम क्षेत्र से संबंधित माउस घटनाओं को सुनेंगे। हम Mouse.prevent को 'contextmenu' Mouse.prevent 'contextmenu' ईवेंट पर Mouse.prevent ताकि कष्टप्रद मेनू पॉप न हो। क्लिक करते समय, हम बटन की जांच करते हैं। बायाँ माउस बटन 0 है, मध्य वाला 1 है, दायें वाला 2 है। याद रखें कि मूल खेल में, एक बाएँ क्लिक का मतलब एक सेल खोलना है, एक मध्य चीख का मतलब है कि उन सभी को खोलना, और एक राइट क्लिक का अर्थ है एक खदान स्थापित करना।

 /** @class Mines.Controller */ // .. start: function (images) { // .. this.action = new Mines.Action(this); }

 /** @class Mines.Action */ atom.declare( 'Mines.Action', { actions: [ 'open', 'all', 'close' ], initialize: function (controller) { this.controller = controller; this.bindMouse(); }, bindMouse: function () { var view, mouse; view = this.controller.view; mouse = new Mouse(view.app.container.bounds); new App.MouseHandler({ mouse: mouse, app: view.app }) .subscribe( view.element ); mouse.events.add( 'contextmenu', Mouse.prevent ); new TileEngine.Mouse( view.element, mouse ).events .add( 'click', function (cell, e) { this.activate(cell, e.button); }.bind(this)); }, activate: function (cell, actionCode) { console.log( cell.point.dump(), actionCode ); } });

पहली अन्तरक्रियाशीलता जोड़ें। हमें इंडेक्स द्वारा कॉल की जाने वाली विधि का नाम मिलेगा और उसी समय, हम सबसे सरल विधि लिखेंगे - close । यदि कक्ष बंद है, तो उस पर एक ध्वज सेट करें, यदि ध्वज पहले से सेल पर है, तो इसे बंद करें। अब आप पहली इंटरैक्शन देख सकते हैं - सेल पर एक झंडा सही माउस बटन के साथ दिखाई देता है।

 /** @class Mines.Action */ // ... activate: function (cell, actionCode) { if (typeof actionCode == 'number') { actionCode = this.actions[actionCode]; } this[actionCode](cell); }, close: function (cell) { if (cell.value == 'closed') { cell.value = 'flag'; } else if (cell.value == 'flag') { cell.value = 'closed'; } }, open: function (cell) { }, all: function (cell) { }

अब हम सेल के उद्घाटन का वर्णन करते हैं। शुरुआत के लिए, केवल उन कोशिकाओं को खोलें जो बंद हैं। किसी भी स्थिर संख्या और झंडे के साथ बातचीत करने के लिए कुछ भी नहीं है। दूसरे, हम जांचते हैं कि क्या हमारी खदानें तैयार हैं और यदि नहीं, तो जनरेटर शुरू करें।

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

 /** @class Mines.Action */ // ... open: function (cell) { if (cell.value != 'closed') return; var value, gen = this.controller.generator; if (!gen.isReady()) { gen.generate(cell.point); } if (gen.isMine(cell.point)) { this.lose(cell); } else { value = gen.getValue(cell.point); if (value) { cell.value = value; } else { this.openEmpty(cell); } } }, lose: function () { cell.value = 'explode'; }, openEmpty: function (cell) { cell.value = 'empty'; },

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

 /** @class Mines.Action */ // ... openNeighbours: function (cell) { this.controller.generator .getNeighbours(cell.point) .forEach(function (point) { this.open( this.getCell(point) ); }.bind(this)); }, openEmpty: function (cell) { cell.value = 'empty'; this.openNeighbours(cell); }, getCell: function (point) { return this.controller.view.engine.getCellByIndex(point); }, all: function (cell) { if (parseInt(cell.value)) { this.openNeighbours(cell); } },

हम नुकसान को प्रदर्शित करते हैं - हम उन सभी कोशिकाओं से गुजरते हैं जहां हमने इसे बंद कर दिया था और वास्तव में मेरा था - हम एक खदान खींचते हैं। जहां हमारे पास झंडा था, लेकिन वास्तव में कोई खदान नहीं हैं - हम एक त्रुटि प्रदर्शित करते हैं। हम हारने के बाद open और close तरीकों को भी रोकते हैं।

 /** @class Mines.Action */ // ... lost: false, lose: function (cell) { this.lost = true; cell.value = 'explode'; this.controller.view.engine.cells .forEach(this.checkCell.bind(this)); }, checkCell: function (cell) { if (cell.value == 'closed' || cell.value == 'flag') { var isMine = this.controller.generator.isMine(cell.point); if (isMine && cell.value == 'closed') { cell.value = 'mine'; } if (!isMine && cell.value == 'flag') { cell.value = 'wrong'; } } }, // ... close: function (cell) { if (this.lost) return; // ... open: function (cell) { if (this.lost) return; // ...

जीत!

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

 /** @class Mines.Action */ // ... initialize: function (controller) { // ... this.startTime = null; this.minesLeft = controller.mines; this.minesTrace = atom.trace(0); this.changeMines(0); this.emptyCells = controller.size.width * controller.size.height - this.minesLeft; }, changeMines: function (delta) { this.minesLeft += delta; this.minesTrace.value = "Mines: " + this.minesLeft; }, // ... open: function (cell) { // ... if (!gen.isReady()) { // ... this.startTime = Date.now(); } if (gen.isMine(cell.point)) { // ... } else { // ... if (--this.emptyCells == 0) { this.win(); } } }, // ... win: function () { var time = Math.round( (Date.now()-this.startTime) / 1000 ); alert.delay(100, window, ['Congratulations! Mines has been neutralized in '+ time +' sec!']); }, // ... close: function (cell) { // ... if (cell.value == 'closed') { // ... this.changeMines(-1); } else if (cell.value == 'flag') { // ... this.changeMines(+1); } },

HTML5 और LibCanvas पर क्लासिक सैपर

ड्राइंग

न्यूनतम जनरेटर

उपयोगकर्ता सहभागिता

जीत!

सैपर खेलते हैं

More articles: