🤟🏼 🤜🏿 🤷🏻 टिक टीएसी को पैर की अंगुली भाग 1: स्वेलेट और कैनवस 2 डी 🤟 🔍 🕥

टिक टीएसी को पैर की अंगुली 0: तुलना सेवेल्ट और प्रतिक्रिया
टिक टीएसी को पैर की अंगुली भाग 1: स्वेल और कैनवस 2 डी
टिक टीएसी को पैर की अंगुली भाग 2: स्टेटलेस पूर्ववत करें / फिर से करें
टिक टीएसी को पैर की अंगुली, भाग 3: कमांड स्टोरेज के साथ पूर्ववत करें / फिर से करें
टिक टीएसी को पैर की अंगुली भाग 4: HTTP का उपयोग करके फ्लास्क बैकएंड के साथ बातचीत

लेख "तुलना: स्वेलेट और रिएक्ट" में मैंने खेल टिक टीएसी पैर के अंगूठे के विकास को दोहराने की कोशिश की। वहां मैंने चालों के इतिहास का समर्थन किए बिना प्रतिक्रिया के लिए मूल ट्यूटोरियल का केवल पहला भाग पूरा किया। इस लेख में, हम चालों के इतिहास के लिए समर्थन के साथ स्वेल्टे ढांचे का उपयोग करके इस खेल का विकास शुरू करेंगे। चालों का इतिहास वास्तव में एक पूर्ववत करें / फिर से करें प्रणाली है। रिएक्ट पर मूल ट्यूटोरियल में, किसी भी राज्य में रैंडम एक्सेस के साथ राज्य भंडारण के साथ पूर्ववत करें / फिर से लागू किया जाता है। Undo / Redo सिस्टम को लागू करते समय, कमांड पैटर्न आमतौर पर उपयोग किया जाता है, और Undo / Redo कमांड को कमांड की सूची में संग्रहीत किया जाता है। हम इस दृष्टिकोण को बाद में लागू करने का प्रयास करेंगे, अब हम राज्य भंडारण के साथ पूर्ववत करें / फिर से करें प्रणाली को निष्पादित करेंगे।

विकास भंडारण का उपयोग कर फ्लक्स वास्तु समाधान का उपयोग करता है। यह लेख में एक अलग अनुभाग है।

कोड शुरू करें

REPL कोड

App.svelte

<script> import Board from './Board.svelte'; </script> <div class="game"> <div class="game-board"> <Board /> </div> <div class="game-info"> <div class="status">Next player: X</div> <div></div> <ol></ol> </div> </div> <style> .game { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; display: flex; flex-direction: row; } .game-info { margin-left: 20px; } .status { margin-bottom: 10px; } ol { padding-left: 30px; } </style>

