目录
效果预览图
游戏规则
整体思路
完整代码
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() 函数
