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

浏览：500

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

最新教程 更多>

• 

  网页WebKit变换过渡闪烁原因及解决方法

  Flicker Issue with Webkit-Transform TransitionIn a scenario where a webkit-transform property transition causes a noticeable flicker, here are the tro...

  编程 发布于2025-05-01
• 

  解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常

  Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...

  编程 发布于2025-05-01
• 

  Java开发者如何保护数据库凭证免受反编译？

  在java 在单独的配置文件保护数据库凭证的最有效方法中存储凭据是将它们存储在单独的配置文件中。该文件可以在运行时加载，从而使登录数据从编译的二进制文件中远离。使用prevereness class import java.util.prefs.preferences; 公共类示例{ 首选项...

  编程 发布于2025-05-01
• 

  在Windows上，C# (.NET 2.0)应用程序的最佳进程间通信方法有哪些？

  在C＃（.NET 2.0）中的Windows的CranceCess Communication方法 WCF，在.NET 3.0中提供了可增强命名性管道的强大IPC机制，可增强误差误差，并降低了误差的误差。命名管需要.net 3.0或更高。。网络远程 remoting，使用.NET 1.0发行，也提...

  编程 发布于2025-05-01
• 

  如何使用组在MySQL中旋转数据？

  在关系数据库中使用mySQL组使用mySQL组进行查询结果，在关系数据库中使用MySQL组，转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里，我们面对一个共同的挑战：使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...

  编程 发布于2025-05-01
• 

  Java中Lambda表达式为何需要“final”或“有效final”变量？

  Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...

  编程 发布于2025-05-01
• 

  对象拟合：IE和Edge中的封面失败，如何修复？

  To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50％）...

  编程 发布于2025-05-01
• 

  如何在其容器中为DIV创建平滑的左右CSS动画？

  通用CSS动画，用于左右运动 ，我们将探索创建一个通用的CSS动画，以向左和右移动DIV，从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div，无论其未知长度如何。问题：使用左直接导致瞬时消失 更加流畅的解决方案：混合转换和左 [并实现平稳的，线性的运动，我们介绍了线性的转换。这...

  编程 发布于2025-05-01
• 

  在Go语言中如何简洁定义10的幂常量

  在GO 利用浮点线文字一种简洁的方式是使用浮点文字，该方法是使用floingpoint protals。写作1E3比写作1000更有效。这是一个示例（67个没有空间的字符）：的文字用于未构图的整数常数，我们可以将1000用于KB，并用KB将随后的常量乘以KB，如下所示（77个没有空格的字符）：，作...

  编程 发布于2025-05-01
• 

  CSS强类型语言解析

  您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里，“键入”意味着是否在编译时已知变量。一个例子是一个场景，将整数（1）添加到包含整数（“ 1”）的字符串： result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...

  编程 发布于2025-05-01
• 

  为什么Microsoft Visual C ++无法正确实现两台模板的实例？

  The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...

  编程 发布于2025-05-01
• 

  Python元类工作原理及类创建与定制

  python中的metaclasses是什么？ Metaclasses负责在Python中创建类对象。就像类创建实例一样，元类也创建类。他们提供了对类创建过程的控制层，允许自定义类行为和属性。在Python中理解类作为对象的概念，类是描述用于创建新实例或对象的蓝图的对象。这意味着类本身是使用类关...

  编程 发布于2025-05-01
• 

  \“（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-05-01
• 

  Android如何向PHP服务器发送POST数据？

  在android apache httpclient（已弃用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...

  编程 发布于2025-05-01
• 

  C#流程执行优化技巧大揭秘

  [2 在C＃中运行高架进程：实用指南 概述 许多C＃应用程序需要启动需要管理权限的流程。本指南探讨了实现这一目标的有效方法。 方法1：使用“ runas”动词（vista的理想和以后） 对于Vista和更新的操作系统，“ Runas”动词提供了一个简单的解决方案： //检查操作系统版本 if（sy...

  编程 发布于2025-05-01

分类更多>

学日语 学韩语 学中文 学外语 游戏 常见问题 科技周边 人工智能 软件教程 编程 文章

学习中文

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