Beautiful html5 web effects study notes _Guess what the next color is?

Effect:

  • Given two consecutive colors, the player needs to guess what the next color is
  • Random level
  • Use vw,vh,vmin,vmax for screen adaptive
  • It's hard to play with
  • html+css+javascript, but js is short and easy to get started with: simple
  • Welcome to my blog to see this article: https://clatterrr.com/archive...

Source code:

Learning Notes

Use google font

This paragraph is used to import a font called Pacifico from google.Chinese page in google font: http://www.googlefonts.net/ , select the font you like and get the name, you can refer to it.There are three ways to change the font name:

  1. Use @import on css as above.
  2. As recommended by the google font page, you can embed the appropriate font by adding the following html code to the page <head>tag.
<link href="https://fonts.font.im/css?family=Roboto" rel="stylesheet">
  1. Use @font-face.

Then you can use your favorite font happily.For more information: https://www.ibm.com/developer...

Align element centers to page centers (adaptive)

Sometimes, what if we want an element to be right in the middle of a web page, just like the one below the image above, that is, the center of the element is right in the center of the web page, and we have to actively adjust to the size of the screen?

If we don't set their position, we usually align the top left corner of the element with the top left corner of the page, such as the top left of the image above.

To be unaffected by other elements, let's add a sentence

position: absolute;

Then let it go right in the middle of the page, set top and left, and use percentages instead of px for adaptive purposes.

 top: 50%;
 left: 50%;

Well, now it's like the top right of the above image, where the top left corner of the element aligns right in the middle of the page.But that's not what we want.So add another sentence

transform: translate(-50%, -50%);


Responsively resize elements using vw, vh, vmin, vmax

It is a window unit and a relative unit.It is not relative to the parent node or the root node of the page.Instead, it is determined by the size of the Viewport, in units of 1, which represents 1% of the window.See: https://blog.csdn.net/ZNYSYS5...

css attribute white-space

Sets how white space in an element is handled.See https://developer.mozilla.org...

javascript explanation

Release the note directly into the source code, and the principle of color gradient is simple

const game = {
  color: {
    red: 0,
    green: 0,
    blue: 0
  },
  variation: {
    red: 0,
    green: 0,
    blue: 0
  },
  right: 0,
  total: 0,
  //Color Transform in Error Options
  possibilities: [
    [0, 0, 16], [0, 16, 0], [0, 16, 16], [16, 0, 0], [16, 0, 16], [16, 16, 0], [16, 16, 16],
    [0, 0, -16], [0, -16, 0], [0, -16, -16], [-16, 0, 0], [-16, 0, -16], [-16, -16, 0], [-16, -16, -16],
    [0, 16, -16], [0, -16, 16], [16, 0, -16], [-16, 0, 16], [16, -16, 0], [-16, 16, 0],
    [16, 16, -16], [16, -16, 16], [16, -16, -16], [-16, 16, 16], [-16, 16, -16], [-16, -16, 16]
  ],
  min: 50,
  correct: 0,
  initialize: function () {
    // Get Answer Options Element
    const boxes = document.querySelectorAll(".boxes.mini .color-box");
    for (let x = 0; x < boxes.length; x++) {
      //Add a click event for each option element
      boxes[x].addEventListener("click", function () {
        //If you clicked the correct option, let the results panel add the correct class so that the results panel displays
        //Add right class correctly by clicking, add 1 to correct number
        if (this.dataset.value == game.correct) {
          document.querySelector("#scrim").classList.add("correct");
          this.classList.add("right");
          game.right++;
        } else {
            //If you clicked on the wrong option, let the results panel add the incorrect class so that the results panel displays
            //Click on the wrong option to add the wrong class, and let the correct option add the right class
          document.querySelector("#scrim").classList.add("incorrect");
          this.classList.add("wrong");
          document.querySelector(`[data-value='${game.correct}']`).classList.add("right");
        }
        //Update game information (top right corner of web page)
        game.total++;
        document.querySelector("#total").textContent = game.total;
        document.querySelector("#guessed").textContent = game.right;
        //The result shows that the right color is displayed above the third big square and the color chosen by the player is displayed below.
        document.querySelector("#correct-color").style.backgroundColor = document.querySelector(`[data-value='${game.correct}']`).style.backgroundColor;
        document.querySelector("#picked-color").style.backgroundColor = this.style.backgroundColor;
      });
    }
 
    //Add a click event to the buttons of the results panel and start a new game after clicking
    document.querySelector("#scrim button").addEventListener("click", function () {
      const scrim = document.querySelector("#scrim");
      scrim.classList.remove("correct");
      scrim.classList.remove("incorrect");
      game.generateGame();
    });
    this.generateGame();
  },
  generateGame: function () {
 
    //Remove correct and error classes from options
    var dright = document.querySelector(".right");
    if (dright) dright.classList.remove("right");
    var dwrong = document.querySelector(".wrong");
    if (dwrong) dwrong.classList.remove("wrong");
 
    //The third big square goes back to the unknown
 
    document.querySelector("#correct-color").style.backgroundColor = "rgba(0,0,0,0)";
    document.querySelector("#picked-color").style.backgroundColor = "rgba(0,0,0,0)";
 
    //Generate random colors
    this.color.red = this.min + Math.floor(Math.random() * (255 - this.min * 2));
    this.color.green = this.min + Math.floor(Math.random() * (255 - this.min * 2));
    this.color.blue = this.min + Math.floor(Math.random() * (255 - this.min * 2));
    
    //Generate random color variables
    this.variation.red = Math.floor((Math.random() * this.min) / 2);
    this.variation.green = Math.floor((Math.random() * this.min) / 2);
    this.variation.blue = Math.floor((Math.random() * this.min) / 2);
   //Color the first two big squares
    document.querySelector("#box-1").style.backgroundColor = `rgb(${this.color.red},${this.color.green},${this.color.blue})`;
    document.querySelector("#box-2").style.backgroundColor = `rgb(${this.color.red + this.variation.red},${this.color.green + this.variation.green},${this.color.blue + this.variation.blue})`;
 
    //Randomly choose the right option and color it correctly
    this.correct = Math.floor(Math.random() * 4);
    document.querySelector("#color-" + this.correct).style.backgroundColor = `rgb(${this.color.red + this.variation.red * 2},${this.color.green + this.variation.green * 2},${this.color.blue + this.variation.blue * 2})`;
 
    //Lay the wrong element on the wrong option by adding a random small variable to the second big square color
    for (let x = 0; x < 4; x++) {
      if (x != this.correct) {
        var change = Math.floor(Math.random() * this.possibilities.length);
        document.querySelector("#color-" + x).style.backgroundColor = `rgb(${this.color.red + this.variation.red + this.possibilities[change][0]},${this.color.green + this.variation.green + this.possibilities[change][1]},${this.color.blue + this.variation.blue + this.possibilities[change][2]})`;
      }
    }
  }
}
 
