摘要：如字體頁(yè)面推薦的那樣，把下面這段代碼在添加到頁(yè)面標(biāo)簽內(nèi)，即可嵌入相應(yīng)的字體。但這還不是我們要的效果。它相對(duì)的不是父節(jié)點(diǎn)或者頁(yè)面的根節(jié)點(diǎn)。而是由視窗大小來(lái)決定的，單位，代表視窗的。具體請(qǐng)看屬性用來(lái)設(shè)置如何處理元素中的空白。

根據(jù)給出的兩個(gè)連續(xù)顏色，玩家需要猜出下一個(gè)是什么顏色

隨機(jī)關(guān)卡

使用vw,vh,vmin,vmax來(lái)屏幕自適應(yīng)

很難玩

html+css+javascript，但js很短并不難，上手難度：簡(jiǎn)單

歡迎來(lái)我的博客看此文章： https://clatterrr.com/archive...

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

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

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

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

如google字體頁(yè)面推薦的那樣，把下面這段代碼在html添加到頁(yè)面 標(biāo)簽內(nèi)，即可嵌入相應(yīng)的字體。

使用@font-face。

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

有時(shí)候，我們想元素的恰好在網(wǎng)頁(yè)中間，像上圖下方那樣，即元素正中心恰好就網(wǎng)頁(yè)正中心，并且還要主動(dòng)適應(yīng)屏幕大小，怎么辦？

如果我們不設(shè)置它們的位置，一般是元素左上角和網(wǎng)頁(yè)的左上角對(duì)齊，如上圖左上。

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

position: absolute;

然后要它到網(wǎng)頁(yè)正中間，設(shè)置top和left，為了自適應(yīng)，不使用px而使用百分比。

 top: 50%;
 left: 50%;

嗯，現(xiàn)在就變成上圖右上那樣，元素左上角對(duì)齊網(wǎng)頁(yè)正中間了。但這還不是我們要的效果。于是再加一句

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

是一種視窗單位，也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁(yè)面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來(lái)決定的，單位 1，代表視窗的 1%。具體請(qǐng)看：https://blog.csdn.net/ZNYSYS5...

用來(lái)設(shè)置如何處理元素中的 空白。具體請(qǐng)看https://developer.mozilla.org...

直接把注釋放源碼中了，顏色漸變?cè)硪埠芎?jiǎn)單

const game = {
  color: {
    red: 0,
    green: 0,
    blue: 0
  },
  variation: {
    red: 0,
    green: 0,
    blue: 0
  },
  right: 0,
  total: 0,
  //錯(cuò)誤選項(xiàng)中的顏色變換
  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 () {
    // 獲取答案選項(xiàng)元素
    const boxes = document.querySelectorAll(".boxes.mini .color-box");
    for (let x = 0; x < boxes.length; x++) {
      //為每個(gè)選項(xiàng)元素添加點(diǎn)擊事件
      boxes[x].addEventListener("click", function () {
        //如果點(diǎn)擊的是正確的選項(xiàng)，那么就讓結(jié)果面板添加correct類，以便讓結(jié)果面板顯示出來(lái)
        //點(diǎn)擊的正確添加right類，給正確數(shù)量加上1
        if (this.dataset.value == game.correct) {
          document.querySelector("#scrim").classList.add("correct");
          this.classList.add("right");
          game.right++;
        } else {
            //如果點(diǎn)擊的是錯(cuò)誤的選項(xiàng)，那么就讓結(jié)果面板添加incorrect類，以便讓結(jié)果面板顯示出來(lái)
            //點(diǎn)擊的錯(cuò)誤的選項(xiàng)添加wrong類，再讓正確的選項(xiàng)添加上right類
          document.querySelector("#scrim").classList.add("incorrect");
          this.classList.add("wrong");
          document.querySelector(`[data-value="${game.correct}"]`).classList.add("right");
        }
        //更新游戲信息（網(wǎng)頁(yè)右上角）
        game.total++;
        document.querySelector("#total").textContent = game.total;
        document.querySelector("#guessed").textContent = game.right;
        //最終結(jié)果顯示，讓第三個(gè)大正方形上方顯示正確的顏色，下方顯示玩家選擇的顏色
        document.querySelector("#correct-color").style.backgroundColor = document.querySelector(`[data-value="${game.correct}"]`).style.backgroundColor;
        document.querySelector("#picked-color").style.backgroundColor = this.style.backgroundColor;
      });
    }
 
    //為結(jié)果面板的按鈕添加點(diǎn)擊事件，點(diǎn)擊后開(kāi)始新游戲
    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 () {
 
    //移除選項(xiàng)中的正確和錯(cuò)誤類
    var dright = document.querySelector(".right");
    if (dright) dright.classList.remove("right");
    var dwrong = document.querySelector(".wrong");
    if (dwrong) dwrong.classList.remove("wrong");
 
    //第三個(gè)大正方形重新回歸未知狀態(tài)
 
    document.querySelector("#correct-color").style.backgroundColor = "rgba(0,0,0,0)";
    document.querySelector("#picked-color").style.backgroundColor = "rgba(0,0,0,0)";
 
    //產(chǎn)生隨機(jī)顏色
    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));
    
    //產(chǎn)生隨機(jī)顏色變量
    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);
   //給前兩個(gè)大正方形涂上顏色
    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})`;
 
    //隨機(jī)選擇正確的選項(xiàng)，并為它涂上正確的顏色
    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})`;
 
    //讓其它錯(cuò)誤的選項(xiàng)涂上錯(cuò)誤的元素，具體辦法是第二個(gè)大正方的顏色加上一個(gè)隨機(jī)小變量
    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%;
}