目录
效果预览图
游戏规则
整体思路
完整代码
html部分
js部分
效果预览图
游戏规则
1.游戏时间为30s，30s倒计时结束弹出游戏结束和对应的游戏分数。
2.根据中间大字的颜色，点击下面对应的文字。 大字的颜色 == 点击的文字（列如：大字的文字是绿，颜色为黄色，则点击下面的小字黄 得分加一，如果点击其他文字则不加分，即使其他文字的颜色是黄色） 分数加一分。
3.点击错误不加分，也不减分。
整体思路
定义变量和数组：
- 创建一个变量 并初始化为零，用于记录得分。
- 创建一个数组 ，包含游戏中可能出现的颜色名称。
- 创建一个数组，包含游戏中可能出现的文字。
创建一个函数dx()开始游戏：
- 在函数中，使用
setInterval函数设置一个计时器，每秒减少剩余时间。- 定义一个变量num并初始化为 30，用于倒计时。
- 在计时器的回调函数中，更新剩余时间并将其显示在页面上，如果剩余时间为零，清除计时器，结束游戏。。
打乱数组的顺序
设置处理点击事件：
- 在函数中，获取点击的元素的文字和颜色。
- 如果颜色与文字匹配，将得分变量加一，并更新页面上的得分显示。
- 否则，不得分。
完整代码
html部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字游戏</title><link rel="stylesheet" href="./css/style.css"> <!-- 引用外部样式表文件 -->
</head>
<body><div class="rongqi"><h3 class="r">剩余时间:<var>30</var> S</h3> <!-- 显示剩余时间的元素 --><h3 class="l">得分: <b>0</b> </h3> <!-- 显示得分的元素 --><div id="dwz"><!-- 待选文字的容器 --></div><div id="xwz"><span></span> <!-- 选中文字的容器 --><span></span><span></span><span></span><span></span></div></div>
</body>
</html>
<script src="./js/wzyx.js"></script> <!-- 引用外部 JavaScript 文件实现游戏逻辑 -->
js部分
// 定义选择器函数 $
function $(ele) {// 判断传入的参数是否为空字符串、undefined、或者是数字或对象if (ele == '' || ele == undefined || typeof ele == "number" || typeof ele == "object") {return; // 返回空值}// 获取传入参数的第一个字符let first = ele.charAt();if (first == '#') { // 如果第一个字符是 #// 返回通过 id 获取的元素return document.getElementById(ele.slice(1));} else if (first == '.') { // 如果第一个字符是 .// 返回通过 class 获取的元素集合return document.getElementsByClassName(ele.slice(1));} else {// 返回通过标签名获取的元素集合return document.getElementsByTagName(ele);}
}// 剩余时间倒计时
let num = 30; // 初始倒计时时间
let n = null; // 用于存放计时器的标识
let sum = 0; // 得分初始化为 0
let timer;n = setInterval(function() {num--; // 每秒减少剩余时间$('var')[0].innerHTML = num; // 更新倒计时显示if (num <= 0) { // 时间归零clearInterval(n); // 清除计时器// 弹出游戏结束的提示框，并显示得分alert(`游戏结束，您的得分为${sum}分`);}
}, 1000);// 声明颜色数组 cols，存放五种颜色
let cols = ['red', 'yellow', 'blue', 'green', 'purple'];
// 声明文字数组 wz，用于存放点击时的文字
let wz = ['红', '黄', '蓝', '绿', '紫'];// 打乱文字和颜色的数组，实现随机生成
function dx() {// 打乱文字数组wz.sort(function() {return Math.random() - 0.5;});// 打乱颜色数组cols.sort(function() {return Math.random() - 0.5;});// 随机设置大字的颜色let c = Math.floor(Math.random() * 5);$('#dwz').style.color = cols[c];console.log(cols[c]);// 随机设置小字的颜色和位置for (let i = 0; i < wz.length; i++) {$('span')[i].innerHTML = wz[i];$('span')[i].style.color = cols[i];$('#dwz').innerHTML = wz[i];}let anc = '';switch (cols[c]) {case 'red':anc = '红';break;case 'yellow':anc = '黄';break;case 'blue':anc = '蓝';break;case 'green':anc = '绿';break;case 'purple':anc = '紫';break;default:break;}// 设置小字的点击事件for (let i = 0; i < wz.length; i++) {$('span')[i].onclick = function() {console.log(wz[i]);if (wz[i] == anc) { // 如果点击的文字和大字的颜色相同sum += 1; // 增加得分}dx(); // 重新生成新的文字和颜色};}$('b')[0].innerHTML = sum; // 更新显示得分的元素
}dx(); // 开始游戏，调用 dx() 函数
