Question

I’m building a javascript+css game that shows 3 heart icons representing the 3 attempts the game allows the user to have.

I have 3 types of hearts:

a normal one representing a not used attempt

a highlighted one representing a successful attempt

a crossed one representing a failed attempt

Also I have a variable called “result” that stores 0 (attempt failed) or 1 (attempt successful)

Could you please help me with representing the 3 attempts logic? Meaning changing the heart icons on the screen depending on the user actions.
I’ve started by showing the 3 normal hearts that have to show on game start but I don’t know how to follow, I’m stuck!

The combinations can be (being O a normal heart, V a successful attempt heart and X a failed one):

OOO

XOO

VOO

XXO

VXO

XVO

VVO

XXV

XVX

VXV

VXX

VVX

XVV

XXX

VVV

Thanks a million

Answer 1

So at any point, you can represent the state of the hearts using 3 numbers, where each number can be a 1,2 or 3. Lets say 1 represents a normal heart, 2 represents a highlighted heart, and 3 represents a crossed heart.

So you can store the state of the hearts as an integer. At the start of the game, all of the hearts are normal hearts, so:

var state = new Array();
state[0] = 1
state[1] = 1
state[2] = 1

Now, just keep track of which attempt the user is on using another variable, say attemptNumber. So, at the start of the game, attemptNumber=1. After the user has finished that attempt, just set state[attemptNumber] equal to 2 if the attempt was successful, or 3 if it failed, and then increment attemptNumber by 1. Now, the user only gets 3 attempts, and after the third attempt, attemptNumber is equal to 4. So just put the whole game in a while loop like while (attemptNumber < 4) (play the game).

As for the CSS, change the icon for each heart depending on the value of state.