使用 HTML、CSS 和 JS 创建文字游戏

创建一个名为index.html的文件：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wordle Game</title>
    <link rel="stylesheet" href="styles.css">


    <div class="container">
        <h1 id="Wordle-Game">Wordle Game</h1>
        <div id="game-board"></div>
        <input type="text" id="guess-input" maxlength="5" placeholder="Enter your guess">
        <button id="submit-btn">Submit</button>
        <p id="message"></p>
    </div>
    <script src="script.js"></script>

创建一个名为 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 



<p>也可以直接克隆：https://github.com/prince-dev007/wordle-game</p>

<p>了解更多有关文字游戏的信息</p>


          

            
        

以上是使用 HTML、CSS 和 JS 创建文字游戏的详细内容。更多信息请关注PHP中文网其他相关文章！