फेजर में सैपर कैसे लिखें और एचटीएमएल 5 डेवलपर परीक्षण कार्य चलाएं

शुभ दोपहर, प्रिय सहयोगियों!

मेरा नाम अलेक्जेंडर है, मैं एचटीएमएल 5 गेम का डेवलपर हूं।

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



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

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

तो, बिल्ली के नीचे बहुत सारे टाइपस्क्रिप्ट कोड है!

परिचय

हम समस्या का संक्षिप्त विवरण देते हैं।

1. हम एक साधारण HTML5 गेम विकसित करेंगे - एक क्लासिक सैपर।
2. मुख्य उपकरण के रूप में हम फेजर 3, टाइपस्क्रिप्ट और वेबपैक का उपयोग करेंगे।
3. गेम को डेस्कटॉप के लिए डिज़ाइन किया जाएगा और ब्राउज़र में चलाया जाएगा।

हम अंतिम परियोजना के लिंक प्रदान करते हैं।


और सैपर के यांत्रिकी को याद करें, अगर अचानक कोई खेल के नियमों को भूल गया। लेकिन चूंकि यह एक असंभावित मामला है, नियमों को बिगाड़ने के तहत रखा गया है :)


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

1. तैयारी

1.1 परियोजना टेम्पलेट

डिफ़ॉल्ट फ़ैसर प्रोजेक्ट टेम्पलेट डाउनलोड करें। यह फ्रेमवर्क के लेखक से अनुशंसित टेम्पलेट है और यह हमें निम्नलिखित निर्देशिका संरचना प्रदान करता है:
हमारे प्रोजेक्ट के लिए, हमें वर्तमान index.js फ़ाइल की आवश्यकता नहीं है, इसलिए इसे हटा दें। फिर डायरेक्टरी /src/scripts/ बनाएं और index.ts खाली index.ts फ़ाइल index.ts । हम अपनी सभी स्क्रिप्ट इस फ़ोल्डर में जोड़ देंगे।
यह भी ध्यान में रखने योग्य है कि उत्पादन के लिए एक परियोजना का निर्माण करते समय, रूट में एक डायरेक्ट डायरेक्टरी बनाई जाएगी, जिसमें रिलीज बिल्ड रखा जाएगा।

1.2 विन्यास बनाएँ

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

webpack/base.js entry कुंजी जोड़ें, जो हमारे प्रोजेक्ट का निर्माण करते समय प्रवेश बिंदु को इंगित करता है, साथ ही ts-loader कॉन्फ़िगरेशन जो टीएस स्क्रिप्ट के निर्माण के नियमों का वर्णन करता है:

 // webpack/base.js //... module.exports = { entry: './src/scripts/index.ts', // ... resolve: { extensions: [ '.ts', '.tsx', '.js' ] }, module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, //... 

हमें प्रोजेक्ट रूट में tsconfig.json फ़ाइल भी बनानी होगी। मेरे लिए इसमें निम्नलिखित सामग्री है:

 { "compilerOptions": { "module": "commonjs", "lib": [ "dom", "es5", "es6", "es2015", "es2017", "es2015.promise" ], "target": "es5", "skipLibCheck": true }, "exclude": ["node_modules", "dist"] } 

1.3 मॉड्यूल स्थापित करना

Package.json से सभी निर्भरताएँ स्थापित करें और उन्हें टाइपस्क्रिप्ट और ts-लोडर मॉड्यूल जोड़ें:

 npm i npm i typescript --save-dev npm i ts-loader --save-dev 

अब परियोजना विकास शुरू करने के लिए तैयार है। हमारे पास हमारे निपटान में 2 कमांड हैं जो पहले से ही package.json संपत्ति में scripts संपत्ति में परिभाषित हैं। package.json फ़ाइल।

1. डिबगिंग के लिए एक प्रोजेक्ट बनाएं और एक ब्राउज़र में एक स्थानीय सर्वर के माध्यम से खोलें
   
   

    npm start 

2. बिल्ड फॉर सेल चलाएं और रिलीज़ बिल्ड को डिस्ट / फ़ोल्डर में डालें
   
   

    npm run build 

1.4 संपत्ति की तैयारी

इस गेम की सभी संपत्तियां ईमानदारी से OpenGameArt (संस्करण 61x61) से डाउनलोड की जाती हैं और इनमें लाइसेन्स फ़्री का उपयोग करने के लिए लाइसेंस प्राप्त होता है , जिसे पैक वाला पृष्ठ सावधानीपूर्वक हमें बताता है)। वैसे, लेख में प्रस्तुत कोड में एक ही लाइसेंस है! ;)

मैंने डाउनलोड सेट से घड़ी की छवि को हटा दिया, और बाकी फ़ाइलों का नाम बदल दिया ताकि फ्रेम नाम प्राप्त करने में आसानी हो। नीचे स्क्रीन पर नामों और संबंधित फाइलों की सूची प्रदर्शित की गई है।

परिणामी स्प्राइट्स से, हम TexturePacker प्रोग्राम में एक Phaser JSONArray प्रारूप एटलस बनाएंगे (एक मुक्त संस्करण के लिए पर्याप्त से अधिक है, मुझे अभी तक कोई काम नहीं मिला है) और प्रोजेक्ट डायरेक्टरी src/assets/ में उत्पन्न स्प्रिटशीट । Png और spritesheet.json फाइलें डालें ।

2. दृश्य बनाना

२.१ प्रवेश बिंदु

हम वेबपैक कॉन्फ़िगरेशन में वर्णित प्रविष्टि बिंदु बनाकर विकास शुरू करते हैं।

 // src/scripts/index.ts import * as Phaser from "phaser"; new Phaser.Game({ type: Phaser.AUTO, parent: "minesweeper", width: window.innerWidth, height: window.innerHeight, backgroundColor: "#F0FFFF", scene: [] }); 

चूंकि हमारे पास जो गेम है वह डेस्कटॉप के लिए डिज़ाइन किया गया है और पूरी स्क्रीन को भर देगा, हम साहसपूर्वक width और height क्षेत्रों के लिए ब्राउज़र की पूरी चौड़ाई और ऊंचाई का उपयोग करते हैं।
scene क्षेत्र वर्तमान में एक खाली सरणी है और हम इसे ठीक कर देंगे!

२.२ आरंभ दृश्य

पहले दृश्य के वर्ग को src/scripts/scenes/StartScene.ts :

 export class StartScene extends Phaser.Scene { constructor() { super('Start'); } public preload(): void { } public create(): void { } } 

Phaser.Scene के मान्य उत्तराधिकार के लिए Phaser.Scene हम मूल श्रेणी के निर्माता के पैरामीटर के रूप में दृश्य नाम पास करते हैं।

यह दृश्य उपयोगकर्ता को खेल के लिए आमंत्रित करते हुए संसाधन प्रीलोडिंग और स्टार्ट स्क्रीन की कार्यक्षमता को संयोजित करेगा।

आमतौर पर मेरी परियोजनाओं में एक खिलाड़ी दो दृश्यों से गुजरता है, इससे पहले कि वह इस क्रम में शुरू हो जाए,

 Boot => Preload => Start 

