Saturday, September 22, 2018

4.7 State of the Game


Progress on the NIM game has gone well and we have the core components of the game implemented (see the earlier sections previously posted). While we now have the core game mechanics implemented, we do not have a game. Right now we just have the ability for the player to take gems unitl there are no more gems. To have a proper game we need to be able to alternate between two players (the human and the computer). We also want the user interface to not accept input while the game is animating or the computer is playing. For this we will need to know what the movie is doing at any point of time. The easiest way of tracking this is to have a gamestate variable that holds the current state of the game with constants defined for the four states that we are concerned with.



// explain the different states of the game
var GAMESTATE_PLAYER_PLAYING = 1;
var GAMESTATE_PLAYER_ANIMATING = 2;
var GAMESTATE_COMPUTER_PLAYING = 3;
var GAMESTATE_COMPUTER_ANIMATING = 4;
var gamestate = GAMESTATE_PLAYER_PLAYING;
This means that we can now update the button handling routines to make sure that it is the player’s turn before doing anything with the button click. The new code is bolded.



function handleOneButton(e) {
   if (gamestate != GAMESTATE_PLAYER_PLAYING)
          return;
   --gemsRemaining;
   gamestate = GAMESTATE_PLAYER_ANIMATING;
   gameMovie.play();
}
function handleTwoButton(e) {
   if (gamestate != GAMESTATE_PLAYER_PLAYING)
          return;
   gemsRemaining -= 2;
   gamestate = GAMESTATE_PLAYER_ANIMATING;
   gameMovie.play();
}
function handleThreeButton(e) {
   if (gamestate != GAMESTATE_PLAYER_PLAYING)
          return;
   gemsRemaining -= 3;
   gamestate = GAMESTATE_PLAYER_ANIMATING;
   gameMovie.play();
}
The gem removal routine can also be fixed up to nearly it’s final form by having it start the computer’s turn after the player’s turn has finished being animated and returning to the control to the player once the computer has finished it’s turn.



function gemRemoved(gemCount) {
   if (gemCount <= gemsRemaining) {
          gameMovie.stop();
          if (gamestate == GAMESTATE_PLAYER_ANIMATING)
                 computerTurn();
          else {
                 gamestate = GAMESTATE_PLAYER_PLAYING;
          }
   }
}



Of course, for there to be a computer player, the computer needs to know how to play the game. It is quite possible to have the computer play the game perfectly, but that is not much fun for the player so instead the computer will play randomly until near the end of the game where they will take the opportunity to win the game if it presents itself.



function computerTurn() {
   if (gemsRemaining <= 3) {
          gemsRemaining = 0;
          setMessage("Computer taking " + gemsRemaining);
   } else {
          var numToPick = Math.floor(Math.random() * 3) + 1;
          setMessage("Computer taking " + numToPick);
          gemsRemaining -= numToPick;
   }



Random number are technically not random, but are pseudo-random but the details is not important. What had to be understood is that the Math.random() function returns a number between 0 and up to but not including 1 so that number needs to be adjusted to a usable value. Multiplying by three gives us a random number between 0 and just under 3. We want a decimal number so we use the Math.floor function to round the number down giving us a number between 0 and 2. Add one to this and we have the number in the desired range.



This leaves us with one final issue, which is winning or losing the game. This will be covered next fortnight!

No comments: