简单的香草JavaScript游戏

我想做一个简单的老虎机游戏作为first one here。简单的香草JavaScript游戏

上面的例子有点复杂，但我只需要我在这里和那里简单的点击事件添加几个类。我有一个播放按钮，它启动老虎机（显示它 - 这是完成），当显示老虎机时，出现一个SPIN按钮，当我点击那个按钮时，我只能使其为第一个组合添加一个类（例如“奖励”），该类将CSS类及其相应的转换添加到期望的效果。

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

我怎样才能用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'); 
});

谢谢大家！

来源

2017-09-12 snkv

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

来源

2017-09-12 03:40:12 damanptyltd

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

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

来源

2017-09-12 03:38:36

简单的香草JavaScript游戏

回答

相关问题