लेकिन इस मामले में, खेल इतना सरल है, और इतनी कम संपत्तियां हैं कि प्रीलोड को एक अलग दृश्य में डालने का कोई कारण नहीं है और इससे भी अधिक प्रारंभिक प्रारंभिक Boot लोडर है।

हम preload विधि में सभी परिसंपत्तियों को लोड करेंगे। भविष्य में निर्मित एटलस के साथ काम करने में सक्षम होने के लिए, हमें 2 चरण करने की आवश्यकता है:

1. require उपयोग से png और json एटलस दोनों फाइलें प्राप्त करें:
   
   

    // StartScene.ts const spritesheetPng = require("./../../assets/spritesheet.png"); const spritesheetJson = require("./../../assets/spritesheet.json"); // ... 

   
   
2. उन्हें आरंभिक दृश्य के preload विधि में लोड करें:
   
   

    // StartScene.ts // ... public preload(): void { this.load.atlas("spritesheet", spritesheetPng, spritesheetJson); } // ... 

   
   

2.3 शुरुआती दृश्य के ग्रंथ

शुरुआती सीन में, 2 काम करने बाकी हैं:

1. खिलाड़ी को खेल शुरू करने का तरीका बताएं
2. खिलाड़ी की पहल पर खेल शुरू करें

पहले बिंदु को पूरा करने के लिए, हम पहले ग्रंथों और उनकी शैलियों का वर्णन करने के लिए दृश्य फ़ाइल की शुरुआत में दो गणनाएँ बनाते हैं:

 // StartScene.js enum Texts { Title = 'Minesweeper HTML5', Message = 'Click anywhere to start' } enum Styles { Color = '#008080', Font = 'Arial' } //... 

और फिर create विधि में दोनों ग्रंथों को ऑब्जेक्ट के रूप में create । आपको याद दिला दूं कि Phaser में दृश्यों के create तरीका preload विधि में सभी संसाधनों को लोड करने के बाद ही कहा जाएगा और यह हमारे लिए काफी उपयुक्त है।

 // StartScene.js //... public create(): void { this.add.text( this.cameras.main.centerX, this.cameras.main.centerY - 100, Texts.Title, {font: `52px ${Styles.Font}`, fill: Styles.Color}) .setOrigin(0.5); this.add.text( this.cameras.main.centerX, this.cameras.main.centerY + 100, Texts.Message, {font: `28px ${Styles.Font}`, fill: Styles.Color}) .setOrigin(0.5); } //... 

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

2.4 खेल के स्तर पर संक्रमण

अंतिम बात जो हम इस दृश्य में करेंगे, उस पर क्लिक करके खिलाड़ी को गेम में लॉन्च करने के लिए माउस क्लिक इवेंट को ट्रैक करना है:

 // StartScene.js //... public create(): void { //... this.input.once('pointerdown', () => { this.scene.start('Game'); }); } //... 

2.5 स्तर का दृश्य

"Game" पैरामीटर को देखते हुए this.scene.start विधि को पारित किया गया this.scene.start आपने पहले ही अनुमान लगा लिया था कि यह एक दूसरा दृश्य बनाने का समय था, जो मुख्य खेल तर्क को संसाधित करेगा। src/scripts/scenes/GameScene.ts :

 export class GameScene extends Phaser.Scene { constructor() { super('Game'); } public create(): void { } } 

इस दृश्य में, हमें preload विधि की आवश्यकता नहीं है, क्योंकि हमने पहले ही सभी आवश्यक संसाधनों को पिछले दृश्य में लोड कर दिया है।

2.6 प्रवेश बिंदु पर दृश्य सेट करना

अब जब दोनों दृश्य बनते हैं, तो उन्हें हमारे प्रवेश बिंदु में जोड़ें
src/scripts/index.ts :

 //... import { StartScene } from "./scenes/StartScene"; import { GameScene } from "./scenes/GameScene"; //... new Phaser.Game({ // ... scene: [StartScene, GameScene] }); 

3. खेल वस्तुओं

तो, GameScene वर्ग खेल-स्तर के तर्क को लागू करेगा। और हमें सैपर गेम के स्तर से क्या उम्मीद है? नेत्रहीन, हम बंद कोशिकाओं के साथ एक खेल मैदान देखने की उम्मीद करते हैं। हम जानते हैं कि क्षेत्र एक तालिका है, जिसका अर्थ है कि इसमें दी गई पंक्तियों और स्तंभों की संख्या है, जिनमें से कई में बम आराम से रखे गए हैं। इस प्रकार, हमारे पास एक अलग इकाई बनाने के लिए पर्याप्त जानकारी है जो खेल के मैदान का वर्णन करता है।

3.1 खेल बोर्ड

वह src/scripts/models/Board.ts बनाएँ जिसमें हम Board वर्ग रखते हैं:

 import { Field } from "./Field"; export class Board extends Phaser.Events.EventEmitter { private _scene: Phaser.Scene = null; private _rows: number = 0; private _cols: number = 0; private _bombs: number = 0; private _fields: Field[] = []; constructor(scene: Phaser.Scene, rows: number, cols: number, bombs: number) { super(); this._scene = scene; this._rows = rows; this._cols = cols; this._bombs = bombs; this._fields = []; } public get cols(): number { return this._cols; } public get rows(): number { return this._rows; } } 

आइए कक्षा को Phaser.Events.EventEmitter का उत्तराधिकारी बनाते हैं ताकि घटनाओं को पंजीकृत करने और कॉल करने के लिए इंटरफ़ेस का उपयोग किया जा सके, जिसकी हमें भविष्य में आवश्यकता होगी।

Field क्लास की वस्तुओं की एक सरणी को _fields निजी संपत्ति में संग्रहीत किया जाएगा। हम इस मॉडल को बाद में लागू करेंगे।

हम खेल के मैदान की पंक्तियों और स्तंभों की संख्या को इंगित करने के लिए निजी संख्यात्मक गुण _rows और _cols सेट करते हैं। _rows और _cols पढ़ने के लिए सार्वजनिक _rows बनाएँ।

_bombs फ़ील्ड हमें उन बमों की संख्या बताती है जिन्हें स्तर के लिए उत्पन्न करने की आवश्यकता होगी। और _scene पैरामीटर में _scene हम GameScene गेम दृश्य के ऑब्जेक्ट के लिए एक संदर्भ देते हैं, जिसमें हम Board क्लास का एक उदाहरण बनाएंगे।

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

एक बार जब हमने बोर्ड निर्माण इंटरफ़ेस पर फैसला कर लिया है, तो मैं इसे GameScene सीन को अंतिम रूप देते हुए, इसे लेवल सीन में इनिशियलाइज़ करने का प्रस्ताव करता GameScene :

  // GameScene.ts import { Board } from "../models/Board"; const Rows = 8; const Cols = 8; const Bombs = 8; export class GameScene extends Phaser.Scene { private _board: Board = null; //... public create(): void { this._board = new Board(this, Rows, Cols, Bombs); } } 

हम दृश्य फ़ाइल की शुरुआत में बोर्ड मापदंडों को स्थिरांक तक ले जाते हैं और इस वर्ग का एक उदाहरण बनाते समय उन्हें Board कंस्ट्रक्टर के पास भेजते हैं।

3.2 सेल मॉडल

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

