टिक टीएसी को पैर की अंगुली भाग 2: स्टेटलेस पूर्ववत करें / फिर से करें

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

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

पूर्ववत करें / फिर से करें

REPL कोड

इस बिंदु पर, पूर्ववत करें / फिर से करें आदेशों को एप्लिकेशन में जोड़ा गया था। इतिहास की दुकान में जोड़ा गया धक्का और फिर से तरीके।

undo: () => update(h => { h.undo(); return h; }), redo: () => update(h => { h.redo(); return h; }), 

इतिहास के वर्ग में पुश , रीडो , कैनुंडो , कैनेडो को शामिल किया जाता है।

 canUndo() { return this.current > 0; } canRedo() { return this.current < this.history.length - 1; } undo() { if (this.canUndo()) this.current--; } redo() { if (this.canRedo()) this.current++; } 

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

 push(state) { // remove all redo states if (this.canRedo()) this.history.splice(this.current + 1); // add a new state this.current++; this.history.push(state); } 

पूर्ववत और फिर से करें बटन को ऐप घटक में जोड़ा गया है। यदि आदेशों का निष्पादन संभव नहीं है, तो उन्हें निष्क्रिय कर दिया जाता है।

 <div> {#if $history.canUndo()} <button on:click={history.undo}>Undo</button> {:else} <button disabled>Undo</button> {/if} {#if $history.canRedo()} <button on:click={history.redo}>Redo</button> {:else} <button disabled>Redo</button> {/if} </div> 

पाठ्यक्रम का परिवर्तन

REPL कोड

माउस क्लिक करने के बाद एक क्रॉस या पैर की अंगुली का एक वैकल्पिक रूप।

क्लिकसेल () विधि को उनके इतिहास भंडार से हटा दिया गया है, सभी विधि कोड को बोर्ड घटक के हैंडलक्लिक () हैंडलर में स्थानांतरित कर दिया गया है।

 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; const state = $history.currentState(); const squares = state.squares.slice(); squares[i] = state.xIsNext ? 'X' : 'O'; let newState = { squares: squares, xIsNext: !state.xIsNext, }; history.push(newState); } 

इस प्रकार, पहले की गई गलती को समाप्त कर दिया गया था; रिपॉजिटरी इस विशेष गेम के तर्क पर निर्भर थी। अब यह त्रुटि ठीक हो गई है, और रिपॉजिटरी को अन्य खेलों और अनुप्रयोगों में बिना बदलाव के पुन: उपयोग किया जा सकता है।

पहले, एक गेम स्टेप की स्थिति को केवल 9 मानों की एक सरणी द्वारा वर्णित किया गया था। अब खेल की स्थिति सरणी और xIsNext संपत्ति वाले ऑब्जेक्ट द्वारा निर्धारित की जाती है। खेल की शुरुआत में इस वस्तु का प्रारंभ इस तरह दिखता है:

 let state = { squares: Array(9).fill(''), xIsNext: true, }; 

और यह भी ध्यान दिया जा सकता है कि इतिहास भंडारण अब किसी भी तरह से वर्णित राज्यों को देख सकता है।

इतिहास को स्थानांतरित करने के लिए यादृच्छिक पहुँच

REPL कोड

इतिहास की दुकान में, setCurrent (वर्तमान) पद्धति को जोड़ा गया था, जिसके साथ हम खेल की चयनित वर्तमान स्थिति सेट करते हैं।

 setCurrent(current) { if (current >= 0 && current < this.history.length) this.current = current; } 

 setCurrent: (current) => update(h => { h.setCurrent(current); return h; }), 

ऐप घटक में, बटन के रूप में चाल के इतिहास के प्रदर्शन को जोड़ा।

 <ol> {#each $history.history as value, i} {#if i==0} <li><button on:click={() => history.setCurrent(i)}>Go to game start</button></li> {:else} <li><button on:click={() => history.setCurrent(i)}>Go to move #{i}</button></li> {/if} {/each} </ol> 

विजेता का निर्धारण, खेल की स्थिति प्रदर्शित करना

REPL कोड

एक अलग हेल्पर्स.जेएस फ़ाइल में विजेता कैल्क्युलेटर () को निर्धारित करने के लिए जोड़ा गया फ़ंक्शन:

 export function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; } 

खेल की स्थिति निर्धारित करने के लिए स्थिति व्युत्पन्न जोड़ा गया है , यहाँ खेल का परिणाम निर्धारित किया जाता है: विजेता या ड्रा:

 export const status = derived( history, $history => { if ($history.currentState()) { if (calculateWinner($history.currentState().squares)) return 1; else if ($history.current == 9) return 2; } return 0; } ); 

खेल की स्थिति का आउटपुट ऐप घटक में जोड़ा गया है:

 <div class="status"> {#if $status === 1} <b>Winner: {!$history.currentState().xIsNext ? 'X' : 'O'}</b> {:else if $status === 2} <b>Draw</b> {:else} Next player: {$history.currentState().xIsNext ? 'X' : 'O'} {/if} </div> 

बोर्ड घटक में, हैंडलक्लिक के हैंडल हैंडलर में सीमाएँ जोड़ी गई हैं () क्लिक करें: खेल खत्म होने के बाद भी भरे हुए सेल में क्लिक करना असंभव है।

 const state = $history.currentState(); if ($status == 1 || state.squares[i]) return; 

खेल खत्म हो गया है! अगले लेख में, हम कमांड पैटर्न का उपयोग करके उसी खेल के कार्यान्वयन पर विचार करेंगे, अर्थात। व्यक्तिगत राज्यों को संग्रहीत करने के बजाय पूर्ववत करें / फिर से करें कमांड के साथ।

गिटहब भंडार

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

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

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

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