JavaScript 練習 - 顏色猜測遊戲

Demo

Demo

JavaScript 練習 - 顏色猜測遊戲 - Demo

Introduction 介紹

這個小遊戲的練習目的主要是熟悉基礎的 JavaScript 方法

• for-loops
• if-else 條件判斷
• Math.random() 取得隨機數值
• Math.floor() 取得整數
• RGB 顏色模型

基本 HTML 結構

基本的 HTML 結構如下

• 顯示一個要比對的色碼
• 重置鍵
• 模式切換鍵 （難/易）
• 訊息區塊
• 隨機生成六組顏色方塊

<h1>The Great <br><span id="colorDisplay">RGB</span><br> Color Game</h1>
  <div id="stripe">
      <button id="reset">New Colors</button>
      <span id="message"></span>
      <button id="easyBtn" class="mode">Easy</button>
      <button id="hardBtn" class="mode selected">Hard</button>
  </div>
  <div id="container">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>

基礎功能

隨機生成顏色

綁定六個顏色方塊，背景色是從隨機產生的顏色陣列中獲得

var squares = document.querySelectorAll(".square");

for (var i = 0; i < squares.length; i++) {
  squares[i].style.backgroundColor = colors[i];
}

陣列的顏色數目是 6 個，用一個產生隨機色的getRandomColors(num)函式返回一個陣列。

var numSquares = 6;
var colors = getRandomColors(numSquares);

function getRandomColors(num) {
  var arr = [];
  for (var i = 0; i < num; i++) {
    arr.push(randomColor());
  }
  return arr;
}

運用 Math.random()、Math.floor()，取得 r、g、b 的隨機值

function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + ", " + g + ", " + b + ")";
}

產生要比對的色碼

根據從隨機數字取得的索引值，畫面上方顯示一個從上個步驟的陣列裡(1,2,3…6)挑選出的色碼，

var pickedColor = pickColor();
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
function pickColor() {
  var random = Math.floor(Math.random() * colors.length);
  return colors[random];
}

比對顏色

如果點選的區塊顏色，等於上面的色碼，所有區塊都會變成點選的顏色；否則，讓點選的區塊隱藏

for (var i = 0; i < squares.length; i++) {
  squares[i].addEventListener("click", function () {
    var clickedColor = this.style.backgroundColor;
    if (clickedColor === pickedColor) {
      changeColor(clickedColor);
    } else {
      this.style.backgroundColor = "#232323";
    }
  });
}

function changeColor(color) {
  for (var i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = color;
  }
}

調整難易度

調整難易度的邏輯其實跟第一個步驟大部分雷同，唯一的差別只是產生的陣列長度不同。

easyBtn.addEventListener("click", function () {
  easyBtn.classList.add("selected");
  hardBtn.classList.remove("selected");
  numSquares = 3;
  colors = getRandomColors(numSquares);
  pickedColor = pickColor();
  colorDisplay.textContent = pickedColor;
  for (var i = 0; i < squares.length; i++) {
    if (colors[i]) {
      squares[i].style.backgroundColor = colors[i];
    } else {
      squares[i].style.display = "none";
    }
  }
});

hardBtn.addEventListener("click", function () {
  easyBtn.classList.remove("selected");
  hardBtn.classList.add("selected");
  numSquares = 6;
  colors = getRandomColors(numSquares);
  pickedColor = pickColor();
  colorDisplay.textContent = pickedColor;
  for (var i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = colors[i];

    squares[i].style.display = "block";
  }
});

重新設定

恢復初始值

resetBtn.addEventListener("click", function () {
    colors = getRandomColors(numSquares);
    pickedColor = pickColor();
    colorDisplay.textContent = pickedColor;
    message.textContent = "";
    for (var i = 0; i < squares.length; i++) {
        squares[i].style.backgroundColor = colors[i];
    }
    resetBtn.textContent = "New Colors";
    h1.style.backgroundColor = "steelblue";
});