कोशिकाओं को एक अलग इकाई के रूप में भी चुना जाता है। src/scripts/models/Field.ts जिसमें हम उस वर्ग को जगह देंगे जो सेल का वर्णन करता है:

 import { Board } from "./Board"; export class Field extends Phaser.Events.EventEmitter { private _scene: Phaser.Scene = null; private _board: Board = null; private _row: number = 0; private _col: number = 0; constructor(scene: Phaser.Scene, board: Board, row: number, col: number) { super(); this._init(scene, board, row, col); } public get col(): number { return this._col; } public get row(): number { return this._row; } public get board(): Board { return this._board; } private _init(scene: Phaser.Scene, board: Board, row: number, col: number): void { this._scene = scene; this._board = board; this._row = row; this._col = col; } } 

प्रत्येक सेल में पंक्ति और स्तंभ मीट्रिक होनी चाहिए जिसमें वह स्थित है। हम बोर्ड और दृश्य की वस्तुओं के लिए लिंक स्थापित करने के लिए पैरामीटर _board और _scene सेट करते हैं। हम _row , _col और _board पढ़ने के लिए _row लागू _board ।

३.३ सेल व्यू

अमूर्त सेल बनाया गया है और अब हम इसकी कल्पना करना चाहते हैं। स्क्रीन पर एक सेल प्रदर्शित करने के लिए, आपको इसका दृश्य बनाने की आवश्यकता है। src/scripts/views/FieldView.ts और उसमें व्यू क्लास डालें:

 import { Field } from "../models/Field"; export class FieldView extends Phaser.GameObjects.Sprite { private _model: Field = null; constructor(scene: Phaser.Scene, model: Field) { super(scene, 0, 0, 'spritesheet', 'closed'); this._model = model; this._init(); this._create(); } private _init(): void { } private _create(): void { } } 

कृपया ध्यान दें कि हमने इस वर्ग को Phaser.GameObjects.Sprite का वंशज बनाया है। फेजर शब्दों में, यह वर्ग स्प्राइट प्रीफैब बन गया है। यही है, मुझे स्प्राइट के गेम ऑब्जेक्ट की कार्यक्षमता मिली, जिसे हम अपने स्वयं के तरीकों के साथ आगे बढ़ाएंगे।

आइए इस वर्ग के निर्माता को देखें। यहां, सबसे पहले, हमें पैरामीटर के निम्न सेट के साथ मूल वर्ग के निर्माता को कॉल करना होगा:

• दृश्य ऑब्जेक्ट से लिंक (जैसा कि मैंने खंड 3.1 में चेतावनी दी है: फेज़र को स्प्राइट प्रदान करने के लिए हमें वर्तमान दृश्य से लिंक करना होगा)
• x और y कैनवास पर समन्वय करते हैं
• स्ट्रिंग कुंजी जो एटलस के लिए उपलब्ध है, जिसे हमने प्रारंभ दृश्य के preload विधि में लोड किया था
• फ़्रेम एटल कुंजी इस एटलस में जिसे आप स्प्राइट प्रदर्शित करने के लिए चुनना चाहते हैं

निजी _model संपत्ति में मॉडल (अर्थात Field वर्ग का एक उदाहरण) का संदर्भ सेट करें।

हमने विवेकपूर्ण _create 2 वर्तमान में खाली _init और _create शुरू _create , जिन्हें हम थोड़ी देर बाद लागू करेंगे।

३.४ दृश्य वर्ग में स्प्राइट बनाना

तो, दृश्य बनाया गया था, लेकिन वह अभी भी नहीं जानती है कि स्प्राइट कैसे खींचना है। स्प्राइट को कैनवास पर हमारे द्वारा आवश्यक फ्रेम के साथ रखने के लिए, आपको अपनी निजी _create विधि बनाने के लिए संशोधित करना होगा:

 // FieldView.js //... private _create(): void { this.scene.add.existing(this); //      this.setOrigin(0.5); //  pivot point    } //... 

3.5 स्प्राइट पोजिशनिंग

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

वर्ग में _position गुण जोड़ें, जो खेल के मैदान पर सेल के अंतिम निर्देशांक के लिए जिम्मेदार है:

 // FieldView.ts //... interface Vec2 {x: number, y: number}; export class FieldView extends Phaser.GameObjects.Sprite { private _position: Vec2 = {x: 0, y: 0}; //... 

चूंकि हम बोर्ड को संरेखित करना चाहते हैं, और तदनुसार कोशिकाओं को स्क्रीन के केंद्र के सापेक्ष, हमें _offset संपत्ति की भी आवश्यकता है, जो स्क्रीन के बाएं और शीर्ष किनारों के सापेक्ष इस विशेष सेल की ऑफसेट का संकेत देती है। इसे एक निजी गटर से जोड़ें:

 // FieldView.ts //... private get _offset(): Vec2 { return { x: (this.scene.cameras.main.width - this._model.board.cols * this.width) / 2, y: (this.scene.cameras.main.height - this._model.board.rows * this.height) / 2 }; } //... 

इस प्रकार, हम:

1. इसमें कुल स्क्रीन चौड़ाई मिल गई this._scene.cameras.main.width ।
2. हमें एक सेल की चौड़ाई से कोशिकाओं की संख्या को गुणा करके बोर्ड की कुल चौड़ाई मिली: this._board.cols * this.width / this._board.cols * this.width ।
3. स्क्रीन की चौड़ाई से बोर्ड की चौड़ाई को हटाते हुए, हमें स्क्रीन पर जगह मिली, बोर्ड द्वारा कब्जा नहीं किया गया।
4. परिणामी संख्या को 2 से विभाजित करते हुए, हमें बोर्ड के बाईं और दाईं ओर इंडेंट वैल्यू मिली।
5. इस इंडेंटेशन के मूल्य द्वारा प्रत्येक सेल को शिफ्ट करके, हम x अक्ष के साथ पूरे बोर्ड के संरेखण की गारंटी देते हैं।

हम ऊर्ध्वाधर विस्थापन प्राप्त करने के लिए बिल्कुल समान कार्य करते हैं।

यह _init विधि में आवश्यक कोड जोड़ने के लिए बना हुआ है:

 // FieldView.ts // ... private _init(): void { const offset = this._offset; this.x = this._position.x = offset.x + this.width * this._model.col + this.width / 2; this.y = this._position.y = offset.y + this.height * this._model.row + this.height / 2; } // ... 

गुण यह। this.width , this.width , this.width , यह। this.width और this.height यहाँ है। मूल गुण Phaser.GameObjects.Sprite के मूल गुण हैं। इस this.x और this.y के गुणों को बदलने से कैनवास पर स्प्राइट की सही स्थिति हो जाती है।

3.6 FieldView का एक उदाहरण बनाना

Field क्लास में एक दृश्य बनाएँ:

 // Field.ts // ... private _view: FieldView = null; public get view(): FieldView { return this._view; } private _init(scene: Phaser.Scene, board: Board, row: number, col: number): void { //... this._view = new FieldView(this._scene, this); } // ... 

3.7 प्रदर्शन बोर्ड फ़ील्ड।

चलो Board कक्षा में वापस जाते हैं, जो अनिवार्य रूप से Field ऑब्जेक्ट का संग्रह है और कोशिकाओं का निर्माण करेगा।