Board.svelte

 <script> import { onMount } from 'svelte'; export let width = 3; export let height = 3; export let cellWidth = 34; export let cellHeight = 34; export let colorStroke = "#999"; let boardWidth = 1 + (width * cellWidth); let boardHeight = 1 + (height * cellHeight); let canvas; onMount(() => { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, boardWidth, boardHeight); ctx.beginPath(); // vertical lines for (let x = 0; x <= boardWidth; x += cellWidth) { ctx.moveTo(0.5 + x, 0); ctx.lineTo(0.5 + x, boardHeight); } // horizontal lines for (let y = 0; y <= boardHeight; y += cellHeight) { ctx.moveTo(0, 0.5 + y); ctx.lineTo(boardWidth, 0.5 + y); } // draw the board ctx.strokeStyle = colorStroke; ctx.stroke(); ctx.closePath(); }); </script> <canvas bind:this={canvas} width={boardWidth} height={boardHeight} ></canvas>

प्रारंभ कोड एक खाली ग्रिड प्रदर्शित करता है। यह HTML5 कैनवास तत्व का उपयोग करके प्रदर्शित किया जाता है। इस तत्व का उपयोग करने के बारे में अधिक जानकारी के लिए, पिछला लेख देखें स्वैलिंग पर विकासशील ब्रेकआउट । यहाँ एक ग्रिड की जासूसी कैसे करें । अन्य खेलों में बोर्ड घटक का पुन: उपयोग किया जा सकता है। चौड़ाई और ऊंचाई चर को बदलकर, आप ग्रिड का आकार बदल सकते हैं; सेलविद और सेलहाइट चर के मूल्यों को बदलकर , आप सेल का आकार बदल सकते हैं।

शून्य के साथ कोशिकाओं को भरें

REPL कोड
फ़ंक्शन में ऑनमाउंट () ने ग्रिड के आउटपुट के बाद कोशिकाओं में शून्य का आउटपुट जोड़ा। और कोशिकाओं में स्थिति मूल्यों से संबंधित कुछ मैजिक नंबर।

 ctx.beginPath(); ctx.font = "bold 22px Century Gothic"; let d = 8; for (let i = 0; i < height; i+=1) { for (let j = 0; j < width; j+=1) { ctx.fillText("O", j * cellWidth + d + 1, (i + 1) * cellHeight - d); } } ctx.closePath();

राज्य भंडारण जोड़ें

REPL कोड
इस अनुभाग में, हम उपयोगकर्ता रिपॉजिटरी का उपयोग करके राज्य परिवर्तनों को सत्यापित करते हैं। एक अलग store.js फ़ाइल में स्टेट स्टोरेज जोड़ा गया, यह स्टोरेज दोनों कंपोनेंट्स: ऐप और बोर्ड में इंपोर्ट किया गया है। खेल की स्थिति को बदलने वाले राज्य 1 और राज्य 2 तरीके इस भंडार में परिभाषित होते हैं।

 import { writable } from 'svelte/store'; function createState() { const { subscribe, set, update } = writable(Array(9).fill('O')); return { subscribe, state1: () => set(Array(9).fill('1')), state2: () => set(Array(9).fill('2')), }; } export const state = createState();

App घटक में दो बटन स्टेट 1 और स्टेट 2 जोड़े। बटनों पर क्लिक करके, हम रिपॉजिटरी में संबंधित तरीकों को कहते हैं।

 <button on:click={state.state1}>State 1</button> <button on:click={state.state2}>State 2</button>

बोर्ड घटक में, मैंने उनके राज्य भंडारण से डेटा के आउटपुट के लिए शून्य के आउटपुट की रेखा को बदल दिया। यहां हम स्टोरेज के लिए ऑटो-सब्सक्रिप्शन का उपयोग करते हैं।

 ctx.fillText($state[k], j * cellWidth + d + 1, (i + 1) * cellHeight - d);

इस स्तर पर, खेल का मैदान डिफ़ॉल्ट रूप से शून्य से भर जाता है, राज्य 1 बटन पर क्लिक करें - क्षेत्र इकाइयों से भर जाता है, राज्य 2 बटन पर क्लिक करें - क्षेत्र ड्यूस से भर जाता है।

माउस क्लिक से सेल भरना

REPL कोड
राज्य की दुकान में, मैंने सेटसेल () पद्धति को जोड़ा, जो चयनित सेल को एक क्रॉस के साथ भरता है।

 setCell: (i) => update(a => {a[i] = 'X'; return a;}),

एक माउस-क्लिक ईवेंट हैंडलर को कैनवास में जोड़ा गया था, यहां हम सेल के सूचकांक का निर्धारण करते हैं और राज्य भंडारण के सेटसेल () विधि को कॉल करते हैं।

 function handleClick(event) { let x = Math.trunc((event.offsetX + 0.5) / cellWidth); let y = Math.trunc((event.offsetY + 0.5) / cellHeight); let i = y * width + x; state.setCell(i); }

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

चाल का इतिहास

REPL कोड
आपको याद दिला दूं कि हम वर्तमान में रैंडम एक्सेस के साथ राज्य भंडारण के साथ पूर्ववत करें / फिर से करें।

 import { writable } from 'svelte/store'; class History { constructor() { this.history = new Array; this.current = -1; } currentState() { return this.history[this.current]; } push(state) { // TODO: remove all redo states this.current++; this.history.push(state); } } function createHistory() { const { subscribe, set, update } = writable(new History); return { subscribe, push: (state) => update(h => { h.push(state); return h; }), }; } export const history = createHistory();

स्टेट स्टोर को हटा दिया गया है, इतिहास स्टोर को चालों के इतिहास को स्टोर करने के लिए जोड़ा गया है। हम इतिहास वर्ग का उपयोग करके इसका वर्णन करते हैं। राज्यों को संग्रहीत करने के लिए, इतिहास सरणी का उपयोग करें। कभी-कभी, पूर्ववत करें / फिर से करें प्रणाली को लागू करते समय, दो LIFO स्टैक का उपयोग किया जाता है: पूर्व-स्टैक और रीडो-स्टैक। हम इतिहास में राज्यों को संग्रहीत करने के लिए एक एकल इतिहास सरणी का उपयोग करते हैं। वर्तमान संपत्ति का उपयोग खेल की वर्तमान स्थिति को निर्धारित करने के लिए किया जाता है। इतिहास में सभी राज्य सरणी की शुरुआत से वर्तमान सूचकांक के साथ राज्य तक, इसलिए बोलने के लिए, पूर्ववत सूची में हैं, और अन्य सभी Redo सूची में हैं। मौजूदा संपत्ति में कमी या वृद्धि, दूसरे शब्दों में, पूर्ववत करें या फिर से करें आदेशों को निष्पादित करते हुए, हम राज्य को शुरुआत या खेल के अंत के करीब चुनते हैं। पूर्ववत और फिर से तरीके अभी तक लागू नहीं किए गए हैं, उन्हें बाद में जोड़ा जाएगा। CurrentState () और push () विधियाँ इतिहास वर्ग में जोड़ दी गई हैं। वर्तमानस्ट्रेट () विधि खेल की वर्तमान स्थिति को वापस लाती है , पुश () विधि का उपयोग करके हम चाल इतिहास में एक नया राज्य जोड़ते हैं।

ऐप घटक में, हमने राज्य 1 और राज्य 2 बटन हटा दिए हैं। और एक पुश बटन जोड़ा:

 <button on:click={() => history.push(Array(9).fill($history.current + 1))}>Push</button>

इस बटन पर क्लिक करने से चालों के इतिहास में एक नया राज्य जुड़ जाता है, इतिहास सरणी केवल वर्तमान राज्य सूचकांक मूल्य वर्तमान से भर जाती है ।

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

 ctx.fillText($history.currentState()[k], j * cellWidth + d + 1, (i + 1) * cellHeight - d);

हिस्ट्री स्टोर की पुश विधि में, आप ब्राउज़र कंसोल में आउटपुट जोड़ सकते हैं और यह देख सकते हैं कि पुश बटन पर क्लिक करने के बाद यह कैसे बदलता है।

 h.push(state); console.log(h); return h;

सेल पर क्लिक करना

REPL कोड
ऐप घटक में, पुश बटन हटा दिया गया था।

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

 clickCell: (i) => update(h => { // create a copy of the current state const state = h.currentState().slice(); // change the value of the selected cell to X state[i] = 'X'; // add the new state to the history h.push(state); console.log(h.history); return h; }),

बोर्ड घटक में, कॉलक्लिक () स्टोरेज मेथड कॉल को हैंडलक्लिक () फ़ंक्शन में जोड़ा गया था:

 history.clickCell(i);

यहां ब्राउज़र कंसोल में हम यह भी देख सकते हैं कि माउस के प्रत्येक क्लिक के बाद चालों के इतिहास की स्थिति कैसे बदल जाती है।

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

फ्लक्स वास्तुकला

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

गिटहब भंडार

https://github.com/nomhoi/tic-tac-toe-part1

स्थानीय कंप्यूटर पर गेम इंस्टॉल करना:

 git clone https://github.com/nomhoi/tic-tac-toe-part1.git cd tic-tac-toe-part1 npm install npm run dev

हम पते पर एक ब्राउज़र में गेम लॉन्च करते हैं: http: // localhost: 5000 / ।

टिक टीएसी को पैर की अंगुली भाग 1: स्वेलेट और कैनवस 2 डी