网站导航
> 技术文档 > Web前端：JavaScript Math选字游戏 斯特鲁普效应测试

Web前端：JavaScript Math选字游戏 斯特鲁普效应测试

网友: 技术文档 2025-07-26 20:44:14

游戏概述

这个游戏测试用户的认知反应能力，基于经典的\"斯特鲁普效应\"（Stroop Effect）心理现象：

  • 文字含义和文字颜色不一致时，人脑需要更长时间反应

  • 玩家需要忽略文字含义，专注于文字颜色

游戏界面解析

 
红
  
提示：看上⾯的字选择正确的颜⾊
 
     
  • 红
    •    
  • ⻩
    •  
  • 蓝
    •  
  • 绿
    •  
  • ⿊
    •  
 
0

核心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 = 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; }}

完整代码

   斯特鲁普效应测试 | 选字游戏  * { 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; } }  
 
斯特鲁普效应测试
 
挑战你的大脑反应速度 - 忽略文字含义，专注文字颜色
 
 
 
红
 
选择与上方文字实际颜色匹配的选项
 
  当前得分：  0 
 
      
  • 红
    •   
  • ⻩
    •   
  • 蓝
    •   
  • 绿
    •   
  • ⿊
    •  
 
    
 
 
 
  // 获取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 = 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  { 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();

效果展示：

 关键知识点详解

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. 游戏逻辑实现

  1. 初始化：

    • 随机选择文字和颜色组合

    • 设置选项的文字和颜色

  2. 用户交互：

    • 用户点击选项

    • 检查选择的颜色是否匹配目标文字的实际颜色

  3. 得分处理：

    • 正确：得分增加

    • 错误：得分减少

    • 达到10分获胜，0分以下游戏结束

 4. 优化功能

  1. 视觉反馈：

    • 正确/错误时的动画效果

    • 得分颜色变化（金色/红色）

  2. 响应式设计：

    • 适配不同屏幕尺寸

    • 移动设备优化

  3. 游戏说明：

    • 添加详细的游戏规则说明

    • 帮助玩家理解斯特鲁普效应

  4. 动画效果：

    • 选项悬停效果

    • 选择时的缩放反馈

    • 题目切换平滑过渡

 

学习要点总结

  1. Math对象应用：

    • 使用Math.random()生成随机索引

    • 结合数组长度控制随机数范围

  2. DOM操作：

    • 获取页面元素

    • 修改元素内容和样式

    • 添加事件监听器

  3. 游戏逻辑设计：

    • 状态管理（得分）

    • 用户输入处理

    • 游戏状态转换（开始/结束）

  4. CSS技巧：

    • 居中布局

    • 动画和过渡效果

    • 背景模糊效果

    • 响应式设计

  5. 心理学知识应用：

    • 理解斯特鲁普效应

    • 设计认知测试游戏

网络标签：

相关问题