ES6 手寫一個“辨色”小遊戲

阿新 • • 發佈：2018-12-10

1. 前言

依稀記得幾年前朋友圈流行的辨色小遊戲，找出顏色不同的矩形。前些天突發奇想，打算自己手寫一個類似的遊戲，話不多說，先上 Demo .

本例項基於 ES6 實現，併兼容 ie9及以上。

2. 專案結構

index.html index.css index.js

本文主要講述如何使用 js 實現功能，html css 不在此範圍。直接上程式碼。

<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <title>suporka color game</title>
</head>

<body>
  <div class="container">
    <div class="wgt-home" id="page-one">
      <h1>辨色力測試</h1>
      <p>找出所有色塊裡顏色不同的一個</p>
      <a id="start" class="btn btn-primary btn-lg">開始挑戰</a>
    </div>
    <header class="header">
      <h1>辨色力測試</h1>
    </header>

    <aside class="wgt-score">
    </aside>

    <section id="screen" class="screen">
    </section>
    
    <footer>
      <div> <a href="http://zxpsuper.github.io" style="color: #FAF8EF"> my blog</a></div>
      ©<a href="https://zxpsuper.github.io">Suporka</a>
      ©<a href="https://zxpsuper.github.io/Demo/advanced_front_end/">My book</a>
      ©<a href="https://github.com/zxpsuper">My Github</a>
    </footer>
  </div>
</body>
<!-- <script src="index.js"></script> -->
<script src="colorGame.js"></script>
<script>
  // 事件相容方法，相容ie
  function addEvent(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  }
  window.onload = function () {
    addEvent(document.querySelector('#start'), 'click', function() {
      document.querySelector('#page-one').style.display = 'none'
      new ColorGame({
        time: 30
      })
    })
  }
</script>
</html>

/*index.css*/
body {
  background-color: #FAF8EF;
}
footer {
  display: block;
  margin-top: 10px;
  text-align: center;
}
h1 {
  font-size: 2em;
  margin: .67em 0;
}
a {
  text-decoration: none;
}
footer a {
  margin-right: 14px;
}
.container {
  margin: auto;
  padding: 0 10px;
  max-width: 600px;
}
.wgt-home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 50px;
  font-size: 20px;
  background: #fc0;
  text-align: center;
  color: #fff;
}

.wgt-home p {
  margin-top: 4em;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: auto;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  user-select: none;
}
.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.wgt-home .btn {
  margin-top: 4em;
  width: 50%;
  max-width: 300px;
}
.screen {
  display: block;
  margin-top: 10px;
  padding: 1px;
}
.screen .block {
  float: left;
  box-sizing: border-box;
  padding: 1px;
}
.screen .block .block-inner {
  content: ' ';
  display: block;
  width: 100%;
  padding-top: 100%;
  border-radius: 2px;
  -webkit-user-select: none;
  user-select: none;
}
.result {
  color: red;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

// index.js
// es6 class
class ColorGame {
  constructor() {
  }
}

3. 功能實現

一個遊戲物件有其預設的配置，也可以由使用者單獨設定，因此——

// index.js
class ColorGame {
  constructor(userOption) {
    this.option = {
      time: 30, // 總時長
      end: score => {
        document.getElementById(
          "screen"
        ).innerHTML = `<div class="result" style="width: 100%;">
        <div class="block-inner" id="restart"> You score is ${score} <br/> click to start again</div>
      </div>`;
        addEvent(document.getElementById("restart"), "click", () => {
          this.init();
        });
      } // 結束函式
    }
    this.init(userOption); // 初始化，合併使用者配置
  }
}

此遊戲中可以配置的為遊戲總時長 time 以及結束方法 end()。

上述程式碼中游戲結束時顯示使用者得分，並且使其點選可以重新開始遊戲，addEvent() 為相容 ie 的事件監聽方法，程式碼如下：

// 事件相容方法
function addEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler);
  } else {
    element["on" + type] = handler;
  }
}

init() 帶引數時為初始化遊戲，不帶引數為遊戲重新開始的功能。因此——

