简单的香草JavaScript游戏

Question

I am trying to make a simple slot machine game as the first one here .

The one in the example above is a bit complex, but I only need mine to add a few classes here and there at simple click events.

Long story short, I have a play button which initiates the slot machine (shows it - this is done), and when the slot machine is shown, a SPIN button appears, and when I click that button, I can only make it add one class for the first combination (eg "bonus") which adds the CSS class and its respective transitions to the desired effect.

And now comes the tricky part for me, I need to click the same SPIN button again, but add a different class this time. This has to work 3 times, while when I am pressing it for the 4-th time, I need it to add another class to the id='ad-cont' div.

How can I achieve this with vanilla JS? I know there must be some sort of a loop here, but I can't figure it out.

<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>

And here is what I've got so far:

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');
});

Thank You all!

Answer 1

There's not enough code to really give a complete answer, but if I understand you right, I think the easiest thing to do would be to add a counter and an array of classes.

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

Then you can add classes as you play:

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++
});

You just need to check that counter never gets higher than the last index of classes

Answer 2

Have you tried using a switch and a count that resets itself?

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!");
    } 
});