javascript - 简单的 Vanilla javascript游戏

Question

我正在尝试制作一个简单的老虎机游戏作为 first one here .

上面的例子有点复杂，但我只需要在简单的点击事件中在这里和那里添加几个类。

长话短说，我有一个启动老虎机的播放按钮(显示它 - 这已完成)，当显示老虎机时，会出现一个 SPIN 按钮，当我单击该按钮时，我只能它为第一个组合添加一个类(例如“bonus”)，该类将 CSS 类及其各自的过渡添加到所需的效果。

现在对我来说是棘手的部分，我需要再次单击相同的 SPIN 按钮，但这次添加不同的类。这必须工作 3 次，而当我第 4 次按下它时，我需要它向 id='ad-cont' div 添加另一个类。

如何使用 vanilla JS 实现这一点？我知道这里一定有某种循环，但我想不通。

<div id="ad-cont">
  <div id="slot-frame"><img class="frame" src="../frame.png">
    <div class="frame-item"></div>
    <div class="frame-item"></div>
    <div class="frame-item"></div>
    <div class="frame-item"></div>
    <div class="frame-item"></div>
  </div><a id="play" href="#">PLAY</a><a id="spin" href="#">SPIN</a>
</div>

这是我到目前为止所得到的:

var adContainer = document.getElementById('ad-cont');
var playBtn = document.getElementById('play');
var spinBtn = document.getElementById('spin');
var slotMachine = document.getElementById('slot-frame');

playBtn.addEventListener('click', function(){
  adContainer.classList.add('playing');
});

spinBtn.addEventListener('click', function(){
  slotMachine.classList.add('bonus');
});

谢谢大家!

Answer 1

您是否尝试过使用 switch以及一个可以自行重置的计数？

var count = 0;
spinBtn.addEventListener('click', function(){
    count++;
    switch(count) {
        case 1:
            slotMachine.classList.add('bonus');
            break;
        case 2:
            slotMachine.classList.add('bonus2');
            break;
        case 3:
            slotMachine.classList.add('bonus3');
            break;
        case 4:
            otherIdElement.classList.add('finished!');
            count = 0;
            break;
        default:
            alert("error!");
    } 
});