摘要：如字體頁面推薦的那樣，把下面這段代碼在添加到頁面標簽內，即可嵌入相應的字體。但這還不是我們要的效果。它相對的不是父節點或者頁面的根節點。而是由視窗大小來決定的，單位，代表視窗的。具體請看屬性用來設置如何處理元素中的空白。

根據給出的兩個連續顏色，玩家需要猜出下一個是什么顏色

隨機關卡

使用vw,vh,vmin,vmax來屏幕自適應

很難玩

html+css+javascript，但js很短并不難，上手難度：簡單

歡迎來我的博客看此文章： https://clatterrr.com/archive...

演示地址：https://clatterrr.github.io/c...

源碼文件：https://github.com/clatterrr/...

這段用來導入google一種名叫Pacifico的字體。google字體中文頁面：http://www.googlefonts.net/，選擇喜歡的字體并取得名字，即可引用。一共三種方式，注意字體名字自己改：

像上面這樣在css使用@import。

如google字體頁面推薦的那樣，把下面這段代碼在html添加到頁面 標簽內，即可嵌入相應的字體。

使用@font-face。

然后就可以高興地使用喜歡的字體了。詳細請看：https://www.ibm.com/developer...

有時候，我們想元素的恰好在網頁中間，像上圖下方那樣，即元素正中心恰好就網頁正中心，并且還要主動適應屏幕大小，怎么辦？

如果我們不設置它們的位置，一般是元素左上角和網頁的左上角對齊，如上圖左上。

為了不被其它元素影響到，我們加一句

position: absolute;

然后要它到網頁正中間，設置top和left，為了自適應，不使用px而使用百分比。

 top: 50%;
 left: 50%;

嗯，現在就變成上圖右上那樣，元素左上角對齊網頁正中間了。但這還不是我們要的效果。于是再加一句

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

是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表視窗的 1%。具體請看：https://blog.csdn.net/ZNYSYS5...

用來設置如何處理元素中的 空白。具體請看https://developer.mozilla.org...

直接把注釋放源碼中了，顏色漸變原理也很簡單

const game = {
  color: {
    red: 0,
    green: 0,
    blue: 0
  },
  variation: {
    red: 0,
    green: 0,
    blue: 0
  },
  right: 0,
  total: 0,
  //錯誤選項中的顏色變換
  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 () {
    // 獲取答案選項元素
    const boxes = document.querySelectorAll(".boxes.mini .color-box");
    for (let x = 0; x < boxes.length; x++) {
      //為每個選項元素添加點擊事件
      boxes[x].addEventListener("click", function () {
        //如果點擊的是正確的選項，那么就讓結果面板添加correct類，以便讓結果面板顯示出來
        //點擊的正確添加right類，給正確數量加上1
        if (this.dataset.value == game.correct) {
          document.querySelector("#scrim").classList.add("correct");
          this.classList.add("right");
          game.right++;
        } else {
            //如果點擊的是錯誤的選項，那么就讓結果面板添加incorrect類，以便讓結果面板顯示出來
            //點擊的錯誤的選項添加wrong類，再讓正確的選項添加上right類
          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();
  },
  generateGame: function () {
 
    //移除選項中的正確和錯誤類
    var dright = document.querySelector(".right");
    if (dright) dright.classList.remove("right");
    var dwrong = document.querySelector(".wrong");
    if (dwrong) dwrong.classList.remove("wrong");
 
    //第三個大正方形重新回歸未知狀態
 
    document.querySelector("#correct-color").style.backgroundColor = "rgba(0,0,0,0)";
    document.querySelector("#picked-color").style.backgroundColor = "rgba(0,0,0,0)";
 
    //產生隨機顏色
    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));
    
    //產生隨機顏色變量
    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);
   //給前兩個大正方形涂上顏色
    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})`;
 
    //隨機選擇正確的選項，并為它涂上正確的顏色
    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})`;
 
    //讓其它錯誤的選項涂上錯誤的元素，具體辦法是第二個大正方的顏色加上一個隨機小變量
    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()

html

 

  
  
 
 
 
  
 
 

 

 
  

    0 / 0
  
  
  
  

    
Color Sequence Scheme
    

      

      

      

        

        

      
    
   
   
    
Which color comes next?
    

      

      

      

      

    
  
 
  

    

      
You picked the right color!
      
Oh no! That was not the right color!
      Click here to play again
    
  
 
  
 
 
 
 

 

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%;
}