Coding Challenge – Build Shut the Box playable game.

April 8, 2020 admin Coding Challenge, interview coding questions, Javascript 0

Question: build a dice game called Shut the Box.

Reference: http://en.wikipedia.org/wiki/Shut_the_Box

The object of the game:

Flip over as many cards to match dice totals as possible. On each round, you roll two dice, then flip over available cards that add up to the total of the dice.

For example, you roll a 4 and a 5 for a total of 9. You could flip over cards with values 1,2,6 or 4,5, or 9.

Once you’ve made your selections, end the round. Once you’ve flipped over all the cards or are unable to flip over any more cards to match dice totals, the game is over.

Required to be playable:

•  Dice update numbers on roll

•  One dice roll per turn (i.e., on a new turn, player can’t keep re-rolling dice till the total is in their favor, then flip cards)

• Cards are flippable

• Math is checked when a player flips cards and ends each turn

• Determine whether the player wins or loses when the game is over

To solve this problem, we can access the steps we need to consider!

  • Create the HTML for display Cards 1 to 9 so we can access it through DOM.
  • Create the HTML for two dice.
  • Add CSS to make it more look like cards and dice.
  • Add JS to add listener for click events for dice and cards.
  • Use Math.random() function to generate random number on Dice between 1 to 6.
  • Use DOM access to get the total number from card flips.
  • Match Both numbers if it is equal display great job popup, if it is greater exit the game and if it is less allow more flips.

Now Here is the working Solution!

HTML Code:

<!-- Main Starts-->
<div class="main">
      <h1>Dice Game - Play Shut the Door Game Here</h1>
      <!--Flip Cards starts-->
      <div class="flip-cards" id="flip-cards">
        <div class="card">
          <span>9</span>
          <select id="flip-9" data-role="flipcard">
            <option value="off">9</option>
            <option value="on">9</option>
          </select>
        </div>
        <div class="card">
          <span>8</span>
          <select id="flip-8" data-role="flipcard">
            <option value="off">8</option>
            <option value="on">8</option>
          </select>
        </div>
        <div class="card">
          <span>7</span>
          <select id="flip-7" data-role="flipcard">
            <option value="off">7</option>
            <option value="on">7</option>
          </select>
        </div>
        <div class="card">
          <span>6</span>
          <select id="flip-6" data-role="flipcard">
            <option value="off">6</option>
            <option value="on">6</option>
          </select>
        </div>
        <div class="card">
          <span>5</span>
          <select id="flip-5" data-role="flipcard">
            <option value="off">5</option>
            <option value="on">5</option>
          </select>
        </div>
        <div class="card">
          <span>4</span>
          <select id="flip-4" data-role="flipcard">
            <option value="off">4</option>
            <option value="on">4</option>
          </select>
        </div>
        <div class="card">
          <span>3</span>
          <select id="flip-3" data-role="flipcard">
            <option value="off">3</option>
            <option value="on">3</option>
          </select>
        </div>
        <div class="card">
          <span>2</span>
          <select id="flip-2" data-role="flipcard">
            <option value="off">2</option>
            <option value="on">2</option>
          </select>
        </div>
        <div class="card">
          <span>1</span>
          <select id="flip-1" data-role="flipcard">
            <option value="off">1</option>
            <option value="on">1</option>
          </select>
        </div>
      </div>
      <!-- flips Crads Ends-->
      <!-- Dice Starts-->
      <div class="dice">
        <span id="dice-one" class="one"></span>
        <span id="dice-two" class="four"></span>
      </div>
  <!--Dice Ends-->
    </div>
<!-- main Ends-->

CSS Code:

.main {
  margin-top: 0px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;    
  
  h1 {
    text-align: center;
    margin-top: 10px;
  }
  
  .flip-cards, .dice {
    margin: 25px 0;
   }
  
  .flip-cards {
    
    .card {
      background-color: #fdf9f9;
      border: 1px solid #000;
      color: #000;
      text-shadow: 0 1px 0 #000;
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
      width: 3.575em;
      height: 4.875em;
      margin: 0.8em 0.5em;
      overflow: hidden;
      border-radius: 0.3125em;
      cursor: pointer;
      
      &.active {
        background-color: #22aadd;
        border-color: #22aadd;
      }
    
      span {
        position: relative;
        top: 35%;
      }
      
      select {
        position: absolute;
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        opacity: 0;
      }
    }
  }
  
  .dice {
    span {
    cursor: pointer;
    display: inline-block;
    margin: 10px;
    border: solid 10px #ffa07a;
    border-radius: 10px;
    background-color: #ffa07a;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%),
          radial-gradient(black 65%, transparent 70%);
      background-size: 30% 30%;
      background-repeat: no-repeat;
        /**
          * Vendor Specific Styles
        */
      -webkit-transition-property: background-position;
      -moz-transition-property: background-position;
      -ms-transition-property: background-position;
      -o-transition-property: background-position;
      transition-property: background-position;
      transition-duration: calc(var(--turnsduration) * 0.4);
      transition-timing-function: ease-in-out;
   }
   
  .one {
    background-position: center center;
   }
  
   .two {
      background-position: left top, right bottom;
      }
  
   .three {
      background-position: left top, center center, right bottom;
      }
  
      .four {
        background-position: left top, right top, left bottom, right bottom;
      }
  
      .five {
        background-position: left top, right top, center center, left bottom,
          right bottom;
      }
  
      .six {
        background-position: left top, right top, left center, right center,
          left bottom, right bottom;
      }
  }
}

JS Code:

/**
* @file - This File Preprocess function for Dice Game.
*/

'use strict';

let flips = new Array();
 const mapDice = {
        1: "one",
        2: "two",
        3: "three",
        4: "four",
        5: "five",
        6: "six"
      };
      let flipCard = 0;
      let total = 0;

      const showResult = () => {
        $(".dice #dice-one").css("display", "inline-block");
        $(".dice #dice-two").css("display", "inline-block");
      };

      const flipCards = () => {
        $("#flip-cards .card").click(e => {
          let $this = $(e.currentTarget);
          let currentFlip = parseInt($this.find("span").html());
          if ($this.hasClass("active")) {
            flipCard -= currentFlip;
            $this.toggleClass("active");
          } else {
            flipCard += currentFlip;
            if (flipCard > total) {
              flipCard -= currentFlip;
              alert("Wrong Flip");
              throw new Error("Wrong Flip");
            } else {
              $this.toggleClass("active");
              if (flipCard === total) {
                alert("Great Job!");
              }
            }
          }
        });
      };

      const rollDice = () => {
        $(".dice #dice-one").css("display", "none");
        $(".dice #dice-two").css("display", "none");
        let diceonevalue = Math.floor(Math.random() * 6) + 1;
        let dicetwovalue = Math.floor(Math.random() * 6) + 1;
        $(".dice #dice-one")
          .removeClass()
          .addClass(mapDice[diceonevalue]);
        $(".dice #dice-two")
          .removeClass()
          .addClass(mapDice[dicetwovalue]);
        flipCard = 0;
        total = diceonevalue + dicetwovalue;
        setTimeout(showResult, 300);
      };
      
      /**
      * @program - init function
      * Calculates the dice numners and check with flip cards
      */

      const startGame = () => {
        for (let i = 0; i < 9; ++i) {
          flips[flips.length] = $("#flips-" + (i + 1));
        }
        $(".dice #dice-one").click(rollDice);
        $(".dice #dice-two").click(rollDice);
      };
      /**
      *  @program - DOM ready Events
      */
      $(document).ready(function() {
        startGame();
        flipCards();
      });