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

游戏概述

这个游戏测试用户的认知反应能力，基于经典的"斯特鲁普效应"（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技巧：
- 居中布局
- 动画和过渡效果
- 背景模糊效果
- 响应式设计
心理学知识应用：
- 理解斯特鲁普效应
- 设计认知测试游戏

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

游戏概述

游戏界面解析

核心JavaScript逻辑分析

1. 初始化变量和数据

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

3. 设置初始游戏状态

4. 处理用户选择逻辑

完整代码

效果展示：

关键知识点详解

1. Math.random()的应用

2. 斯特鲁普效应(Stroop Effect)

3. 游戏逻辑实现

4. 优化功能

学习要点总结

网站公告

今日签到

热门文章

最新发布

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

游戏概述

游戏界面解析

核心JavaScript逻辑分析

1. 初始化变量和数据

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

3. 设置初始游戏状态

4. 处理用户选择逻辑

完整代码

效果展示：

关键知识点详解

1. Math.random()的应用

2. 斯特鲁普效应(Stroop Effect)

3. 游戏逻辑实现

4. 优化功能

学习要点总结

网站公告

今日签到

热门文章

最新发布

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