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

瀏覽：256

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

最新教學 更多>

• 

  Async Void vs. Async Task在ASP.NET中：為什麼Async Void方法有時會拋出異常？

  在ASP.NET async void void async void void void void void void void的設計無需返回asynchroncon而無需返回任務對象。他們在執行過程中增加未償還操作的計數，並在完成後減少。在某些情況下，這種行為可能是有益的，例如未期望或明確...

  程式設計 發佈於2025-04-27
• 

  PHP SimpleXML解析帶命名空間冒號的XML方法

  在php 很少，請使用該限制很大，很少有很高。例如：這種技術可確保可以通過遍歷XML樹和使用兒童（）方法（）方法的XML樹和切換名稱空間來訪問名稱空間內的元素。

  程式設計 發佈於2025-04-27
• 

  如何使用不同數量列的聯合數據庫表？

  合併列數不同的表 當嘗試合併列數不同的數據庫表時，可能會遇到挑戰。一種直接的方法是在列數較少的表中，為缺失的列追加空值。 例如，考慮兩個表，表 A 和表 B，其中表 A 的列數多於表 B。為了合併這些表，同時處理表 B 中缺失的列，請按照以下步驟操作： 確定表 B 中缺失的列，並將它們添加到表的...

  程式設計 發佈於2025-04-27
• 

  如何在Chrome中居中選擇框文本？

  選擇框的文本對齊：局部chrome-inly-ly-ly-lyly solument 您可能希望將文本中心集中在選擇框中，以獲取優化的原因或提高可訪問性。但是，在CSS中的選擇元素中手動添加一個文本 - 對屬性可能無法正常工作。 初始嘗試 state）</option> < o...

  程式設計 發佈於2025-04-27
• 

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

  錯誤處理：解決“ error：（ - 215）！empty（）in Function openCv in Function MultSiscale中的“檢測”中的錯誤：在功能檢測中。”當Face Cascade分類器（即面部檢測至關重要的組件）未正確加載時，通常會出現此錯誤。 要解決此問題，必...

  程式設計 發佈於2025-04-27
• 

  \“（1）vs.（;;）：編譯器優化是否消除了性能差異？\”

  答案： 在大多數現代編譯器中，while（1）和（1）和（;;）之間沒有性能差異。編譯器： perl： 1 輸入 - > 2 2 NextState（Main 2 -E：1）V-> 3 9 Leaveloop VK/2-> A 3 toterloop（next-> 8 last-> 9 ...

  程式設計 發佈於2025-04-27
• 

  Python中何時用"try"而非"if"檢測變量值？

  使用“ try“ vs.” if”來測試python 在python中的變量值，在某些情況下，您可能需要在處理之前檢查變量是否具有值。在使用“如果”或“ try”構建體之間決定。 “ if” constructs result = function（） 如果結果： 對於結果： ...

  程式設計 發佈於2025-04-27
• 

  在Python中如何創建動態變量？

  在Python 中，動態創建變量的功能可以是一種強大的工具，尤其是在使用複雜的數據結構或算法時，Dynamic Variable Creation的動態變量創建。 Python提供了幾種創造性的方法來實現這一目標。 利用dictionaries 一種有效的方法是利用字典。字典允許您動態創建密鑰並...

  程式設計 發佈於2025-04-27
• 

  圖片在Chrome中為何仍有邊框？ `border: none;`無效解決方案

  在chrome 中刪除一個頻繁的問題時，在與Chrome and IE9中的圖像一起工作時，遇到了一個頻繁的問題。和“邊境：無；”在CSS中。要解決此問題，請考慮以下方法： Chrome具有忽略“ border：none; none;”的已知錯誤，風格。要解決此問題，請使用以下CSS ID塊創建帶...

  程式設計 發佈於2025-04-27
• 

  在Java中如何為PNG文件添加坐標軸和標籤？

  如何用java 在現有png映像中添加軸和標籤的axes和labels如何註釋png文件可能具有挑戰性。與其嘗試可能導致錯誤和不一致的修改，不如建議在圖表創建過程中集成註釋。 使用JFReechArt import java.awt.color; 導入java.awt.eventqueue; 導...

  程式設計 發佈於2025-04-27
• 

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

  使用php dateTime修改月份：發現預期的行為在使用PHP的DateTime類時，添加或減去幾個月可能並不總是會產生預期的結果。正如文檔所警告的那樣，“當心”這些操作的“不像看起來那樣直觀。 考慮文檔中給出的示例：這是內部發生的事情： 現在在3月3日添加另一個月，因為2月在2001年只有2...

  程式設計 發佈於2025-04-27
• 

  在JavaScript中如何獲取實際渲染的字體，當CSS字體屬性未定義時？

  Accessing Actual Rendered Font when Undefined in CSSWhen accessing the font properties of an element, the JavaScript object.style.fontFamily and objec...

  程式設計 發佈於2025-04-27
• 

  為什麼不使用CSS`content'屬性顯示圖像？

  在Firefox extemers屬性為某些圖像很大，&& && && &&華倍華倍[華氏華倍華氏度]很少見，卻是某些瀏覽屬性很少，尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到：。 googlepic { 內容：url（&...

  程式設計 發佈於2025-04-27
• 

  如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中？

  在Visual Studio 2012 儘管已安裝了MySQL Connector v.6.5.4，但無法將MySQL數據庫添加到實體框架的“ DataSource對話框”中。為了解決這一問題，至關重要的是要了解MySQL連接器v.6.5.5及以後的6.6.x版本將提供MySQL的官方Visual...

  程式設計 發佈於2025-04-27
• 

  左連接為何在右表WHERE子句過濾時像內連接？

  左JOIN CONUNDRUM：WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣，當將c.foobar條件放置在上面的Where子句中時，據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時，才會返回結果。 為什麼要變形？關鍵在於其中的子句。當左聯接的右側...

  程式設計 發佈於2025-04-27

分類更多>

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

學習中文

• 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加密