Web前端：JavaScript Math选字游戏 斯特鲁普效应测试
游戏概述
这个游戏测试用户的认知反应能力，基于经典的"斯特鲁普效应"（Stroop Effect）心理现象：
文字含义和文字颜色不一致时，人脑需要更长时间反应
玩家需要忽略文字含义，专注于文字颜色
游戏界面解析
<div class="box"><h2 id="title">红</h2> <!-- 显示目标文字（颜色和内容随机） --><p class="alt">提示：看上⾯的字选择正确的颜⾊</p><ul class="list"><li>红</li> <!-- 选项按钮 --><li>⻩</li><li>蓝</li><li>绿</li><li>⿊</li></ul><p id="num">0</p> <!-- 得分显示 -->
</div>核心JavaScript逻辑分析
1. 初始化变量和数据
// 获取DOM元素
var _title = document.getElementById('title');
var _lis = document.getElementsByTagName('li');
var _num = document.getElementById('num');// 颜色和文字的数组
var _color = ['red', 'yellow', 'blue', 'green', 'black'];
var _font = ['红', '⻩', '蓝', '绿', '⿊'];// 得分变量
var n = 0;2. 使用Math.random()生成随机索引
// 生成0-4的随机整数（数组索引）
var aColor = Math.floor(Math.random() * _color.length);
var aFont = Math.floor(Math.random() * _font.length);Math.random(): 生成[0,1)之间的随机小数* _color.length: 将随机数范围扩展到数组长度Math.floor(): 向下取整，得到整数索引
3. 设置初始游戏状态
// 设置标题文字和颜色
_title.innerHTML = _font[aFont]; // 随机文字
_title.style.color = _color[aColor]; // 随机颜色// 设置选项文字和颜色（固定对应）
for (var i = 0; i < _lis.length; i++) {_lis[i].innerHTML = _font[i]; // 文字固定为红、黄、蓝、绿、黑_lis[i].style.color = _color[i]; // 颜色固定为红、黄、蓝、绿、黑
}4. 处理用户选择逻辑
for (var i = 0; i < _lis.length; i++) {// 存储当前索引_lis[i].index = i;_lis[i].onclick = function() {// 判断用户选择的颜色是否匹配目标颜色if (_color[this.index] == _color[aColor]) {// 回答正确n++;if (n >= 10) {alert('You Good !');}} else {// 回答错误n--;if (n < 0) {alert('Game Over !');n = 0;}alert('You Lose !')}// 重新生成随机题目aColor = Math.floor(Math.random() * _color.length);aFont = Math.floor(Math.random() * _font.length);_title.innerHTML = _font[aFont];_title.style.color = _color[aColor];// 更新得分显示_num.innerHTML = n;}
}完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>斯特鲁普效应测试 | 选字游戏</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;}body {background: linear-gradient(135deg, #1a2980, #26d0ce);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.container {max-width: 800px;width: 100%;text-align: center;}h1 {color: white;font-size: 2.8rem;margin-bottom: 15px;text-shadow: 0 2px 10px rgba(0,0,0,0.3);}.subtitle {color: rgba(255, 255, 255, 0.9);font-size: 1.3rem;margin-bottom: 30px;max-width: 600px;margin-left: auto;margin-right: auto;line-height: 1.6;font-weight: 500;}.game-container {display: flex;flex-wrap: wrap;gap: 30px;justify-content: center;margin-bottom: 30px;}.box {width: 100%;max-width: 500px;background-color: rgba(255, 255, 255, 0.15);border-radius: 20px;padding: 30px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.2);}#title {width: 220px;height: 220px;margin: 0 auto 30px;font-size: 7rem;font-weight: bold;display: flex;justify-content: center;align-items: center;border-radius: 50%;background: rgba(0, 0, 0, 0.2);box-shadow: 0 0 30px rgba(0,0,0,0.3);transition: all 0.3s ease;border: 5px solid rgba(255,255,255,0.2);}#title:hover {transform: scale(1.05);box-shadow: 0 0 40px rgba(0,0,0,0.4);}.alt {color: rgba(255, 255, 255, 0.95);font-size: 1.4rem;margin-bottom: 30px;font-weight: 600;}.list {display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;margin-bottom: 30px;}.list li {width: 80px;height: 80px;font-size: 2.2rem;display: flex;justify-content: center;align-items: center;border-radius: 15px;cursor: pointer;transition: all 0.3s ease;font-weight: bold;background: rgba(0, 0, 0, 0.25);box-shadow: 0 4px 10px rgba(0,0,0,0.2);border: 2px solid rgba(255,255,255,0.15);}.list li:hover {transform: translateY(-7px);box-shadow: 0 8px 15px rgba(0,0,0,0.3);background: rgba(0, 0, 0, 0.35);}.score-container {display: flex;justify-content: center;align-items: center;gap: 15px;margin-bottom: 20px;}.score-label {font-size: 1.8rem;color: white;font-weight: 500;}#num {font-size: 3rem;font-weight: bold;color: #FFD700;text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);min-width: 50px;}.action-buttons {display: flex;justify-content: center;gap: 20px;margin-top: 25px;}.btn {padding: 12px 30px;background: linear-gradient(45deg, #FF416C, #FF4B2B);color: white;font-size: 1.1rem;font-weight: 600;border: none;border-radius: 50px;cursor: pointer;box-shadow: 0 5px 15px rgba(0,0,0,0.3);transition: all 0.3s ease;}.btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0,0,0,0.4);}.btn:active {transform: translateY(0);}.btn-reset {background: linear-gradient(45deg, #36D1DC, #5B86E5);}@media (max-width: 768px) {.game-container {flex-direction: column;align-items: center;}#title {width: 180px;height: 180px;font-size: 5.5rem;}.list li {width: 70px;height: 70px;font-size: 2rem;}h1 {font-size: 2.3rem;}.subtitle {font-size: 1.1rem;}}@media (max-width: 480px) {#title {width: 150px;height: 150px;font-size: 4.5rem;}.list li {width: 60px;height: 60px;font-size: 1.7rem;}.alt {font-size: 1.2rem;}.score-label {font-size: 1.5rem;}#num {font-size: 2.5rem;}}</style>
</head>
<body><div class="container"><h1>斯特鲁普效应测试</h1><p class="subtitle">挑战你的大脑反应速度 - 忽略文字含义，专注文字颜色</p><div class="game-container"><div class="box"><div id="title">红</div><p class="alt">选择与上方文字<u>实际颜色</u>匹配的选项</p><div class="score-container"><span class="score-label">当前得分：</span><span id="num">0</span></div><ul class="list"><li>红</li><li>⻩</li><li>蓝</li><li>绿</li><li>⿊</li></ul><div class="action-buttons"><button class="btn btn-reset" id="resetBtn">重置游戏</button></div></div></div></div><script>// 获取DOM元素const title = document.getElementById('title');const lis = document.getElementsByTagName('li');const num = document.getElementById('num');const resetBtn = document.getElementById('resetBtn');const hintBtn = document.getElementById('hintBtn');// 颜色和文字的数组const colors = ['red', 'gold', 'dodgerblue', 'limegreen', 'black'];const fonts = ['红', '⻩', '蓝', '绿', '⿊'];// 得分变量let score = 0;// 生成随机索引let colorIndex, fontIndex;// 初始化游戏function initGame() {generateQuestion();updateScore();// 设置选项文字和颜色for (let i = 0; i < lis.length; i++) {lis[i].innerHTML = fonts[i];lis[i].style.color = colors[i];lis[i].style.fontWeight = 'bold';// 添加点击事件lis[i].addEventListener('click', handleChoice);}// 重置按钮事件resetBtn.addEventListener('click', resetGame);}// 生成新题目function generateQuestion() {// 生成0-4的随机整数colorIndex = Math.floor(Math.random() * colors.length);fontIndex = Math.floor(Math.random() * fonts.length);// 设置标题文字和颜色title.innerHTML = fonts[fontIndex];title.style.color = colors[colorIndex];}// 处理用户选择function handleChoice() {// 获取点击选项的索引const choiceIndex = Array.from(lis).indexOf(this);// 检查选择是否正确if (colors[choiceIndex] === colors[colorIndex]) {// 回答正确score++;title.style.transform = 'scale(1.1)';title.style.boxShadow = '0 0 40px rgba(0,255,0,0.5)';this.style.boxShadow = '0 0 20px rgba(0,255,0,0.8)';if (score >= 10) {setTimeout(() => {alert('🎉 恭喜获胜！你的认知能力非常出色！');resetGame();}, 400);}} else {// 回答错误score--;this.style.transform = 'scale(0.9)';this.style.boxShadow = '0 0 20px rgba(255,0,0,0.8)';if (score < 0) {score = 0;setTimeout(() => {alert('游戏结束！继续努力，你可以做得更好！');}, 400);}}// 更新得分updateScore();// 恢复样式setTimeout(() => {title.style.transform = 'scale(1)';title.style.boxShadow = '0 0 30px rgba(0,0,0,0.3)';this.style.transform = 'scale(1)';this.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';// 生成新题目generateQuestion();}, 400);}// 更新得分显示function updateScore() {num.textContent = score;num.style.color = score >= 7 ? '#4cff00' : score >= 4 ? '#FFD700' : '#FF6B6B';num.style.textShadow = `0 0 10px ${score >= 7 ? 'rgba(76, 255, 0, 0.7)' : score >= 4 ? 'rgba(255, 215, 0, 0.7)' : 'rgba(255, 107, 107, 0.7)'}`;}// 重置游戏function resetGame() {score = 0;updateScore();generateQuestion();}// 初始化游戏initGame();</script>
</body>
</html>效果展示：
关键知识点详解
1. Math.random()的应用
// 生成0-4的随机整数
colorIndex = Math.floor(Math.random() * colors.length);Math.random(): 生成[0,1)之间的随机小数* colors.length: 将范围扩展到数组长度(5)Math.floor(): 向下取整，得到0-4的整数
2. 斯特鲁普效应(Stroop Effect)
这个游戏基于心理学中的经典现象：
当文字含义和文字颜色不一致时，人脑需要额外时间处理冲突
游戏测试玩家抑制习惯性反应的能力
3. 游戏逻辑实现
初始化：
随机选择文字和颜色组合
设置选项的文字和颜色
用户交互：
用户点击选项
检查选择的颜色是否匹配目标文字的实际颜色
得分处理：
正确：得分增加
错误：得分减少
达到10分获胜，0分以下游戏结束
4. 优化功能
视觉反馈：
正确/错误时的动画效果
得分颜色变化（金色/红色）
响应式设计：
适配不同屏幕尺寸
移动设备优化
游戏说明：
添加详细的游戏规则说明
帮助玩家理解斯特鲁普效应
动画效果：
选项悬停效果
选择时的缩放反馈
题目切换平滑过渡
学习要点总结
Math对象应用：
使用Math.random()生成随机索引
结合数组长度控制随机数范围
DOM操作：
获取页面元素
修改元素内容和样式
添加事件监听器
游戏逻辑设计：
状态管理（得分）
用户输入处理
游戏状态转换（开始/结束）
CSS技巧：
居中布局
动画和过渡效果
背景模糊效果
响应式设计
心理学知识应用：
理解斯特鲁普效应
设计认知测试游戏