建立一個名為 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 遊戲的資訊

","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
瀏覽：903

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 




也可以直接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]刪除
最新教學 更多>
分類更多>
學日語 學韓語 學中文 學外語 遊戲 常見問題 科技週邊 人工智慧 軟體教學 程式設計 文章

學習中文

工具更多>
圖片base64 解編碼
漢語拼音
Unicode編碼
JS混淆加密壓縮
URL網址16進位加密工具
UTF-8編碼轉換工具
線上Ascii編碼解碼工具
MD5加密工具
雜湊/雜湊 文字線上加密解密工具
線上SHA加密

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3