// index.js
class ColorGame {
  constructor(userOption) {
    // ...
  }
  init(userOption) {

    this.step = 0; // 關卡
    this.score = 0; // 得分

    if (userOption) {
      if (Object.assign) {
        // 合併使用者配置, es6寫法
        Object.assign(this.option, userOption);
      } else {
        // 相容es6寫法
        extend(this.option, userOption, true);
      }
    }

    // 倒計時賦值
    this.time = this.option.time;
    // 設定初始時間和分數
    document.getElementsByClassName(
      "wgt-score"
    )[0].innerHTML = `得分：<span id="score">${this.score}</span>
    時間：<span id="timer">${this.time}</span>`;

    // 開始計時, es6 箭頭函式
    window.timer = setInterval(() => {
      if (this.time === 0) {
        // 如果時間為0，clearInterval並呼叫結束方法
        clearInterval(window.timer);
        this.option.end(this.score);
      } else {
        this.time--;
        document.getElementById("timer").innerHTML = this.time;
      }
    }, 1000);

    this.nextStep(); // 下一關
  }
}

其中extend() 為相容性合併配置的寫法，具體程式碼如下：

// 合併引數方法
function extend(o, n, override) {
  for (var p in n) {
    if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
      o[p] = n[p];
  }
}

nextStep() 為此遊戲的核心方法，下面將詳細介紹。

// index.js
class ColorGame {
  constructor(userOption) {
    // ...
  }
  init(userOption) {
    // ...
  }
  nextStep() {
  }
}

遊戲主體為 n*n 的矩陣圖形，並且每個小盒子的大小一致，只是其中有一塊顏色與眾不同，每個關卡的一般顏色也不相同，因此我們需要隨機獲取一個顏色，並且根據關卡級別的增加返回一個逐漸接近一般顏色的特殊顏色。

顏色由 RGB 三色構成，三色值越接近，則顏色顯示越接近。隨著等級的增加，兩種顏色的三色值差無限接近與 0. 此時我想起了中學時代的反比例函式（無限接近於x軸），本文用的是 100/step（隨著step增大而減小）.

/**
 * 根據關卡等級返回相應的一般顏色和特殊顏色
 * @param {number} step 關卡級別
 */
function getColor(step) {
  // rgb 隨機加減 random
  let random = Math.floor(100/step);

  // 獲取隨機一般顏色，拆分三色值
  let color = randomColor(17, 255),
    m = color.match(/[\da-z]{2}/g);

  // 轉化為 10 進位制
  for (let i = 0; i < m.length; i++) m[i] = parseInt(m[i], 16); //rgb
  let specialColor =
    getRandomColorNumber(m[0], random) +
    getRandomColorNumber(m[1], random) +
    getRandomColorNumber(m[2], random);
  return [color, specialColor];
}

/**
 * 獲取隨機顏色相近的 rgb 三色值
 * @param {number} num 單色值
 * @param {number} random 隨機加減的數值
 */
function getRandomColorNumber(num, random) {
  let temp = Math.floor(num + (Math.random() < 0.5 ? -1 : 1) * random);
  if (temp > 255) {
    return "ff";
  } else if (temp > 16) {
    return temp.toString(16);
  } else if (temp > 0) {
    return "0" + temp.toString(16);
  } else {
    return "00";
  }
}

/**
 * 隨機顏色
 * @param {number} min 最小值
 * @param {number} max 最大值
 */
function randomColor(min, max) {
  var r = randomNum(min, max).toString(16);
  var g = randomNum(min, max).toString(16);
  var b = randomNum(min, max).toString(16);
  return r + g + b;
}
/**
 * 隨機數
 * @param {number} min 最小值
 * @param {number} max 最大值
 */
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

講完了基本的方法，接下講述nextStep() 方法。

首先，矩陣必須要有最多的列數限制，太小不好操作，顯示也不好看。

其次，確定每個關卡的列數 col，即可得知小盒子的總個數 col col, 將每個盒子的 HTML 片段字串存入長度為 col col 的陣列 arr 中，再隨機修改其中一個的顏色賦值為特殊顏色，並給這個 div 一個特殊 id，且監聽此 dom 元素的點選事件，若點選了，則進入下一個關卡。