हम बोर्ड निर्माण कोड को एक अलग _create विधि में _create और इस विधि को कंस्ट्रक्टर से कॉल करेंगे। यह जानते हुए कि _create पद्धति में हम न केवल कोशिकाएँ बनाएंगे, हम एक अलग _createFields विधि में कोशिकाएँ बनाने के लिए कोड _createFields ।

 // Board.ts constructor(scene: Phaser.Scene, rows: number, cols: number, bombs: number) { // ... this._create(); } private _create(): void { this._createFields(); } private _createFields(): void { } 

यह इस विधि में है कि हम नेस्टेड लूप में कोशिकाओं की वांछित संख्या बनाएंगे:

 // Board.ts // ... private _createFields(): void { for (let row = 0; row < this._rows; row++) { for (let col = 0; col < this._cols; col++) { this._fields.push(new Field(this._scene, this, row, col)); } } } //... 

कमांड के साथ डिबगिंग के लिए पहली बार विधानसभा चलाने का समय आ गया है

 npm start 

सुनिश्चित करें कि स्क्रीन के केंद्र में हमें 8 पंक्तियों में 64 सेल देखने की उम्मीद है।

3.8 बम बनाना

इससे पहले, मैंने रिपोर्ट किया था कि Board कक्षा के _create पद्धति में, हम केवल फ़ील्ड नहीं बनाएंगे। और क्या? इसमें बमों का निर्माण भी होगा, और बनाई गई कोशिकाओं को पड़ोसी बमों की संख्या में स्थापित करना होगा। चलो खुद बमों से शुरू करते हैं।

हमें यादृच्छिक कोशिकाओं में बोर्ड पर एन बम रखने की आवश्यकता है। हम एक अनुमानित एल्गोरिथ्म के साथ बम बनाने की प्रक्रिया का वर्णन करते हैं:

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

एक यादृच्छिक संख्या उत्पन्न करने के लिए, हम स्थैतिक विधि Phaser.Math.Between उपयोग करते हैं।

 // Board.ts //... private _createBombs(): void { let count = this._bombs; //      while (count > 0) { //       let field = this._fields[Phaser.Math.Between(0, this._fields.length - 1)]; //    if (field.empty) { //     field.setBomb(); //     --count; //    } } } 

this._createBombs(); में इस Board.ts this._createBombs(); फ़ाइल को लिखने के लिए मत भूलना this._createBombs(); _create पद्धति के अंत में

जैसा कि आपने पहले ही देखा था, इस कोड को सही तरीके से काम करने के लिए, आपको empty setBomb और setBomb विधि को जोड़कर Field वर्ग को परिष्कृत करने की आवश्यकता setBomb ।

फ़ील्ड _value एक निजी _value फ़ील्ड जोड़ें, जो सेल की सामग्री को विनियमित करेगा। हम निम्नलिखित समझौतों को स्वीकार करते हैं।

इन नियमों का पालन करते हुए, हम Field क्लास में ऐसे तरीके विकसित करेंगे जो कि _value प्रॉपर्टी के साथ काम करते हैं:

 // Field.ts // ... private _value: number = 0; // ... public get value(): number { return this._value; } public set value(value) { this._value = value; } public get empty(): boolean { return this._value === 0; } public get mined(): boolean { return this._value === -1; } public get filled(): boolean { return this._value > 0; } public setBomb(): void { this._value = -1; } // ... 

3.9 मान सेट करना

बमों को व्यवस्थित किया जाता है और अब हमारे पास सभी कोशिकाओं में संख्यात्मक मान सेट करने के लिए सभी डेटा होते हैं जिनकी आवश्यकता होती है।

आपको याद दिला दूं कि सैपर के नियमों के अनुसार, सेल में वह संख्या होनी चाहिए जो इस सेल के बगल में स्थित बमों की संख्या से मेल खाती हो। इस नियम के आधार पर, हम संबंधित pseudocode लिखते हैं।

Board कक्षा में, एक नई विधि बनाएं और निर्दिष्ट कोडकोड को वास्तविक कोड में अनुवादित करें:

 // Board.ts //... private _createValues() { //      this._fields.forEach(field => { //      if (field.mined) { //     field.getClosestFields().forEach(item => { //      if (item.value >= 0) { ++item.value; } }); } }); } //... 

आइए देखें कि हम कौन से इंटरफेस का उपयोग करते हैं जो लागू नहीं होते हैं। पड़ोसी कोशिकाओं को प्राप्त करने के लिए आपको getClosestFields विधि को जोड़ना होगा।

पड़ोसी कोशिकाओं की पहचान कैसे करें?

उदाहरण के लिए, बोर्ड के किसी भी सेल पर विचार करें जो किनारे पर नहीं है, जो कि चरम पंक्ति में नहीं है और चरम कॉलम में नहीं है। ऐसी कोशिकाओं में पड़ोसियों की अधिकतम संख्या होती है: शीर्ष पर 1, तल पर 1, बाईं तरफ 3 और दाईं ओर 3 (विकर्ण पर कोशिकाओं सहित)।

इस प्रकार, प्रत्येक पड़ोसी कोशिका में, संकेतक _row और _col 1 से अधिक भिन्न नहीं होते हैं। इसका मतलब है कि हम पहले से ही वर्तमान फ़ील्ड के साथ पैरामीटर _row और _col बीच अंतर को निर्दिष्ट कर सकते हैं। फ़ाइल के आरंभ में वर्ग विवरण में एक स्थिरांक जोड़ें:

 // Field.ts const Positions = [ {row : 0, col : 1}, //  {row : 0, col : -1}, //  {row : 1, col : 0}, //  {row : 1, col : 1}, //   {row : 1, col : -1}, //   {row : -1, col : 0}, //  {row : -1, col : 1}, //   {row : -1, col : -1} //   ]; //... 

और अब हम लापता विधि को जोड़ सकते हैं, जिसमें हम इस सरणी के माध्यम से लूप करेंगे:

 // Field.ts //... public getClosestFields(): Field[] { let results = []; //      Positions.forEach(position => { //      let field = this._board.getField(this._row + position.row, this._col + position.col); //       if (field) { //     results.push(field); } }); return results; }; //... 

प्रत्येक पुनरावृत्ति पर field चर की जांच करना न भूलें, क्योंकि बोर्ड पर सभी कोशिकाओं में 8 पड़ोसी नहीं हैं। उदाहरण के लिए, ऊपरी बाएं सेल में इसके बाईं ओर पड़ोसी नहीं होंगे, और इसी तरह।

यह getField विधि को लागू करने और Board क्लास में _create पद्धति में सभी आवश्यक कॉल को जोड़ने के लिए बनी हुई है

 // Board.ts //... public getField(row: number, col: number): Field { return this._fields.find(field => field.row === row && field.col === col); } //... private _create(): void { this._createFields(); this._createBombs(); this._createValues(); } //... 

4. इनपुट घटनाओं को संभालना

4.1 ट्रैकिंग माउस क्लिक की घटनाओं

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

सबसे पहले, हमें इस पर क्लिक करने की आवश्यकता है। कक्षा में, FieldViewविधि के बहुत अंत में _createनिम्न कोड जोड़ें :

 // FielView.ts //... private _create(): void { // ... this.setInteractive(); } //... 

