स्वेल्ट के साथ जल्लाद गेम कैसे बनाएं

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

जल्लाद कैसे काम करता है

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

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

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

विकास परिवेश की स्थापना

Svelte को अपनी मशीन पर चालू करने के लिए, प्रोजेक्ट को Vite.js के साथ तैयार करने की सलाह दी जाती है। वाइट का उपयोग करने के लिए, सुनिश्चित करें कि आपके पास है नोड पैकेज मैनेजर (एनपीएम) और आपकी मशीन पर Node.js स्थापित है. आप यार्न जैसे वैकल्पिक पैकेज मैनेजर का भी उपयोग कर सकते हैं। अब, अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

npm create vite

यह वाइट के साथ एक नया प्रोजेक्ट शुरू करेगा कमांड लाइन इंटरफ़ेस (सीएलआई). अपने प्रोजेक्ट को नाम दें, चुनें दुर्बल रूपरेखा के रूप में, और संस्करण को सेट करें जावास्क्रिप्ट. अब सीडी प्रोजेक्ट निर्देशिका में और निर्भरताएँ स्थापित करने के लिए निम्नलिखित कमांड चलाएँ:

npm install

अब, प्रोजेक्ट खोलें, और में स्रोत फ़ोल्डर, एक बनाएं जल्लादआर्ट.जे.एस फ़ाइल करें और हटाएँ संपत्ति और उदारीकरण फ़ोल्डर. फिर इसकी सामग्री साफ़ करें App.svelte और ऐप.सीएसएस फ़ाइलें. में ऐप.सीएसएस फ़ाइल, निम्नलिखित जोड़ें;

:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}

की सामग्री कॉपी करें जल्लादकला।जे एस इस प्रोजेक्ट से फ़ाइल गिटहब रिपॉजिटरी, और फिर इसे अपने में पेस्ट करें जल्लादआर्ट.जे.एस फ़ाइल। आप निम्न आदेश से विकास सर्वर प्रारंभ कर सकते हैं:

npm run dev

एप्लिकेशन के तर्क को परिभाषित करना

खोलें App.svelte फ़ाइल करें और बनाएं लिखी हुई कहानी टैग जो एप्लिकेशन के अधिकांश तर्क को धारण करेगा। एक बनाने के शब्द शब्दों की सूची रखने के लिए सरणी।

let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];

अगला, आयात करें जल्लादकला से सरणी जल्लादआर्ट.जे.एस फ़ाइल। फिर, एक वेरिएबल बनाएं उपयोगकर्ता का निवेश, एक परिवर्तनीय यादृच्छिक संख्या, और बेतरतीब ढंग से चयनित शब्द को रखने के लिए एक और चर शब्द सरणी.

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

import { hangmanArt } from"./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length - 1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output += "-"));
match = output;

आवश्यक कार्यक्षमताएँ जोड़ना

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

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

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

functionevaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
 }
if (selectedWord.includes(guess)) {
 selectedWord = selectedWord.replaceAll(guess, "-");
 generateOutput(initial, selectedWord);
 } else {
 hangmanStages.shift();
 hangmanStages = hangmanStages;
 }
 userInput = "";
}

और इसके साथ ही, आपने एप्लिकेशन का तर्क पूरा कर लिया है। अब आप मार्कअप को परिभाषित करने के लिए आगे बढ़ सकते हैं।

प्रोजेक्ट के मार्कअप को परिभाषित करना

एक बनाने के मुख्य वह तत्व जो खेल में अन्य सभी तत्वों को शामिल करेगा। में मुख्य तत्व, एक परिभाषित करें एच 1 पाठ के साथ तत्व बधिक.

<h1class="title">
 Hangman
h1>

एक टैगलाइन बनाएं और जल्लाद की आकृति को पहले चरण में केवल तभी प्रस्तुत करें जब इसमें तत्वों की संख्या हो जल्लाद मंच सरणी 0 से बड़ी है.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
class="hangman">
 {hangmanStages[0]}</pre>
{/if}

बाद में, एक संदेश दिखाने के लिए तर्क लागू करें जो दर्शाता है कि खिलाड़ी जीत गया है या हार गया है:

{#if hangmanStages.length 1}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

class="message" bind:this={message}>You Win...</div>
{/if}

इसके बाद, उपयोगकर्ता से इनपुट स्वीकार करने के लिए आउटपुट और एक फॉर्म प्रस्तुत करें। आउटपुट और फॉर्म केवल तभी प्रदर्शित किया जाना चाहिए जब क्लास "संदेश" वाला तत्व स्क्रीन पर न हो।

{#if !message}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"submit">Submit</button>
 </form>
{/if}

अब, आप एप्लिकेशन में उपयुक्त स्टाइल जोड़ सकते हैं। एक बनाने के शैली टैग करें और इसमें निम्नलिखित जोड़ें:

 * {
color: green;
text-align: center;
 }
main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
 }
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
 }
.hangman {
font-size: 32px;
 }
form {
margin-top: 50px;
 }
.tagline,
.message {
font-size: 20px;
 }

आपने Svelte के साथ एक जल्लाद गेम बनाया है। अच्छा काम!

स्वेल्ट को क्या अद्भुत बनाता है?

स्वेल्ट एक ऐसा ढांचा है जिसे उठाना और सीखना अपेक्षाकृत आसान है। क्योंकि स्वेल्ट का लॉजिक सिंटैक्स वेनिला जावास्क्रिप्ट के समान है, यदि आप चाहते हैं तो यह इसे सही विकल्प बनाता है वह ढाँचा जो प्रतिक्रियाशीलता जैसी जटिल चीजों को पकड़ सकता है, साथ ही आपको वेनिला के साथ काम करने का अवसर भी देता है जावास्क्रिप्ट। अधिक जटिल परियोजनाओं के लिए, आप SvelteKit का उपयोग कर सकते हैं - एक मेटा फ्रेमवर्क जिसे Next.js के लिए Svelte के उत्तर के रूप में विकसित किया गया था।