HTML+CSS+JS石头剪刀布游戏获胜方阴影显示异常求助

根因 #

1. 使用classList.toggle()添加获胜阴影类：toggle方法会切换元素的类状态，上一局添加的阴影类没有清除的情况下，下一局调用toggle会变成移除类，导致阴影显示逻辑混乱
2. 每局游戏开始前没有清空上一局残留的big_hover类，多轮游戏后会出现阴影错加、双方同时显示阴影的问题

修复方案 #

修改condition函数逻辑：每次判定胜负前先清空双方的阴影类，确定获胜方后用add方法直接添加阴影类，不要用toggle。

修改后的JS代码片段： #

function condition(user_choice){
    document.getElementById('inside_main').style.display='none'
    document.getElementById('results').style.display='grid'
    // 新增：每次开局先清空双方残留的阴影类
    document.getElementById('user').classList.remove('big_hover');
    document.getElementById('computer').classList.remove('big_hover');
    
    let res = 0
    let computer_choice = Math.floor(Math.random() * 3) + 1;
    // 原有胜负判定逻辑不变
    if(user_choice==1 && computer_choice==3){
        console.log('you win')
        score = score+1
        res = 1
    }else if(user_choice==2 && computer_choice==1){
        console.log('you win')
        score = score+1
        res = 1
    }else if(user_choice==3 && computer_choice==2){
        console.log('you win')
        score = score+1
        res = 1
    }else if(user_choice==computer_choice){
        console.log('draw')
        res = -1
    }else{
        console.log('you lose')
        score = score-1
        res = 0
    }
    
    document.getElementById('user_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+user_choice+'.svg'
    document.getElementById('computer_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+computer_choice+'.svg'
    document.getElementById('score_value').innerHTML=score
    if (res==0){
        document.getElementById('result_value').innerHTML='YOU LOSE'
        // 把toggle改成add
        document.getElementById('computer').classList.add("big_hover")
    }else if(res == -1){
        document.getElementById('result_value').innerHTML='DRAW'
    }else{
        document.getElementById('result_value').innerHTML='YOU WON'
        // 把toggle改成add
        document.getElementById('user').classList.add("big_hover")
    }
}

可选优化（非必须） #

现有CSS中#user和#computer的背景色是固定的，和用户/电脑实际选择的选项不匹配，可在上述代码中新增动态设置背景的逻辑，根据选择的1/2/3对应设置石头、剪刀、布的渐变背景。

内容的提问来源于stack exchange，提问作者Samyak jain