फ़ेसर में, आप अलग-अलग घटनाओं के लिए नाम स्थान से वस्तुओं की सदस्यता ले सकते हैं Phaser.GameObjects। विशेष रूप से, हम क्लिक इवेंट ( pointerdown) स्प्राइट के प्रीफैब को सदस्यता लेंगे , जो कि FieldViewविरासत में मिली एक वर्ग की वस्तु है Phaser.GameObjects.Sprite।

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

अब जब हमारा स्प्राइट इंटरेक्टिव हो गया है, तो कक्षा Boardमें उस स्थान पर लौटते हैं जहाँ पर नए मॉडल ऑब्जेक्ट बनाए जाते हैं Field, अर्थात् विधि के लिए _createFieldsऔर कॉलबैक को दृश्य के लिए कॉलबैक रजिस्टर करने के लिए:

 // Board.ts //... private _createFields(): void { for (let row = 0; row < this._rows; row++) { for (let col = 0; col < this._cols; col++) { const field = new Field(this._scene, this, row, col) field.view.on('pointerdown', this._onFieldClick.bind(this, field)); this._fields.push(field); } } } //... 

एक बार जब हम स्थापित कर लेते हैं कि स्प्राइट पर क्लिक करके हम विधि को चलाना चाहते हैं _onFieldClick, तो हमें इसे लागू करने की आवश्यकता है। लेकिन हम कक्षा से क्लिक को संसाधित करने के तर्क को हटा देंगे Board। एक राय है कि इनपुट के आधार पर मॉडल को संसाधित करना बेहतर है और तदनुसार अपने डेटा को एक अलग नियंत्रक में बदल दें, जिसकी समानता हमारे पास गेम दृश्य की कक्षा है GameScene। इसलिए, हमें क्लिक ईवेंट को कक्षा Boardसे दृश्य तक आगे ले जाना होगा । तो हम करेंगे:

 // Board.ts //... private _onFieldClick(field: Field, pointer: Phaser.Input.Pointer): void { if (pointer.leftButtonDown()) { this.emit(`left-click`, field); } else if (pointer.rightButtonDown()) { this.emit(`right-click`, field); } } //... 

यहां हम केवल क्लिक इवेंट को फेंक नहीं रहे हैं जैसा कि यह था, लेकिन यह भी निर्दिष्ट करना कि यह कौन सा क्लिक था। यह भविष्य में उपयोगी होगा, जब दृश्य वर्ग में हम प्रत्येक विकल्प को अलग तरीके से संसाधित करेंगे। बेशक, क्लिक इवेंट को भेजना संभव होगा क्योंकि यह है, लेकिन हम दृश्य कोड को सरल बना देंगे, जिससे कि घटना के संबंध में कुछ तर्क कक्षा में ही रह जाएंगे Field।

खैर, अब खेल के दृश्य की कक्षा में वापस आते हैं GameSceneऔर विधि के अंत में एक _createकोड जोड़ते हैं जो कोशिकाओं पर एक क्लिक की घटनाओं को ट्रैक करता है:

 // Board.ts //... import { Field } from "../models/Field"; //... public create(): void { this._board = new Board(this, Rows, Cols, Bombs); this._board.on('left-click', this._onFieldClickLeft, this); this._board.on('right-click', this._onFieldClickRight, this); } private _onFieldClickLeft(field: Field): void { } private _onFieldClickRight(field: Field): void { } //... 

4.2। लेफ्ट क्लिक प्रोसेसिंग

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

1. बंद सेल पर क्लिक करते समय, इसे खोला जाना चाहिए
2. अगर एक खुली सेल में एक खदान है - खेल खो गया है
3. यदि ओपन सेल में कोई खदानें या मान नहीं हैं, तो मिन पड़ोसी कोशिकाओं में नहीं है, इस मामले में आपको सभी पड़ोसी सेल खोलने की जरूरत है और ऐसा तब तक करना है जब तक कि ओपन सेल में मूल्य प्रकट नहीं होता है।
4. जब आप एक खुली सेल पर क्लिक करते हैं, तो आपको यह जांचना चाहिए कि क्या सभी झंडे सही तरीके से सेट किए गए हैं और यदि ऐसा है, तो गेम को जीत के साथ समाप्त करें

और अब, आवश्यक कार्यक्षमता की समझ को आसान बनाने के लिए, हम उपरोक्त तर्क को छद्म कोड में अनुवाद करते हैं:

अब हमें इस बात की समझ है कि प्रोग्राम करने की क्या आवश्यकता है। हम विधि को लागू करते हैं _onFieldClickLeft:

 // GameScene.ts //... private _onFieldClickLeft(field: Field): void { if (field.closed) { //    field.open(); //   if (field.mined) { //    field.exploded = true; this._onGameOver(false); //   } else if (field.empty) { //    this._board.openClosestFields(field); //   } } else if (field.opened) { //    if (this._board.completed) { //       this._onGameOver(true); //   } } } //... 

और फिर, हमेशा की तरह, हम कक्षाओं को अंतिम रूप देंगे Fieldऔर Boardउन तरीकों को लागू करेंगे, जिन्हें हम हैंडलर में कहते हैं।

हम एन्यूमरेशन में सेल के 3 संभावित राज्यों को इंगित करते हैं States, एक फ़ील्ड जोड़ते हैं _stateऔर प्रत्येक संभावित राज्य के लिए एक गेट्टर लागू करते हैं:

 // Field.ts enum States { Closed = 'closed', Opened = 'opened', Marked = 'flag' }; export class Field extends Phaser.Events.EventEmitter { private _state: string = States.Closed; //... public get marked(): boolean { return this._state === States.Marked; } public get closed(): boolean { return this._state === States.Closed; } public get opened(): boolean { return this._state === States.Opened; } //... 

अब हमारे पास यह संकेत करने के लिए राज्य हैं कि सेल बंद है या नहीं, हम एक ऐसा तरीका जोड़ सकते हैं openजो राज्य को बदल देगा:

 // Field.ts //... public open(): void { this._setState(States.Opened); } private _setState(state: string): void { if (this._state !== state) { this._state = state; this.emit('change'); } } //... 

मॉडल की स्थिति में प्रत्येक परिवर्तन को ऐसी घटना को ट्रिगर करना चाहिए जो यह रिपोर्ट करता है। इसलिए, हम एक अतिरिक्त निजी पद्धति शुरू करते हैं _setStateजिसमें राज्य परिवर्तन के पूरे तर्क को लागू किया जाएगा। इस पद्धति को मॉडल के सभी सार्वजनिक तरीकों में बुलाया जाएगा, जिसे अपनी स्थिति बदलनी चाहिए। स्पष्ट रूप से इंगित की गई फ़ील्ड ऑब्जेक्ट को इंगित करने के लिए

बूलियन ध्वज जोड़ें_exploded

 // Field.ts private _exploded: boolean = false; //... public set exploded(exploded: boolean) { this._exploded = exploded; this.emit('change'); } public get exploded(): boolean { return this._exploded; } //... 

अब कक्षा खोलें Boardऔर उसमें विधि लागू करें openClosestFields। यह विधि पुनरावर्ती है और इसका कार्य पैरामीटर में स्वीकृत सेल के सापेक्ष सभी खाली पड़ोसी क्षेत्रों को खोलना होगा।
एल्गोरिथ्म इस प्रकार होगा:

  :                 