// index.js
class ColorGame {
  constructor(userOption) {
    // ...
  }
  init(userOption) {
    // ...
  }
  nextStep() {
    // 記級
    this.step++;
    let col; // 列數
    // 設定列數，最高不超過16
    if (this.step < 6) {
      col = this.step + 1;
    } else if (this.step < 12) {
      col = Math.floor(this.step / 2) * 2;
    } else if (this.step < 18) {
      col = Math.floor(this.step / 3) * 3;
    } else {
      col = 16;
    }

    // 小盒子寬度
    let blockWidth = ((100 / col).toFixed(2) * 100 - 1) / 100;

    // 隨機盒子index
    let randomBlock = Math.floor(col * col * Math.random());

    // 解構賦值獲取一般顏色和特殊顏色， es6 解構
    let [normalColor, specialColor] = getColor(this.step);

    // es6 模板字串
    let item = `<div class="block" style="width: ${blockWidth}%;">
    <div class="block-inner" style="background-color: #${normalColor}"></div>
  </div>`;

    // 包含所有盒子的陣列
    let arr = [];

    // 初始化陣列
    for (let i = 0; i < col * col; i++) arr.push(item);

    // 修改隨機盒子
    arr[randomBlock] = `<div class="block" style="width: ${blockWidth}%;">
    <div class="block-inner" style="background-color: #${specialColor}" id="special-block"></div>
  </div>`;

    // 修改頁面 dom 元素
    document.getElementById("screen").innerHTML = arr.join("");

    // 監聽特殊盒子點選事件
    addEvent(document.getElementById("special-block"), "click", () => {
      this.nextStep();
      this.score++;
      // 修改得分
      document.getElementById("score").innerHTML = this.score;
    });
  }
}

寫到這裡，請開啟 index.html ，是不是實現了該有的功能？故事是不是就這麼結束了？嗯，細心的你可能會發現，此遊戲在 ie 中行不通，ie 不相容 es6 語法。怎麼辦？

4. 相容與拓展

為了相容 ie , 我們需要把 es6 語法轉化為 es5, 使用 babel 編譯即可。

我們發現此 js 檔案只可通過 script 標籤引入，我想讓它相容 common.js 或者 require.js 的模組引入，該怎麼做？

--UMD, 這裡有篇文章講述到 js 的模組化，裡面有涉及 UMD, 有需要的同學可以看看——Javascript 模組化

下面具體講述如何使用 webpack 實現上述需求：

// webpack.js

const path = require('path');

module.exports = {
  entry: {
    index: './index.js', //入口
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  output: {
    path: path.resolve(__dirname, './'),
    library: 'ColorGame',
    libraryExport: "default",
    libraryTarget: 'umd',
    filename: 'colorGame.js',
  },
};

index.js 檔案最後一行新增 export default ColorGame

執行命令webpack --config ./webpack.js

index.html 引入生成的 colorGame.js 即可。

ES6 手寫一個“辨色”小遊戲

1. 前言

2. 專案結構

3. 功能實現

4. 相容與拓展

ES6 手寫一個“辨色”小遊戲

用python寫一個猜數字小遊戲

用JavaSE寫一個坦克大戰小遊戲

使用Java寫一個猜數字小遊戲

爬蟲入門手寫一個Java爬蟲

10min 手寫一個內存監控系統

第一篇博客：一個雙色球遊戲、以及個人介紹

手寫一個簡化版Tomcat

python寫一個雙色球計算器

手寫一個簡易版Tomcat

wsgiref手寫一個web服務端

爬蟲入門手寫一個Java爬蟲

前端面試之手寫一個bind方法

看年薪50W的架構師如何手寫一個SpringMVC框架（文末附視訊）

【乾貨】JDK動態代理的實現原理以及如何手寫一個JDK動態代理

動態代理：如何深入理解和分析，不如手寫一個(原始碼包分析、樓主親測)

Java反射：如何正確理解，不如手寫一個(反射包分析、樓主親測)

資料庫連線池認知+手寫一個

管理系統的登入控制？手寫一個釋出訂閱模型！

教你如何使用Java手寫一個基於連結串列的佇列

ES6 手寫一個“辨色”小遊戲

1. 前言

2. 專案結構

3. 功能實現

4. 相容與拓展

相關推薦