JS开发石头剪刀布 点击按钮无法触发CSS关键帧动画问题

核心问题点 #

• 选择器语法错误：JS中获取石头按钮的代码写为document.querySelector('rock')，该写法用于匹配标签名为rock的DOM元素，实际按钮是class为rock的button元素，类选择器必须添加.前缀，导致代码根本没有获取到目标按钮，后续所有事件逻辑完全无法执行。
• 事件绑定逻辑嵌套冗余：HTML中已经给石头按钮写了行内onclick="click()"绑定，但JS中定义的click函数内部又给按钮重复添加click事件监听，等于第一次点击按钮时才会执行监听注册操作，第一次点击完全不会触发动画。另外直接用click作为全局函数名，容易和DOM元素原生的click方法产生命名冲突。
• 动画缺少重播逻辑：即使动画正常触发，第一次播放结束后，后续点击按钮时元素的animation属性值没有发生变化，浏览器不会重新执行动画。
• 右拳动画未关联触发：现有代码只编写了左拳的动画赋值逻辑，右拳的摆动动画没有对应的触发代码，不符合猜拳游戏两个拳头同时摆动的交互预期。

修复步骤 #

1. 调整HTML代码 #

删除按钮上冗余的行内点击绑定，统一交给JS处理事件，避免逻辑冲突：

<div class="game-screen-elements">
    <h2 class="choice">Make your choice</h2>
    <div class="fist-container">
        <div class="fist-left"></div>
        <div class="fist-right"></div>
    </div>
    <div class="pick">
        <button class="rock">rock</button>
        <button class="paper">paper</button>
        <button class="scissor">scissors</button>
    </div>
</div>

2. CSS代码说明 #

你写的两个拳头的关键帧动画逻辑没有问题，不需要修改，注意确认assets/rock.png的图片路径正确即可。

3. 重写JS逻辑 #

修正选择器写法，直接绑定点击事件，添加动画重置逻辑保证重复点击可以正常重播，同时补上右拳的动画触发：

// 正确获取DOM元素
const playerHand = document.querySelector('.fist-left');
const computerHand = document.querySelector('.fist-right');
const rockBtn = document.querySelector('.rock');

// 直接绑定点击事件
rockBtn.addEventListener('click', () => {
    // 先清空现有动画
    playerHand.style.animation = 'none';
    computerHand.style.animation = 'none';
    // 强制触发浏览器重排，让清空动画的操作生效
    void playerHand.offsetWidth;
    void computerHand.offsetWidth;
    // 重新赋值动画，实现从头播放效果
    playerHand.style.animation = 'fistLeft 2s ease';
    computerHand.style.animation = 'fistRight 2s ease';
});

代码说明：void element.offsetWidth的作用是强制浏览器计算元素布局，触发重排，解决动画属性重置后不生效的问题，是前端实现动画重播的常用方案。

内容的提问来源于stack exchange，提问作者Laur Laurentiu