और इस बार हमारे पास इस पद्धति के पूर्ण कार्यान्वयन के लिए पहले से ही सभी आवश्यक इंटरफेस हैं:

 // Board.ts //... public openClosestFields(field: Field): void { field.getClosestFields().forEach(item => {//     if (item.closed) {//    item.open();//   if (item.empty) {//    this.openClosestFields(item);//     } } }); } //... 

बोर्ड पर झंडे के सही स्थान को इंगित completedकरने के लिए कक्षा में एक गेट्टर जोड़ें Board। यदि कोई बोर्ड सफलतापूर्वक मंजूरी दे दी गई है तो हम कैसे निर्धारित कर सकते हैं? सही ढंग से चिह्नित फ़ील्ड की संख्या बोर्ड पर बमों की कुल संख्या के बराबर होनी चाहिए।

 // Board.ts //... public get completed(): boolean { return this._fields.filter(field => field.completed).length === this._bombs; } //... 

यह विधि एटर को सरणी _fieldsको फ़िल्टर करती है completed, जिसे फ़ील्ड चिह्न की वैधता का संकेत देना चाहिए। यदि फ़िल्टर किए गए सरणी की लंबाई (जिसमें केवल सही ढंग से चिह्नित फ़ील्ड गिरते हैं, जिसके लिए गेट्टर completedपहले से ही वर्ग के लिए ज़िम्मेदार है Field) फ़ील्ड मान _bombs(यानी बोर्ड पर बमों की संख्या ) के बराबर है , तो हम वापस लौटते हैं true, दूसरे शब्दों में, हम इस गेम को जीतने पर विचार करते हैं।
हम एक कॉल के साथ पूरे बोर्ड को खोलने का अवसर भी नहीं छोड़ते हैं, हमें स्तर के अंत में क्या करना है। हम इस सुविधा को कक्षा में भी जोड़ेंगे Board:

 // Board.ts //... public open(): void { this._fields.forEach(field => field.open()); } //... 

यह completedवर्ग के लिए एक गॉटर जोड़ना बाकी है Field। किस क्षेत्र में क्षेत्र को सफलतापूर्वक मंजूरी दे दी जाएगी? यदि इसे खनन और ध्वजांकित किया जाता है। दोनों आवश्यक गेट्स पहले से ही हैं और हम इस विधि को जोड़ सकते हैं:

 // Field.ts //... public get completed(): boolean { return this.marked && this.mined; } //... 

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

 // GameScene.ts //... private _onGameOver(status: boolean) { this._board.off('left-click', this._onFieldClickLeft, this); this._board.off('right-click', this._onFieldClickRight, this); this._board.open(); } //... 

4.3 फील्ड प्रदर्शन

इससे पहले कि आप राइट-क्लिक को संसाधित करना शुरू करें, हम सीखेंगे कि नई खोली गई कोशिकाओं को कैसे फिर से तैयार करें।

इससे पहले कक्षा में, Fieldहमने एक ऐसी विधि विकसित की जो _setStateएक घटना को आग लगा देती है changeजब मॉडल की स्थिति बदल जाती है। हम इसका उपयोग करेंगे और कक्षा में हम FieldViewइस घटना का पता लगाएंगे :

 // FieldView.ts //... private _init(): void { //... this._model.on('change', this._onStateChange, this); } private _onStateChange(): void { this._render(); } private _render(): void { this.setFrame(this._frameName); } //... 

हमने विशेष रूप से मध्यवर्ती विधि _onStateChangeको मॉडल परिवर्तन घटना का कॉलबैक बनाया । भविष्य में, हमें यह जांचने की आवश्यकता होगी कि प्रदर्शन को समझने के लिए मॉडल को कैसे बदला गया है _render।

एक नए राज्य में सेल के वर्तमान स्प्राइट को दिखाने के लिए, आपको इसके फ्रेम को बदलने की आवश्यकता है। चूंकि हमने एटलस को संपत्ति के रूप में लोड किया है, इसलिए हम setFrameवर्तमान फ़्रेम को नए में बदलने के लिए विधि को कॉल कर सकते हैं ।

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

हमें सभी राज्यों का विवरण मिला है और पहले से ही मॉडल के सभी तरीके हैं, जिसके लिए इन राज्यों को प्राप्त किया जा सकता है। चलो फ़ाइल की शुरुआत में एक छोटा सा विन्यास प्राप्त करें:

 // FieldView.ts const States = { 'closed': field => field.closed, 'flag': field => field.marked, 'empty': field => field.opened && !field.mined && !field.filled, 'exploded': field => field.opened && field.mined && field.exploded, 'mined': field => field.opened && field.mined && !field.exploded } //... 

इस ऑब्जेक्ट में कुंजी फ़्रेम के मान होंगे, और इन कुंजियों के मान कॉलबैक हैं जो बूलियन परिणाम लौटाते हैं। इस विन्यास के आधार पर, हम वांछित फ्रेम (जो कि विन्यास से कुंजी है) प्राप्त करने के लिए एक विधि विकसित कर सकते हैं:

 // FieldView.ts //... private get _frameName(): string { for (let key in States) { if (States[key](this._model)) { return key; } } return this._model.value.toString(); } 

इस प्रकार, एक लूप में सरल गणना द्वारा, हम कॉन्फिग ऑब्जेक्ट के सभी कुंजी के माध्यम से जाते हैं और बदले में प्रत्येक कॉलबैक को कॉल करते हैं। फ़ंक्शन जो हमें पहले लौटाता है, वह trueइंगित करेगा कि keyवर्तमान पुनरावृत्ति पर कुंजी मॉडल की वर्तमान स्थिति के लिए सही फ्रेम है।

यदि कोई कुंजी उपयुक्त नहीं है, तो डिफ़ॉल्ट राज्य के लिए हम एक खुले क्षेत्र को एक मूल्य के साथ विचार करेंगे _value, क्योंकि Statesहमने इस राज्य को कॉन्फ़िगरेशन में सेट नहीं किया था।

अब हम बोर्ड फ़ील्ड पर बाईं क्लिक को पूरी तरह से परख सकते हैं और जाँच सकते हैं कि कोशिकाएँ कैसे खुलती हैं और उन्हें खोलने के बाद क्या प्रदर्शित होता है।

4.4 राइट क्लिक प्रोसेसिंग

जैसा कि बाएं-क्लिक हैंडलर बनाने के मामले में, हम पहले स्पष्ट रूप से अपेक्षित कार्यक्षमता को स्पष्ट रूप से परिभाषित करते हैं। राइट-क्लिक करके, हमें चयनित सेल को ध्वज के साथ चिह्नित करना चाहिए। लेकिन कुछ शर्तें हैं।

1. केवल एक बंद फ़ील्ड जिसे वर्तमान में चिह्नित नहीं किया गया है, उसे ध्वजांकित किया जा सकता है
2. यदि फ़ील्ड की जाँच की जाती है, तो फिर से एक राइट-क्लिक करें, फ़्लैग को फ़ील्ड से हटा देना चाहिए
3. ध्वज को स्थापित / निकालते समय, स्तर पर उपलब्ध झंडे की संख्या को अद्यतन करना और वर्तमान संख्या के साथ पाठ प्रदर्शित करना आवश्यक है

