Restart game to initial parameters

JavaScript
1

I coded a small game with plain JavaScript where the player has to guess which icon has been randomly selected by clicking on it.

I got the basic logic working, but I have trouble restarting a new game automatically with a new randomly selected icon once the player has guessed right.

I have a setTimeout() function going to reset the initial conditions, but I cannot correctly trigger a new random value.

let iconList = ["1", "2", "3", "4"];
let value = iconList[Math.floor(Math.random() * iconList.length)];

function resetGame() {
  setTimeout(() => {
    document.getElementById("mainImage").src="https://cdn.mos.cms.futurecdn.net/g8PyY6xAhcndpQLLSkdPf-970-80.jpg.webp";
    }, 5000);
};
 
  function impress(clicked_id) {
      if(clicked_id === value){
        document.getElementById("mainImage").src="https://critterfacts.com/wp-content/uploads/2018/11/Capybara-face.jpg";
        resetGame();
    };
  };

CodenPen project

2

idk that’s wierd why you were getting -1 on the random value,
from MDN ’ The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1)’

This should work

const iconList = ["1", "2", "3", "4"];
const len = iconList.length - 1
const value = iconList[Math.ceil(Math.random() * len )];
3

Thanks, I will look into that :+1:

Regarding the main question, I need to figure out what is the right pattern to reset the whole thing when the round ends.

4

One of the very first things you do is set a value for value, but then I’m not seeing anywhere else in your code where you assign a new value to value. So value remains the same throughout the entire game.

You already have a function called resetGame. The name of this function implies that you should do things to reset the game so it is ready to go for the next round of guessing. Don’t you think choosing a new value for value would be a good idea :slight_smile:

5

Assign a new random value to value inside the resetGame function. I would suggest creating a function that returns the random value (just to avoid repeating code).

Not really sure what the point of the iconList array is?

You are generating a number between 0 and 4 (excluding 4) your HTML elements have the values “1” through “4” as a string on the id attribute which is passed to the handler. All you need to do is generate a number between 1 and 4 and compare it to the id value that was passed.

You have already hardcoded the number “range” by way of the elements in the HTML, so you can’t really undo that in the JS. You are in effect shifting the values up by one, i.e. a random number of 0 is the string “1”, so why not just generate a random number between 1 and 4 instead?

Spoiler 
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
}

let value = getRandomIntInclusive(1, 4);

function resetGame() {
  setTimeout(() => {
    document.getElementById("mainImage").src =
      "https://cdn.mos.cms.futurecdn.net/g8PyY6xAhcndpQLLSkdPf-970-80.jpg.webp";
    value = getRandomIntInclusive(1, 4);
  }, 5000);
}

function impress(clicked_id) {
  if (clicked_id === String(value)) {
    document.getElementById("mainImage").src =
      "https://critterfacts.com/wp-content/uploads/2018/11/Capybara-face.jpg";
    console.log(
      `Clicked was: ${clicked_id}, Random value is ${value}, Capybara is impressed!`
    );
    resetGame();
  }
}
6

Yes, I tried various iterations of that in the resetGame() without success, so I removed it to clean up the code I posted. I will keep exploring that :+1:

7

Thanks, it looks like I looked up an incorrect resource for generating the random element, and I must not understand it correctly, so I’ll look at the MDN official documentation again.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.