टिक-टैक-टो एक लोकप्रिय खेल है जो 3×3 ग्रिड का उपयोग करता है। खेल का लक्ष्य तीन प्रतीकों को एक सीधी क्षैतिज, लंबवत या विकर्ण पंक्ति में रखने वाला पहला खिलाड़ी बनना है।
आप एक टिक-टैक-टो गेम बना सकते हैं जो HTML, CSS और JavaScript का उपयोग करके वेब ब्राउज़र में चलता है। आप 3×3 ग्रिड वाली सामग्री को जोड़ने के लिए HTML का उपयोग कर सकते हैं, और गेम डिज़ाइन में कुछ स्टाइल जोड़ने के लिए CSS का उपयोग कर सकते हैं।
फिर आप गेम की कार्यक्षमता के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। इसमें प्रतीकों को रखना, खिलाड़ियों के बीच मोड़ लेना और कौन जीतता है यह तय करना शामिल है।
टिक-टैक-टो गेम के लिए यूआई कैसे बनाएं
आप इस गेम के लिए पूर्ण स्रोत कोड पढ़ और डाउनलोड कर सकते हैं गिटहब रिपॉजिटरी.
टिक-टैक-टो कई खेलों में से एक है जिसे आप प्रोग्राम करना सीखते समय बना सकते हैं। किसी नई भाषा या परिवेश का अभ्यास करना अच्छा होता है, जैसे PICO-8 खेल विकास इंजन.
वेब ब्राउज़र में चलने वाला टिक-टैक-टो गेम बनाने के लिए, आपको पृष्ठ सामग्री के लिए HTML जोड़ने की आवश्यकता होगी। फिर आप इसे CSS का उपयोग करके स्टाइल कर सकते हैं।
- "index.html" नामक एक नई फ़ाइल बनाएँ।
- "index.html" के अंदर, HTML फ़ाइल की मूल संरचना जोड़ें:
एचटीएमएल>
<एचटीएमएललैंग="एन-यूएस">
<सिर>
<शीर्षक>टिक टैक टो गेमशीर्षक>
सिर>
<शरीर>
शरीर>
एचटीएमएल> - HTML बॉडी टैग के अंदर, एक तालिका जोड़ें जिसमें तीन पंक्तियाँ हों, प्रत्येक पंक्ति में तीन कोशिकाएँ हों:
<डिवकक्षा="कंटेनर">
<मेज>
<टी.आर.>
<टीडीपहचान="1">टीडी>
<टीडीपहचान="2">टीडी>
<टीडीपहचान="3">टीडी>
टी.आर.>
<टी.आर.>
<टीडीपहचान="4">टीडी>
<टीडीपहचान="5">टीडी>
<टीडीपहचान="6">टीडी>
टी.आर.>
<टी.आर.>
<टीडीपहचान="7">टीडी>
<टीडीपहचान="8">टीडी>
<टीडीपहचान="9">टीडी>
टी.आर.>
मेज>
डिव> - आपकी HTML फ़ाइल के समान फ़ोल्डर में, "styles.css" नामक एक नई फ़ाइल बनाएँ।
- CSS फ़ाइल के अंदर, अपने 3x3 ग्रिड में कुछ स्टाइल जोड़ें:
मेज {
सीमा-पतन: गिर जाना;
अंतर: 0 ऑटो;
}टीडी {
चौड़ाई: 100पिक्सल;
ऊंचाई: 100पिक्सल;
पाठ संरेखित: केंद्र;
ऊर्ध्वाधर- align: मध्य;
सीमा: 1पिक्सलठोसकाला;
} - CSS फ़ाइल को अपनी HTML फ़ाइल से हेड टैग में जोड़कर लिंक करें:
<जोड़नासंबंधित="शैली पत्रक"प्रकार="पाठ/सीएसएस"href="शैलियाँ.सीएसएस">
गेम बोर्ड में बारी-बारी से सिंबल कैसे जोड़ें
खेल में, दो खिलाड़ी होंगे, प्रत्येक में या तो "X" या "O" चिन्ह होगा। आप ग्रिड सेल में से किसी एक पर क्लिक करके "X" या "O" चिन्ह जोड़ सकते हैं। यह तब तक जारी रहेगा जब तक आप में से किसी ने एक सीधी क्षैतिज, लंबवत या विकर्ण पंक्ति नहीं बना ली है।
आप जावास्क्रिप्ट का उपयोग करके इस कार्यक्षमता को जोड़ सकते हैं।
- आपकी HTML और CSS फ़ाइलों वाले फ़ोल्डर में, "script.js" नामक एक JavaScript फ़ाइल बनाएँ।
- बॉडी टैग के नीचे स्क्रिप्ट जोड़कर JavaScript फ़ाइल को अपनी HTML फ़ाइल से लिंक करें:
<शरीर>
आपका कोड यहाँ
<लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
शरीर> - जावास्क्रिप्ट फ़ाइल के अंदर, खिलाड़ी के प्रतीक का प्रतिनिधित्व करने के लिए एक स्ट्रिंग जोड़ें। यह या तो "एक्स" या "ओ" हो सकता है। डिफ़ॉल्ट रूप से, पहला खिलाड़ी "X" रखेगा:
होने देना प्लेयर सिंबल = "एक्स"; - खेल समाप्त हो गया है या नहीं, इसका ट्रैक रखने के लिए एक और चर जोड़ें:
होने देना गेमएंडेड = असत्य - HTML तालिका में प्रत्येक सेल में 1 और 9 के बीच एक आईडी होती है। तालिका में प्रत्येक सेल के लिए, एक ईवेंट श्रोता जोड़ें जो तब चलेगा जब कोई उपयोगकर्ता सेल पर क्लिक करेगा:
के लिए (होने देना मैं = 1; मैं <= 9; मैं++) {
दस्तावेज़.getElementById (i.toString()).addEventListener(
"क्लिक करें",
समारोह() {
}
);
} - ईवेंट श्रोता के अंदर, वर्तमान प्रतीक प्रदर्शित करने के लिए आंतरिक HTML बदलें। प्रयोग अवश्य करें एक जावास्क्रिप्ट सशर्त बयान पहले यह सुनिश्चित करने के लिए कि सेल खाली है, और यह कि खेल अभी समाप्त नहीं हुआ है:
अगर (यहआंतरिक HTML "" && !gameEnded) {
यहइनरएचटीएमएल = प्लेयर सिंबल;
} - ग्रिड पर दिखाए जाने वाले प्रतीक को शैलीबद्ध करने के लिए HTML तत्व में एक वर्ग जोड़ें। प्रतीक के आधार पर सीएसएस कक्षाओं का नाम या तो "एक्स" या "ओ" होगा:
यह.classList.add (खिलाड़ीSymbol.toLowerCase ()); - "styles.css" फ़ाइल के अंदर, "X" और "O" प्रतीकों के लिए इन दो नई कक्षाओं को जोड़ें। "X" और "O" प्रतीक अलग-अलग रंगों के रूप में प्रदर्शित होंगे:
।एक्स {
रंग: नीला;
फ़ॉन्ट आकार: 80पिक्सल;
}ओ {
रंग: लाल;
फ़ॉन्ट आकार: 80पिक्सल;
} - जावास्क्रिप्ट फ़ाइल में, प्रतीक को प्रदर्शित करने के लिए आंतरिक HTML को बदलने के बाद, प्रतीक को स्वैप करें। उदाहरण के लिए, यदि खिलाड़ी ने अभी "X" रखा है, तो अगले प्रतीक को "O" में बदलें:
अगर (खिलाड़ी प्रतीक "एक्स")
प्लेयर सिंबल = "ओ"
अन्य
प्लेयर सिंबल = "एक्स" - गेम चलाने के लिए, 3 बाय 3 ग्रिड प्रदर्शित करने के लिए वेब ब्राउज़र में "index.html" फ़ाइल खोलें:
- सेल पर क्लिक करके ग्रिड पर प्रतीक रखना प्रारंभ करें। खेल "एक्स" और "ओ" प्रतीकों के बीच वैकल्पिक होगा:
विजेता का निर्धारण कैसे करें
फिलहाल, खेल अभी भी जारी रहेगा, भले ही खिलाड़ी ने लगातार तीन प्रतीकों को रखा हो। प्रत्येक मोड़ के बाद इसे जांचने के लिए आपको समाप्ति की स्थिति जोड़नी होगी।
- अपनी जावास्क्रिप्ट फ़ाइल के अंदर, 3 से 3 ग्रिड के लिए सभी संभावित "जीतने" की स्थिति को स्टोर करने के लिए एक नया चर जोड़ें। उदाहरण के लिए, "[1,2,3]" शीर्ष पंक्ति है, या "[1,4,7]" एक विकर्ण पंक्ति है।
होने देना विनपोस = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - चेकविन () नामक एक नया फ़ंक्शन जोड़ें:
समारोहcheckWin() {
} - फ़ंक्शन के अंदर, प्रत्येक संभावित जीतने वाली स्थिति के माध्यम से लूप करें:
के लिए (होने देना मैं = 0; मैं} - लूप के अंदर, जांचें कि क्या सभी कोशिकाओं में खिलाड़ी का प्रतीक है:
अगर (
दस्तावेज़.getElementById (winPos[i][0]).आंतरिकHTML खिलाड़ीप्रतीक &&
दस्तावेज़.getElementById (winPos[i][1]).आंतरिकHTML खिलाड़ीप्रतीक &&
दस्तावेज़.getElementById (winPos[i][2]).आंतरिक HTML खिलाड़ी प्रतीक
) {} - यदि स्थिति सत्य का मूल्यांकन करती है, तो सभी प्रतीक एक सीधी रेखा में होते हैं। if कथन के अंदर, उपयोगकर्ता को एक संदेश प्रदर्शित करें। आप "जीत" नामक एक सीएसएस वर्ग जोड़कर HTML तत्व की स्टाइलिंग भी बदल सकते हैं:
दस्तावेज़.getElementById (winPos[i][0]).classList.add("जीतना");
दस्तावेज़.getElementById (winPos[i][1]).classList.add("जीतना");
दस्तावेज़.getElementById (winPos[i][2]).classList.add("जीतना");
गेमएंडेड = सत्य;सेटटाइमआउट(समारोह() {
चेतावनी (खिलाड़ी प्रतीक + "जीतता है!");
}, 500); - इस "जीत" सीएसएस वर्ग को "styles.css" फ़ाइल में जोड़ें। जब खिलाड़ी जीतता है, तो वह विजेता सेल की पृष्ठभूमि का रंग बदलकर पीला कर देगा:
।जीतना {
पृष्ठभूमि का रंग: पीला;
} - पिछले चरणों में जोड़े गए ईवेंट हैंडलर के अंदर हर बार किसी खिलाड़ी की बारी आने पर चेकविन () फ़ंक्शन को कॉल करें:
के लिए (होने देना मैं = 1; मैं <= 9; मैं++) {
// जब भी कोई खिलाड़ी किसी सेल पर क्लिक करता है
दस्तावेज़.getElementById (i.toString()).addEventListener(
"क्लिक करें",
समारोह() {
अगर (यहआंतरिक HTML "" && !gameEnded) {
// सेल में या तो "एक्स" या "ओ" प्रदर्शित करें, और इसे स्टाइल करें
यहइनरएचटीएमएल = प्लेयर सिंबल;
यह.classList.add (खिलाड़ीSymbol.toLowerCase ());
// जांचें कि कोई खिलाड़ी जीता है या नहीं
चेकविन ();
// अगले मोड़ के लिए प्रतीक को दूसरे से स्वैप करें
अगर (खिलाड़ी प्रतीक "एक्स")
प्लेयर सिंबल = "ओ"
अन्य
प्लेयर सिंबल = "एक्स"
}
}
);
}
गेम बोर्ड को कैसे रीसेट करें
एक बार जब कोई खिलाड़ी गेम जीत जाता है, तो आप गेम बोर्ड को रीसेट कर सकते हैं। टाई होने की स्थिति में आप गेम बोर्ड को रीसेट भी कर सकते हैं।
- तालिका के बाद HTML फ़ाइल में, रीसेट बटन जोड़ें:
<बटनपहचान="रीसेट">रीसेटबटन> - रीसेट बटन में कुछ स्टाइल जोड़ें:
कंटेनर {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
}#रीसेट {
अंतर: 48पिक्सल 40%;
गद्दी: 20पिक्सल;
} - JavaScript फ़ाइल में, एक ईवेंट हैंडलर जोड़ें जो तब चलेगा जब भी उपयोगकर्ता रीसेट बटन पर क्लिक करेगा:
दस्तावेज़.getElementById("रीसेट".addEventListener (
"क्लिक करें",
समारोह() {}
); - ग्रिड में प्रत्येक सेल के लिए, getElementById() फ़ंक्शन का उपयोग करके HTML तत्व प्राप्त करें। "ओ" और "एक्स" प्रतीकों को हटाने के लिए आंतरिक HTML को रीसेट करें, और अन्य सभी सीएसएस स्टाइल को हटा दें:
के लिए (होने देना मैं = 1; मैं <= 9; मैं++) {
दस्तावेज़.getElementById (i.toString()).innerHTML = "";
दस्तावेज़.getElementById (i.toString()).classList.remove("एक्स");
दस्तावेज़.getElementById (i.toString()).classList.remove("ओ");
दस्तावेज़.getElementById (i.toString()).classList.remove("जीतना");
गेमएंडेड = असत्य;
} - वेब ब्राउजर में "index.html" फाइल खोलकर गेम चलाएं।
- ग्रिड पर "X" और "O" प्रतीकों को रखना प्रारंभ करें। प्रतीकों में से एक को जीतने का प्रयास करें।
- गेम बोर्ड को रीसेट करने के लिए रीसेट बटन दबाएं।
गेम बनाकर जावास्क्रिप्ट सीखना
आप जावास्क्रिप्ट में अधिक प्रोजेक्ट बनाकर अपने प्रोग्रामिंग कौशल में सुधार करना जारी रख सकते हैं। क्रॉस-प्लेटफ़ॉर्म, जावास्क्रिप्ट और HTML जैसी खुली तकनीकों का उपयोग करके वेब वातावरण में सरल गेम और टूल बनाना आसान है।
प्रोग्राम लिखने का अभ्यास करने की तुलना में अपनी प्रोग्रामिंग को बेहतर बनाने का कोई बेहतर तरीका नहीं है!
