1

I'm making a very each game for school project, it should works like this: User click spin, 3 cards will display elements If all 3 cards matches, the balance will add $50, and pop up alert "you won!" Otherwise, it will subtract $10 for each spin doesn't match. If the balance fall below $10, pop up alert "you have less than $10.

I'm trying to make the alert pop up after the slots rendered and balance updated, however the alert always pop up ahead. Any idea how to fix it?

let slotsContainer = document.getElementById('slots');
let balanceContainer = document.getElementById("balance-container");
let tries = document.getElementById("tries");

const INITIAL_AMOUNT = 1000;

let values = ['❤', '', ''];
let number_of_spinners = 3;
let spinCount = 0;
let slot_els = [];
let balance = INITIAL_AMOUNT;

balanceContainer.innerHTML = balance;

function render(result) {
  slotsContainer.innerHTML = '';

  for (var i = 0; i < number_of_spinners; i++) {
    let spinner = document.createElement('div');
    spinner.innerHTML = result[i];
    slotsContainer.appendChild(spinner);
    slot_els.push(spinner);
  }
}

render(['?', '?', '?'])

function getOneRandomNumber() {
  return Math.floor(Math.random() * values.length);
}

function spin_func() {
  let firstRandomValue = getOneRandomNumber();
  let secondRandomValue = getOneRandomNumber();
  let thirdRandomValue = getOneRandomNumber();

  render([values[firstRandomValue], values[secondRandomValue], values[thirdRandomValue]]);


  if ((firstRandomValue === secondRandomValue) && (secondRandomValue === thirdRandomValue)) {
    balance += 50;
    balanceContainer.innerHTML = balance;
    alert("you won!");
  } else {
    if (balance >= 10) {
      balance -= 10;
      balanceContainer.innerHTML = balance;
    } else {
      alert("You have less than $10");
    }
  }
  console.log('spin!!!');
}

let spin_button = document.getElementById('spin');
spin_button.onclick = spin_func
Danny Fardy Jhonston Bermúdez
  • 5,500
  • 5
  • 25
  • 37
user3390471
  • 87
  • 1
  • 8

2 Answers2

0

Ok. This is because the JS code runs so fast it spins but you don't see it.

This code

for (var i = 0; i < number_of_spinners; i++) {
    let spinner = document.createElement('div');
    spinner.innerHTML = result[i];
    slotsContainer.appendChild(spinner);
    slot_els.push(spinner);
}

Would need to be slowed down using a delay. The delay would need to be say 1/4 of a second per animation. Then the code would allow you to see it. Afterwhich the alert would fire and it would work as expected.

The problem here now is that you would need to make the code asynchronous.

Otherwise it still will not work.

Here is a Question of SO re a loop with a delay

How do I add a delay in a JavaScript loop?

You need to make this call your alert (finish) code when the loop completes otherwise, it still won't work.

The principle is:

  • run a loop that fires the animation
  • delay the next iteration by the animation speed say 600ms
  • call the alert/end code when the loop completes
MartinWebb
  • 1,998
  • 1
  • 13
  • 15
  • Sorry, I am really really low in javascript, the professor only teaches javascript for 4 classes so far.....And this game is a midterm project, and we were given half of the codes as starting points. It took me a week asking around just to understand what the heck that half given codes are about......And I got like 3 computer science friends' help to finish up those codes so far.....This project is for a graphic design class by the way.....My professor is big on website game creator, so he decided the entire class is about creating website games.....And he doesn't teach a lot.....WTF!!! – user3390471 Nov 11 '17 at 23:35
  • So what I want to say, I get what you're saying, but I really don't have knowledge to just write the code. I went to the link you gave me....I'm like what is this thing, what is that thing......All we learned from class so far is how to create an array, how to access the elements inside array, how to do for loop, how to do alert, prompt, how to do for loop.....and that's it....So for we had 3 projects, all web game, half or even more than half codes were given.....with no explanation at all....We're just supposed to finish the codes with his requirements. – user3390471 Nov 11 '17 at 23:44
  • When we ask him about the given codes, he just said,"Oh, you don't need to understand the given codes at all, you just need to use them, and finish them, and make the program work..." What the HECK!!!! All my friends who actually studying computer science all said,"What???!!! How does he expect you to finish with a function program while you don't even understand the given codes, and he doesn't bother to explain..." Especially I am design major, i've never never exposed to codes before......For a person never touched any codes, this is really difficult.....!!! – user3390471 Nov 11 '17 at 23:49
  • OK.....I suppose I should tell you which codes are given, which is not given........So everything is given, except the spin function.....All I did was just write out the spin function with 3 computer science students help.........Don't laugh at me....ok? Do not laugh at me.....never coded before --> this guy...... – user3390471 Nov 11 '17 at 23:57
0

The DOM is rendered asynchronously so you need to trigger the alert asynchronously.
Try replacing alert("xyz"); with setTimeout(alert, 0, "xyz"); where you are using it.
If you want the player to have time to read the result before triggering the alert, just increase the delay expressed in milliseconds from 0 to 2000 (2 seconds).

Luca Borrione
  • 16,324
  • 8
  • 52
  • 66