建立一個名為 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);

也可以直接clone：https://github.com/prince-dev007/wordle-game

以了解更多關於 Wordle 遊戲的資訊

首頁 > 程式設計 > 使用 HTML、CSS 和 JS 建立文字遊戲

使用 HTML、CSS 和 JS 建立文字遊戲

發佈於2024-11-01

瀏覽：950

建立一個名為index.html的檔案:

    
    
    
    


    

        
Wordle Game
        

        
        Submit
        

    
    

建立一個名為 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 



也可以直接clone：https://github.com/prince-dev007/wordle-game

以了解更多關於 Wordle 遊戲的資訊


          

            
        

版本聲明 本文轉載於：https://dev.to/devops_den/create-a-wordle-game-in-htmlcss-and-js-4d17?1如有侵犯，請聯絡[email protected]刪除

最新教學 更多>

• 

  切換到MySQLi後CodeIgniter連接MySQL數據庫失敗原因

  無法連接到mySQL數據庫：故障排除錯誤消息要調試問題，建議將以下代碼添加到文件的末尾.//config/database.php並查看輸出： ... ... 迴聲'... echo '<pre>'; print_r($db['default']); echo '</pr...

  程式設計 發佈於2025-07-14
• 

  我可以將加密從McRypt遷移到OpenSSL，並使用OpenSSL遷移MCRYPT加密數據？

  將我的加密庫從mcrypt升級到openssl 問題：是否可以將我的加密庫從McRypt升級到OpenSSL？如果是這樣，如何？ 答案：是的，可以將您的Encryption庫從McRypt升級到OpenSSL。 可以使用openssl。 附加說明： [openssl_decrypt（）函數要求...

  程式設計 發佈於2025-07-14
• 

  如何使用Python的請求和假用戶代理繞過網站塊？

  如何使用Python的請求模擬瀏覽器行為，以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header，以提供有效的用戶 - 設置，該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...

  程式設計 發佈於2025-07-14
• 

  如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行？

  postgresql：為每個唯一標識符提取最後一行，在Postgresql中，您可能需要遇到與在數據庫中的每個不同標識相關的信息中提取信息的情況。考慮以下數據：[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息，您可以在操作員上使用Postgres的有效效率： ...

  程式設計 發佈於2025-07-14
• 

  如何檢查對像是否具有Python中的特定屬性？

  方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例，其中嘗試訪問不確定屬性會引起錯誤： >>> a = someClass（） >>> A.property Trackback（最近的最新電話）： 文件“ ”，第1行， attributeError：SomeClass實...

  程式設計 發佈於2025-07-14
• 

  編譯器報錯“usr/bin/ld: cannot find -l”解決方法

  錯誤：“ usr/bin/ld：找不到-l “ 此錯誤表明鏈接器在鏈接您的可執行文件時無法找到指定的庫。為了解決此問題，我們將深入研究如何指定庫路徑並將鏈接引導到正確位置的詳細信息。 添加庫搜索路徑的一個可能的原因是，此錯誤是您的makefile中缺少庫搜索路徑。要解決它，您可以在鏈接器命令中添...

  程式設計 發佈於2025-07-14
• 

  解決Spring Security 4.1及以上版本CORS問題指南

  彈簧安全性cors filter：故障排除常見問題 在將Spring Security集成到現有項目中時，您可能會遇到與CORS相關的錯誤，如果像“訪問Control-allo-allow-Origin”之類的標頭，則無法設置在響應中。為了解決此問題，您可以實現自定義過濾器，例如代碼段中的MyFi...

  程式設計 發佈於2025-07-14
• 

  在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法

  在UTF8表中將latin1字符轉換為utf8 ，您遇到了一個問題，其中含義的字符（例如，“jáuòiñe”）在utf8 table tabled tablesset中被extect（例如，“致電。為了解決此問題，您正在嘗試使用“ mb_convert_encoding”和“ iconv”轉換受...

  程式設計 發佈於2025-07-14
• 

  在GO中構造SQL查詢時，如何安全地加入文本和值？

  在go中構造文本sql查詢時，在go sql queries 中，在使用conting and contement和contement consem per時，尤其是在使用integer per當per當per時，per per per當per. 在GO中實現這一目標的慣用方法是使用fmt.spr...

  程式設計 發佈於2025-07-14
• 

  Python中嵌套函數與閉包的區別是什麼

  嵌套函數與python 在python中的嵌套函數不被考慮閉合，因為它們不符合以下要求：不訪問局部範圍scliables to incling scliables在封裝範圍外執行範圍的局部範圍。 make_printer（msg）： DEF打印機（）： 打印（味精） ...

  程式設計 發佈於2025-07-14
• 

  Java中假喚醒真的會發生嗎？

  在Java中的浪費喚醒：真實性或神話？ 在Java同步中偽裝喚醒的概念已經是討論的主題。儘管存在這種行為的潛力，但問題仍然存在：它們實際上是在實踐中發生的嗎？ Linux的喚醒機制根據Wikipedia關於偽造喚醒的文章，linux實現了pthread_cond_wait（）功能的Linux實現，...

  程式設計 發佈於2025-07-14
• 

  人臉檢測失敗原因及解決方案：Error -215

  錯誤處理：解決“ error：（（-215）！empty（）in Function Multultiscale中的“ openCV 要解決此問題，必須確保提供給HAAR CASCADE XML文件的路徑有效。在提供的代碼片段中，級聯分類器裝有硬編碼路徑，這可能對您的系統不准確。相反，OPENCV提...

  程式設計 發佈於2025-07-14
• 

  將圖片浮動到底部右側並環繞文字的技巧

  在Web設計中圍繞在Web設計中，有時可以將圖像浮動到頁面右下角，從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角，使用css float and clear properties： img { 浮點：對； ...

  程式設計 發佈於2025-07-14
• 

  為什麼PHP的DateTime :: Modify（'+1個月'）會產生意外的結果？

  使用php dateTime修改月份：發現預期的行為在使用PHP的DateTime類時，添加或減去幾個月可能並不總是會產生預期的結果。正如文檔所警告的那樣，“當心”這些操作的“不像看起來那樣直觀。 ; $ date->修改（'1個月'）; //前進1個月 echo $ date->...

  程式設計 發佈於2025-07-14
• 

  C++中如何將獨占指針作為函數或構造函數參數傳遞？

  在構造函數和函數中將唯一的指數管理為參數 unique pointers（ unique_ptr [2啟示。通過值： base（std :: simelor_ptr n） ：next（std :: move（n））{} 此方法將唯一指針的所有權轉移到函數/對象。指針的內容被移至功能中，在操作...

  程式設計 發佈於2025-07-14

分類更多>

學日語 學韓語 學中文 學外語 遊戲 常見問題 科技週邊 人工智慧 軟體教學 程式設計 文章

學習中文

• 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
• 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
• 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
• 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
• 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
• 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
• 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
• 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
• 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
• 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning

工具更多>

圖片base64 解編碼

漢語拼音

Unicode編碼

JS混淆加密壓縮

URL網址16進位加密工具

UTF-8編碼轉換工具

線上Ascii編碼解碼工具

MD5加密工具

雜湊/雜湊 文字線上加密解密工具

線上SHA加密