Question

我正在努力制作一个简单的老虎机游戏 first one here 。

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

长话短说，我有一个启动老虎机的播放按钮（显示它 - 已完成），当显示老虎机时，会出现一个旋转按钮，当我点击该按钮时，我只能制作它为第一个组合添加一个类（例如＆＃34;奖励＆＃34;），它将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

没有足够的代码来真正给出完整的答案，但如果我理解你的话，我认为最简单的方法就是添加一个计数器和一组类。

var counter = 0;
var classes = ['playing', 'playing_again', 'another_class', 'bonus']

然后你可以在玩游戏时添加课程：

playBtn.addEventListener('click', function(){
  adContainer.classList.add(classes[counter]);
  // if you need to do other things here you
  // can check the counter value and proceed accordingly
  counter++
});

您只需检查counter是否永远不会超过classes的最后一个索引

Answer 2

您是否尝试使用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!");
    } 
});

简单的香草javascript游戏

2 个答案: