JavaScript and Frames, Part II: Revealing a Card - www.docjavascript.com

JavaScript and Frames, Part II (6)

Revealing A Card

The revealBox() function is the heart of our script. It coordinates all possible actions with a card: revealing, removing, and covering. Here is its listing:

function revealBox(rowFound, colFound) {
  var newLocation = rowFound * dim1 + colFound;
  tobeRevealedLocation = newLocation;
  tobeRevealedRow = rowFound;
  tobeRevealedCol = colFound;
  revealNow();
  if (nowRevealed == false) {
    nowRevealed = true;
    revealedLocation = newLocation;
    revealedRow = rowFound;
    revealedCol = colFound;
  } 
  else {
    if (newLocation == revealedLocation) return;
    blockClicking = true; 
    if (assignAr[revealedLocation] == assignAr[newLocation]) {
      setTimeout("removeCards()", coverPause);
      bingos++;
      if (nowPlaying == "left") {
        leftBingos++;
      }
      else {
        rightBingos++;
      }
      if (players == 2) top.status = "Left: " + leftBingos + 
                                                "   Right: " + rightBingos;
      if (bingos == halfBoardLength) {
        if (players == 2)
          alert("Congratulations! The " + nowPlaying + " won. Left Player: " + 
                  leftBingos + " Right Player: " + rightBingos);
        else alert("Congratulations. You made it in " + attempts);
        initialize();
      }
    }
    else {
      attempts++;
      if (players == 1) 
        if (attempts == 1) top.status = "You have tried one time"
        else top.status = "You have tried " + attempts + " times";
      setTimeout("coverNow()", coverPause);
    }    
  }
}

The function accepts the row and column position of the clicked box, rowFound and colFound. First, the index into the assignAr array is computed:

  var newLocation = rowFound * dim1 + colFound;

Then, the three positional variables, newLocation, rowFound, colFound, are copied to the tobeRevealed trio, tobeRevealedLocation, tobeRevealedRow, and tobeRevealedCol, respectively. We call the revealNow() function to reveal the card.

We need to check next whether the nowRevealed flag is false, and turn it on if it is, copying the three positional variables to the revealed trio:

 if (nowRevealed == false) {
    nowRevealed = true;
    revealedLocation = newLocation;
    revealedRow = rowFound;
    revealedCol = colFound;
  } 

If the nowRevealed flag is already turned on, it means we have just revealed the second card in an attempted match. We need to act promptly on several fronts. First, we need to check if the player did not click the first card again:

    if (newLocation == revealedLocation) return;

Then we need to block any additional clicks by the players until we complete processing the current card, blockClicking = true. Now that we are protected from any disturbances from the players, we can handle the card. We first verify if we have a match. The first card's location in the assignAr array is revealedLocation, while the second one's is newLocation. We check if they are identical images by comparing the assignAr elements:

if (assignAr[revealedLocation] == assignAr[newLocation])

The script becomes very busy in case a match is found. First, we call the removeCards() function after a delay of coverPause. (After all, we do want the player to see the matched cards before removing them.) Then, we deal with the game counters. The number of bingos is incremented, as well as leftBingos (if nowPlaying = "left") or rightBingos (if nowPlaying = "right"). If there are two players, the new score is sent to top.status. Once a game, there is a chance that the current match is the winning one. If the nubmer of matches is equal to halfBoardLength, we print a message to the players and call the initialize() function to start a new game. Notice how the message is tailored to either one or two players. The two-players message includes the winning side and the number of matches that each player had achieved. The single-player message includes only the number of unsuccessful attempts.

The last section of the revealBox() function deals with the case that there is no match between the two cards. First, we increment the number of attempts. Then, if there is only one player, we update the message at the status bar, top.status, with the correct number of attempts. Finally, we call the coverNow() function after a delay of coverPause milliseconds. (The purpose of the delay is to show the player that the cards are not identical, before covering them back.)

Produced by Yehuda Shiran and Tomer Shiran

Created: April 5, 1999
Revised: April 5, 1999

URL: https://www.webreference.com/js/column37/reveal.html