在JS中使用单击功能触发键帧

Question

因此，我正在尝试使用HTML，CSS和JS使用UI创建一个岩石剪刀游戏应该开始在屏幕上移动，但就我而言，它无能为力。

HTML：

<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" onclick="click()">rock</button>
                <button class="paper">paper</button>
                <button class="scissor">scissors</button>
            </div>
        </div>
    </div>

CSS：

.fist-container{
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.fist-right, .fist-left{
    background-image: url(assets/rock.png);
    width: 300px;
    height: 300px;
    background-size: cover;
    
}

.fist-left{
    transform: rotateY(180deg);
}


@keyframes fistLeft {
    0% {
      transform: rotateY(180deg) translateY(0px);
    }
    15% {
      transform: rotateY(180deg) translateY(-50px);
    }
   /*25% {
      transform: rotateY(180deg) translateY(0px);
    } */
    35% {
      transform: rotateY(180deg) translateY(-50px);
    }
    50% {
      transform: rotateY(180deg) translateY(0px);
    }
    65% {
      transform: rotateY(180deg) translateY(-50px);
    }
    75% {
      transform: rotateY(180deg) translateY(0px);
    }
    85% {
      transform: rotateY(180deg) translateY(-50px);
    }
    100% {
      transform: rotateY(180deg) translateY(0px);
    }
  }
  
  @keyframes fistRight {
    0% {
      transform: translateY(0px);
    }
    15% {
      transform: translateY(-50px);
    }
    /*25% {
      transform: translateY(0px);
    } */
    35% {
      transform: translateY(-50px);
    }
    50% {
      transform: translateY(0px);
    }
    65% {
      transform: translateY(-50px);
    }
    75% {
      transform: translateY(0px);
    }
    85% {
      transform: translateY(-50px);
    }
    100% {
      transform: translateY(0px);
    }
  }

JS：

const playerHand = document.querySelector('.fist-left');
const rockChoice = document.querySelector('rock');
click = function(){
    rockChoice.addEventListener('click', function(){
        playerHand.style.animation = 'fistLeft 2s ease';
    });
};

  

Answer 1

这是您的工作JavaScript代码：

const playerHand = document.querySelector('.fist-left');
const rockChoice = document.querySelector('.rock');

rockChoice.addEventListener('click', click);
        

function click(){
    playerHand.style.animation = 'fistLeft 2s ease';
}

说明：您的单击函数所做的只是注册事件列表，而不一定要执行动画代码，因此未触发事件。分离的单击函数现在实际运行了负责动画的代码，因为它已通过 .Rock 类在您元素上的任何单击事件进行注册。还要确保将JS代码放在车身标签的底部（内部关闭标签），如果您将其用作外部脚本。