game.initialize()

Other Sources

html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>What's the next color?</title>
 
 
 
  <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
  <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>
 
  <script src="js/index.js"></script>
 
 
 
 
</body>
 
</html>

css

@import url('https://fonts.googleapis.com/css?family=Pacifico');
 
html, body {
  background: #9cf;
  margin: 0;
  padding: 0;
}
 
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;
}
 
.color-box {
  display: inline-block;
  background: red;
  box-sizing: border-box;
  border: 1.25vmin solid white;
  border-radius: 2px;
  width: 20vmin;
  height: 20vmin;
  margin-right: 5vmin;
  box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);
  position: relative;
}
 
.boxes.mini .color-box {
  width: 15vmin;
  height: 15vmin;
  margin-right: 3vmin;
  cursor: pointer;
}
 
.color-box.right {
  border-color: green;
}
 
.color-box.wrong {
  border-color: #e81222;
}
 
#box-3 {
  margin-right: 0;
  background: #ccc;
  overflow: hidden;
}
 
#color-3 {
  margin-right: 0;
}
 
#box-3::before {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Pacifico, Verdana, sans-serif;
  font-size: 6vmin;
  color: rgba(0,0,0,0.5);
}
 
#scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  display: none;
}
 
#scrim.correct,
#scrim.incorrect {
  display: block;
}
 
#scrim > div {
  padding: 3vmin;
  border-radius: 3px;
  background: white;
  box-shadow: 0 0.5rem 1.5rem -0rem rgba(0,0,0,0.25);
}
 
#scrim h2 {
  color: #444;
  margin-top: 0;
  display: none;
}
 
#scrim.correct #correct,
#scrim.incorrect #incorrect {
  display: block;
}
 
#scrim button {
  width: 100%;
  text-align: center;
  font-size: 2vmin;
  padding: 1.5vmin;
  border-radius: 3px;
  border: 0;
  background: #396;
  color: white;
  box-shadow: 0 1rem 0.75rem -0.75rem rgba(0,0,0,0.25);
  cursor: pointer;
}
 
#correct-color,
#picked-color {
  position: absolute;
  width: 100%;
  height: 60%;
  z-index: 2;
}
 
#picked-color {
  top: 50%;
}

Tags: Front-end Google Javascript github Attribute

Posted on Sun, 25 Aug 2019 19:16:40 -0700 by vivekjain