簡單的香草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遊戲

回答

相關問題