छद्म कोड में इन स्थितियों का अनुवाद करते हुए, हमें टिप्पणियों की निम्न पंक्तियाँ मिलती हैं:

अब हम इस एल्गोरिथ्म को कॉल में उन तरीकों का अनुवाद कर सकते हैं जिनकी हमें ज़रूरत है, भले ही वे अभी तक विकसित नहीं हुए हों:

 // GameScene.ts private _flags: number = 0; //... private _onFieldClickRight(field: Field): void { if (field.closed && this._flags > 0) { //        field.addFlag(); //     } else if (field.marked) { //     field.removeFlag(); //   } this._flags = Bombs - this._board.countMarked; } //... public create(): void { this._flags = Bombs; //... } //... 

यहां हमने एक नया क्षेत्र भी शुरू किया _flags, जो कि खेल के स्तर पर शुरू होता है, जो बोर्ड पर बमों की संख्या के बराबर होता है, क्योंकि खेल की शुरुआत में एक भी झंडा नहीं लगाया गया है। इस फ़ील्ड को हर राइट क्लिक से अपडेट करने के लिए मजबूर किया जाता है, क्योंकि इस मामले में ध्वज को या तो जोड़ा जाता है या बोर्ड से हटा दिया जाता है। क्लास में एक Boardगेट्टर जोड़ें countMarked:

 // Board.ts //... public get countMarked(): number { return this._fields.filter(field => field.marked).length; } //... 

झंडे को स्थापित करना और हटाना मॉडल की स्थिति में एक बदलाव है Field, इसलिए हम इन विधियों को इसी विधि के अनुरूप विधि में लागू करते हैं open:

 // Field.ts //... public addFlag(): void { this._setState(States.Marked); } public removeFlag(): void { this._setState(States.Closed); } //... 

आपको याद दिलाता हूं कि यह _setStateएक घटना को ट्रिगर करेगा changeजो दृश्य में ट्रैक किया जाता है और, इस प्रकार, मॉडल को बदलने पर इस बार स्प्राइट को स्वचालित रूप से फिर से रंग दिया जाएगा।

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

 // GameScene.ts //... constructor() { super('Game'); //        document.querySelector("canvas").oncontextmenu = e => e.preventDefault(); } //... 

4.5 GameSceneView ऑब्जेक्ट

गेम के दृश्य पर UI प्रदर्शित करने के लिए, हम एक क्लास बनाएंगे GameSceneViewऔर उसमें जगह देंगे src/scripts/views/GameSceneView.ts।

इस मामले में, हम निर्माण से अलग एक तरह से कार्य करेंगे FieldViewऔर इस वर्ग को पूर्वनिर्मित और उत्तराधिकारी नहीं बनाएंगे GameObjects।
इस मामले में, हमें दृश्य दृश्य से निम्न तत्वों को आउटपुट करने की आवश्यकता है:

• झंडे की संख्या में पाठ
• बाहर निकलें बटन
• गेम पूरा होने का संदेश (जीत / हार)

आइए प्रत्येक UI तत्व को कक्षा में एक अलग क्षेत्र बनाते हैं GameSceneView।
हम एक स्टब तैयार करेंगे।

 enum Styles { Color = '#008080', Font = 'Arial' } enum Texts { Flags = 'FLAGS: ', Exit = 'EXIT', Success = 'YOU WIN!', Failure = 'YOU LOOSE' }; export class GameSceneView { private _scene: Phaser.Scene = null; private _style: {font: string, fill: string}; constructor(scene: Phaser.Scene) { this._scene = scene; this._style = {font: `28px ${Styles.Font}`, fill: Styles.Color}; this._create(); } private _create(): void { } public render() { } } 

झंडे की संख्या के साथ पाठ जोड़ें।

 // GameSceneView.ts //... private _txtFlags: Phaser.GameObjects.Text = null; //... private _createTxtFlags(): void { this._txtFlags = this._scene.add.text( 50, 50, Texts.Flags, this._style ).setOrigin(0, 1); } //... 

यह कोड हमारे द्वारा आवश्यक पाठ को शीर्ष और बाईं ओर से 50px की स्थिति में रख देगा और इसे निर्दिष्ट शैली पर सेट कर देगा। इसके अलावा, विधि setOriginपाठ के धुरी बिंदु को निर्देशांक (0, 1) पर सेट करती है। इसका मतलब है कि पाठ अपनी बाईं सीमा के साथ संरेखित होगा।

एक स्थिति संदेश जोड़ें।

 // GameSceneView.ts //... private _txtStatus: Phaser.GameObjects.Text = null; //... private _createTxtStatus(): void { this._txtStatus = this._scene.add.text( this._scene.cameras.main.centerX, 50, Texts.Success, this._style ).setOrigin(0.5, 1); this._txtStatus.visible = false; } //... 

हम स्क्रीन के केंद्र में स्थिति पाठ को रखते हैं और setOriginx समन्वय के लिए पैरामीटर 0.5 के साथ कॉल करके पंक्ति के मध्य के साथ इसे संरेखित करते हैं । इसके अलावा, डिफ़ॉल्ट रूप से, इस पाठ को छुपाने की आवश्यकता है, क्योंकि हम इसे केवल खेल के पूरा होने पर दिखाएंगे।

एक एक्ज़िट बटन बनाएँ, जिसके मूल में भी एक टेक्स्ट ऑब्जेक्ट है।

 // GameSceneView.ts //... private _btnExit: Phaser.GameObjects.Text = null; //... private _createBtnExit(): void { this._btnExit = this._scene.add.text( this._scene.cameras.main.width - 50, 50, Texts.Exit, this._style ).setOrigin(1); this._btnExit.setInteractive(); this._btnExit.once('pointerdown', () => { this._scene.scene.start('Start'); }); } //... 

हम बटन को स्क्रीन के ऊपरी दाएं कोने में रखते हैं और setOriginइस बार फिर से इसके दाहिने किनारे के साथ पाठ को संरेखित करने के लिए इसका उपयोग करते हैं । हम बटन को इंटरएक्टिव बनाते हैं और क्लिक इवेंट में कॉलबैक जोड़ते हैं, जो खिलाड़ी को शुरुआती दृश्य में भेजता है। इस प्रकार, हम खिलाड़ी को किसी भी समय स्तर से बाहर निकलने का अवसर देते हैं।

यह renderUI के सभी तत्वों को सही ढंग से अपडेट करने और सभी निर्मित विधियों में कॉल जोड़ने के लिए एक विधि विकसित करने के लिए बनी हुई है _create।

 // GameSceneView.ts //... private _create(): void { this._createTxtFlags(); this._createTxtStatus(); this._createBtnExit(); } public render(data: {flags?: number, status?: boolean}) { if (typeof data.flags !== 'undefined') { this._txtFlags.text = Texts.Flags + data.flags.toString(); } if (typeof data.status !== 'undefined') { this._txtStatus.text = data.status ? Texts.Success : Texts.Failure; this._txtStatus.visible = true; } } //... 

