styles.css नामक एक फ़ाइल बनाएं:

body {    font-family: Arial, sans-serif;    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container {    text-align: center;}#game-board {    display: grid;    grid-template-columns: repeat(5, 40px);    gap: 10px;    margin-bottom: 20px;}.cell {    width: 40px;    height: 40px;    display: flex;    justify-content: center;    align-items: center;    border: 1px solid #ddd;    font-size: 18px;}.correct {    background-color: #6aaa64;    color: white;}.present {    background-color: #c9b458;    color: white;}.absent {    background-color: #787c7e;    color: white;}

script.js नामक एक फ़ाइल बनाएं:

const possibleWords = [\\'apple\\', \\'brave\\', \\'crane\\', \\'dough\\', \\'eagle\\']; // List of possible wordsconst targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target wordconst gameBoard = document.getElementById(\\'game-board\\');const guessInput = document.getElementById(\\'guess-input\\');const submitBtn = document.getElementById(\\'submit-btn\\');const message = document.getElementById(\\'message\\');function createBoard() {    for (let i = 0; i < 6; i  ) { // 6 rows for 6 guesses        for (let j = 0; j < 5; j  ) { // 5 columns for 5 letters            const cell = document.createElement(\\'div\\');            cell.classList.add(\\'cell\\');            gameBoard.appendChild(cell);        }    }}function checkGuess(guess) {    const cells = gameBoard.querySelectorAll(\\'.cell\\');    const targetWordArray = targetWord.split(\\'\\');    const guessArray = guess.split(\\'\\');    let index = 0;    for (let i = 0; i < 5; i  ) {        if (guessArray[i] === targetWordArray[i]) {            cells[index].classList.add(\\'correct\\');        } else if (targetWordArray.includes(guessArray[i])) {            cells[index].classList.add(\\'present\\');        } else {            cells[index].classList.add(\\'absent\\');        }        cells[index].textContent = guessArray[i];        index  ;    }}function handleSubmit() {    const guess = guessInput.value.toLowerCase();    if (guess.length !== 5 || !possibleWords.includes(guess)) {        message.textContent = \\'Invalid word. Try again.\\';        return;    }    checkGuess(guess);    guessInput.value = \\'\\';    // Additional game logic (e.g., end game if correct guess or number of attempts) can be added here}createBoard();submitBtn.addEventListener(\\'click\\', handleSubmit);

आप सीधे क्लोन भी कर सकते हैं: https://github.com/prince-dev007/wordle-game

वर्डल गेम के बारे में और पढ़ें

","image":"http://www.luping.net/uploads/20241001/172777969166fbd36b7819f.jpg","datePublished":"2024-11-01T09:51:21+08:00","dateModified":"2024-11-01T09:51:21+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
ऑनलाइन उपकरण
सॉफ्टवेयर ट्यूटोरियल
साइट नेविगेशन
प्रोग्रामिंग
मुखपृष्ठ > प्रोग्रामिंग > HTML, CSS और JS में एक वर्डल गेम बनाएं

HTML, CSS और JS में एक वर्डल गेम बनाएं

2024-11-01 को प्रकाशित
ब्राउज़ करें:935

Create a Wordle Game in HTML,CSS, and JS

index.html नामक एक फ़ाइल बनाएं:



    
    
    Wordle Game
    


    

        
Wordle Game

styles.css नामक एक फ़ाइल बनाएं:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: 10px;
    margin-bottom: 20px;
}

.cell {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    font-size: 18px;
}

.correct {
    background-color: #6aaa64;
    color: white;
}

.present {
    background-color: #c9b458;
    color: white;
}

.absent {
    background-color: #787c7e;
    color: white;
}

script.js नामक एक फ़ाइल बनाएं:

const possibleWords = ['apple', 'brave', 'crane', 'dough', 'eagle']; // List of possible words
const targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target word

const gameBoard = document.getElementById('game-board');
const guessInput = document.getElementById('guess-input');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');

function createBoard() {
    for (let i = 0; i 




आप सीधे क्लोन भी कर सकते हैं: https://github.com/prince-dev007/wordle-game



वर्डल गेम के बारे में और पढ़ें
विज्ञप्ति वक्तव्य इस लेख को पुन: प्रस्तुत किया गया है: https://dev.to/devops_den/create-a-wordle-game-hame-htmlcss-and-js-4d17?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>
वर्गीकरणअधिक>
जापानी सीखें कोरियाई सीखो चीनी सीखें विदेशी भाषा सीखें खेल आम समस्या प्रौद्योगिकी परिधीय ऐ सॉफ्टवेयर ट्यूटोरियल प्रोग्रामिंग लेख

चीनी भाषा का अध्ययन करें

औजारअधिक>
छवि बेस64 डिकोडिंग
चीनी पिनयिन
यूनिकोड एन्कोडिंग
जेएस ऑबफस्केशन एन्क्रिप्शन संपीड़न
यूआरएल हेक्साडेसिमल एन्क्रिप्शन उपकरण
UTF-8 एन्कोडिंग रूपांतरण उपकरण
ऑनलाइन Ascii एन्कोडिंग और डिकोडिंग उपकरण
MD5 एन्क्रिप्शन उपकरण
हैश/हैश टेक्स्ट ऑनलाइन एन्क्रिप्शन और डिक्रिप्शन टूल
ऑनलाइन SHA एन्क्रिप्शन

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3