How CSS3 Realizes the Color Guessing Game Based on the Gradient Sequence

How CSS3 Realizes the Color Guessing Game Based on the Gradient Sequence: BY Jeffrey13 Nov,2020; Tags:
HTML5 Games

Introduction

Today I will share with you a color discrimination game based on CSS3 and JavaScript. It is known that there are 3 squares in a group. The first 2 squares are painted with two similar colors. You can guess the third one based on the decreasing sequence of these two colors. What is the color of the square, and choose the color that you think is the closest from the squares below to test your color discrimination ability.

How CSS3 Realizes the Color Guessing Game Based on the Gradient Sequence

Instructions

HTML Body Code

<div id="points">
  <span id="guessed">0</span> / <span id="total">0<span>
</div>
<div class="center">
  <h1>Color Sequence Scheme</h1>
  <div class="boxes">
    <div class="color-box" id="box-1"></div>
    <div class="color-box" id="box-2"></div>
    <div class="color-box" id="box-3">
      <div id="correct-color"></div>
      <div id="picked-color"></div>
    </div>
  </div>
  <h2>Which color comes next?</h2>
  <div class="boxes mini">
    <div class="color-box" id="color-0" role="button" data-value="0"></div>
    <div class="color-box" id="color-1" role="button" data-value="1"></div>
    <div class="color-box" id="color-2" role="button" data-value="2"></div>
    <div class="color-box" id="color-3" role="button" data-value="3"></div>
  </div>
</div>

<div id="scrim">
  <div class="center">
    <h2 id="correct">You picked the right&nbsp;color!</h2>
    <h2 id="incorrect">Oh no! That was not the right&nbsp;color!</h2>
    <button>Click here to play again</button>
  </div>
</div>

Css Code

h1, h2 {
  text-align: center;
  color: white;
  font-size: 5vmin;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-family: Pacifico, arial, serif;
  font-weight: normal;
}

h2 {
  font-size: 3.5vmin;
  margin-top: 5vmin;
}

#points {
  font-family: Pacifico, Verdana, sans-serif;
  color: white;
  font-size: 5vmin;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  position: absolute;
  top: 1vmin;
  right: 2vmin;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boxes {
  margin: auto auto;
  text-align: center;
  white-space: nowrap;
}

Js Code

initialize: function() {
    const boxes = document.querySelectorAll(".boxes.mini .color-box");
    for (let x = 0; x < boxes.length; x++) {
      boxes[x].addEventListener("click", function() {
        if (this.dataset.value == game.correct) {
          document.querySelector("#scrim").classList.add("correct");
          this.classList.add("right");
          game.right++;
        } else {
          document.querySelector("#scrim").classList.add("incorrect");
          this.classList.add("wrong");
          document.querySelector(`[data-value='${game.correct}']`).classList.add("right");
        }
        
        game.total++;
        document.querySelector("#total").textContent = game.total;
        document.querySelector("#guessed").textContent = game.right;
        
        document.querySelector("#correct-color").style.backgroundColor = document.querySelector(`[data-value='${game.correct}']`).style.backgroundColor;
    document.querySelector("#picked-color").style.backgroundColor = this.style.backgroundColor;
      });
    }
    
    document.querySelector("#scrim button").addEventListener("click", function() {
      const scrim = document.querySelector("#scrim");
      scrim.classList.remove("correct");
      scrim.classList.remove("incorrect");
      game.generateGame();
    });

    this.generateGame();
  },

VIEW NOW