पैरामीटर में पारित संपत्ति के आधार पर, हम आवश्यक परिवर्तनों को प्रदर्शित करते हुए, यूआई को अपडेट करते हैं।
GameScene वर्ग में गेम दृश्य में एक प्रतिनिधित्व बनाएँ और जहां भी अर्थ के लिए आवश्यक हो, वहां _render पद्धति पर कॉल लिखें:

 // GameScene.ts //... import { GameSceneView } from "../views/GameSceneView"; //... export class GameScene extends Phaser.Scene { private _view: GameSceneView = null; //... private _onGameOver(status: boolean) { //... this._view.render({status}); } //... private _onFieldClickRight(field: Field): void { //... this._flags = Bombs - this._board.countMarked; this._view.render({flags: this._flags}); } //... public create(): void { //... this._view = new GameSceneView(this); this._view.render({flags: this._flags}); } //... } 

5. एनिमेशन

एक गेम बनाने से किस तरह के प्रशंसक, यहां तक ​​कि हमारे जैसे सरल, अगर इसमें कोई एनिमेशन नहीं हैं?!? इसके अलावा, जब से हमने फ़ैसर का अध्ययन करना शुरू किया, आइए हम एनिमेशन की सबसे बुनियादी विशेषताओं से परिचित हों और जुड़वाँ की कार्यक्षमता पर विचार करें। जुड़वाओं को ढांचे में ही लागू किया जाता है और किसी तीसरे पक्ष के पुस्तकालयों की आवश्यकता नहीं होती है।

खेल में 2 एनिमेशन जोड़ें: शुरुआत में कोशिकाओं के साथ बोर्ड भरना और शुरुआत में सेल को फ्लिप करना। चलो इनमें से पहले के साथ शुरू करते हैं।

5.1 बोर्ड एनिमेशन भरें

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

कक्षा में, FiledViewविधियों के अंत में _createकॉल जोड़ें _animateShow:

 // FieldView.ts //... private _create(): void { //... this._animateShow(); } //... 

B हम अपनी जरूरत के नए तरीके को लागू करते हैं। इसमें, जैसा कि हमने ऊपर सहमति व्यक्त की, 2 चीजें करना आवश्यक है:

1. सेल को ऊपरी बाएं कोने के पीछे ले जाएं ताकि यह स्क्रीन पर दिखाई न दे
2. सही देरी के साथ वांछित निर्देशांक के लिए जुड़वां आंदोलन शुरू करें

 // FieldView.ts //... private _animateShow(): Promise<void> { this.x = -this.width; this.y = -this.height; const delay = this._model.row * 50 + this._model.col * 10; return this._moveTo(this._position, delay); } //... 

चूंकि कैनवास के ऊपरी बाएं कोने में निर्देशांक (0, 0) है, तो अगर हम सेल को चौड़ाई और ऊंचाई के नकारात्मक मूल्यों के बराबर निर्देशांक पर सेट करते हैं, तो यह सेल को ऊपरी बाएं कोने के पीछे रख देगा और स्क्रीन से छिपा देगा। इस प्रकार, हमने अपना पहला कार्य पूरा किया।

आप विधि को कॉल करके दूसरा लक्ष्य प्राप्त करेंगे _moveTo।

 // FieldView.ts //... private _moveTo(position: Vec2, delay: number): Promise<void> { return new Promise(resolve => { this.scene.tweens.add({ targets: this, x: position.x, y: position.y, duration: 600, ease: 'Elastic', easeParams: [1, 1], delay, onComplete: () => { resolve(); } }); }); } //... 

एक एनीमेशन बनाने के लिए, हम दृश्य संपत्ति का उपयोग करते हैं tweens। उनकी पद्धति में, addहम सेटिंग्स के साथ कॉन्फ़िगरेशन ऑब्जेक्ट पास करते हैं:

• targetsयहां की संपत्ति में उन गेम ऑब्जेक्ट्स का मूल्य होना चाहिए, जिनके लिए आप एनीमेशन प्रभाव लागू करना चाहते हैं। हमारे मामले में, यह thisवर्तमान वस्तु की एक कड़ी है, क्योंकि यह स्प्राइट का एक प्रीफैब है।
• दूसरा और तीसरा पैरामीटर हम गंतव्य के निर्देशांक से गुजरते हैं।
• संपत्ति durationएनीमेशन की अवधि के लिए जिम्मेदार है, हमारे मामले में - 600ms।
• पैरामीटर easeऔर easeParamsसहजता फ़ंक्शन सेट करें।
• देरी क्षेत्र में, हम दूसरे तर्क से मूल्य को प्रतिस्थापित करते हैं, जो प्रत्येक व्यक्तिगत सेल के लिए उत्पन्न होता है, बोर्ड पर इसकी स्थिति को ध्यान में रखते हुए। ऐसा इसलिए किया जाता है ताकि कोशिकाएं एक ही समय में बाहर न निकलें। इसके बजाय, प्रत्येक सेल पिछले एक के सापेक्ष थोड़ी देरी के साथ दिखाई देगा।
• अंत में, onCompleteहम संपत्ति में एक कॉलबैक डालते हैं , जिसे ट्विन एक्शन के अंत में कहा जाएगा।

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

5.2 सेल फ्लिप एनिमेशन

यह बहुत अच्छा होगा यदि, जब सेल खोला गया था, तो इसके उलट का प्रभाव फिर से शुरू हो गया था। हम इसे कैसे प्राप्त कर सकते हैं?

वर्तमान _renderमें दृश्य में कहा जाता है जब एक सेल को खोलना फ्रेम को बदलकर किया जाता है। यदि हम इस पद्धति में मॉडल की स्थिति की जांच करते हैं, तो हम देखेंगे कि क्या सेल खुली थी। यदि कक्ष खुला था, तो तुरंत एक नया उत्क्रमण फ्रेम प्रदर्शित करने के बजाय एनीमेशन शुरू करें।

 // FieldView.ts //... private _onStateChange(): void { if (this._model.opened) { this._animateFlip(); } else { this._render(); } } //... 

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

 // FieldView.ts //... private _animateFlip(): void { this._scaleXTo(0).then(() => { this._render(); this._scaleXTo(1); }) } //... 

विधि के अनुरूप, हम _moveToलागू करते हैं _scaleTo:

 // FieldView.ts //... private _scaleXTo(scaleX: number): Promise<void> { return new Promise(resolve => { this.scene.tweens.add({ targets: this, scaleX, ease: 'Elastic.easeInOut', easeParams: [1, 1], duration: 150, onComplete: () => { resolve() } }); }); } //... 

इस पद्धति में, एक पैरामीटर के रूप में, हम पैमाने का मान लेते हैं, जिसका उपयोग हम दोनों दिशाओं में स्प्राइट के आकार को बदलने और एनीमेशन कॉन्फ़िगरेशन ऑब्जेक्ट के लिए दूसरे पैरामीटर के रूप में पास करेंगे। अन्य सभी कॉन्फ़िगरेशन पैरामीटर पहले से ही हमसे पहले से परिचित हैं।

अब हम परीक्षण के लिए परियोजना शुरू करेंगे और डिबगिंग के बाद हम अपने खेल को पूरा करने पर विचार करेंगे, और परीक्षण कार्य पूरा हो जाएगा! :)

मैं ईमानदारी से मेरे साथ इस पल तक पहुँचने के लिए सभी का धन्यवाद करता हूँ!

निष्कर्ष

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

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

ध्यान देने के लिए आप सभी का धन्यवाद! मैं प्रतिक्रिया और जल्द ही आप को देखने के लिए खुश हो जाएगा!