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

feng409 發(fā)布于2019-08-23 12:02 / 1476人閱讀

摘要：前言依稀記得幾年前朋友圈流行的辨色小游戲，找出顏色不同的矩形。前些天突發(fā)奇想，打算自己手寫一個類似的游戲，話不多說，先上。顏色由三色構(gòu)成，三色值越接近，則顏色顯示越接近。

1. 前言

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

本實例基于 ES6 實現(xiàn)，并兼容 ie9及以上。

2. 項目結(jié)構(gòu)

index.html index.css index.js

本文主要講述如何使用 js 實現(xiàn)功能，html css 不在此范圍。直接上代碼。






  
  
  
  
  suporka color game



  
    
      辨色力測試
      找出所有色塊里顏色不同的一個
      開始挑戰(zhàn)
    
    
      辨色力測試
    

    
    

    
    
    
    
        my blog
      ?Suporka
      ?My book
      ?My Github

/*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. 功能實現(xiàn)

一個游戲?qū)ο笥衅淠J(rèn)的配置，也可以由使用者多帶帶設(shè)置，因此——

// index.js
class ColorGame {
  constructor(userOption) {
    this.option = {
      time: 30, // 總時長
      end: score => {
        document.getElementById(
          "screen"
        ).innerHTML = `
         You score is ${score} 
 click to start again
      `;
        addEvent(document.getElementById("restart"), "click", () => {
          this.init();
        });
      } // 結(jié)束函數(shù)
    }
    this.init(userOption); // 初始化，合并用戶配置
  }
}

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

上述代碼中游戲結(jié)束時顯示用戶得分，并且使其點擊可以重新開始游戲，addEvent() 為兼容 ie 的事件監(jiān)聽方法，代碼如下：

// 事件兼容方法
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() 帶參數(shù)時為初始化游戲，不帶參數(shù)為游戲重新開始的功能。因此——

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

    this.step = 0; // 關(guān)卡
    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;
    // 設(shè)置初始時間和分?jǐn)?shù)
    document.getElementsByClassName(
      "wgt-score"
    )[0].innerHTML = `得分：${this.score}
    時間：${this.time}`;

    // 開始計時, es6 箭頭函數(shù)
    window.timer = setInterval(() => {
      if (this.time === 0) {
        // 如果時間為0，clearInterval并調(diào)用結(jié)束方法
        clearInterval(window.timer);
        this.option.end(this.score);
      } else {
        this.time--;
        document.getElementById("timer").innerHTML = this.time;
      }
    }, 1000);

    this.nextStep(); // 下一關(guān)
  }
}

其中extend() 為兼容性合并配置的寫法，具體代碼如下：

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

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

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

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

顏色由 RGB 三色構(gòu)成，三色值越接近，則顏色顯示越接近。隨著等級的增加，兩種顏色的三色值差無限接近與 0. 此時我想起了中學(xué)時代的反比例函數(shù)（無限接近于x軸），本文用的是 100/step（隨著step增大而減?。?

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

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

  // 轉(zhuǎn)化為 10 進(jìn)制
  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];
}

/**
 * 獲取隨機(jī)顏色相近的 rgb 三色值
 * @param {number} num 單色值
 * @param {number} random 隨機(jī)加減的數(shù)值
 */
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";
  }
}

/**
 * 隨機(jī)顏色
 * @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;
}
/**
 * 隨機(jī)數(shù)
 * @param {number} min 最小值
 * @param {number} max 最大值
 */
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

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

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

其次，確定每個關(guān)卡的列數(shù) col，即可得知小盒子的總個數(shù) col col, 將每個盒子的 HTML 片段字符串存入長度為 col col 的數(shù)組 arr 中，再隨機(jī)修改其中一個的顏色賦值為特殊顏色，并給這個 div 一個特殊 id，且監(jiān)聽此 dom 元素的點擊事件，若點擊了，則進(jìn)入下一個關(guān)卡。

// index.js
class ColorGame {
  constructor(userOption) {
    // ...
  }
  init(userOption) {
    // ...
  }
  nextStep() {
    // 記級
    this.step++;
    let col; // 列數(shù)
    // 設(shè)置列數(shù)，最高不超過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;

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

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

    // es6 模板字符串
    let item = `
    
  `;

    // 包含所有盒子的數(shù)組
    let arr = [];

    // 初始化數(shù)組
    for (let i = 0; i < col * col; i++) arr.push(item);

    // 修改隨機(jī)盒子
    arr[randomBlock] = `
    
  `;

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

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

寫到這里，請打開 index.html ，是不是實現(xiàn)了該有的功能？故事是不是就這么結(jié)束了？嗯，細(xì)心的你可能會發(fā)現(xiàn)，此游戲在 ie 中行不通，ie 不兼容 es6 語法。怎么辦？

4. 兼容與拓展

為了兼容 ie , 我們需要把 es6 語法轉(zhuǎn)化為 es5, 使用 babel 編譯即可。

我們發(fā)現(xiàn)此 js 文件只可通過 script 標(biāo)簽引入，我想讓它兼容 common.js 或者 require.js 的模塊引入，該怎么做？

--UMD, 這里有篇文章講述到 js 的模塊化，里面有涉及 UMD, 有需要的同學(xué)可以看看——Javascript 模塊化

下面具體講述如何使用 webpack 實現(xiàn)上述需求：

// 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

執(zhí)行命令webpack --config ./webpack.js

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97876.html

發(fā)表評論

登陸后可評論

0條評論

feng409

男|高級講師

我要關(guān)注我要私信

TA的文章

pycharm怎么安裝tensorflow

閱讀 2524·2023-04-25 17:27
移動端適配方案

閱讀 1836·2019-08-30 15:54
關(guān)于css3的陰影遮蓋問題的小研究

閱讀 2377·2019-08-30 13:06
css3的3D

閱讀 2990·2019-08-30 11:04
JS基礎(chǔ)入門篇（十二）—對象

閱讀 757·2019-08-29 15:30
兩個常規(guī)的頁面布局方式

閱讀 737·2019-08-29 15:16
Proxy 的巧用

閱讀 1740·2019-08-26 10:10
2019干掉手機(jī)uc瀏覽器的底部強(qiáng)制廣告

閱讀 3612·2019-08-23 17:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

辨色力測試

辨色力測試

相關(guān)文章

Canvas 進(jìn)階（三）ts + canvas 重寫”辨色“小游戲

一款輪播插件的誕生

前端之從零開始系列

FCC 成都社區(qū)·前端周刊第 10 期

FCC 成都社區(qū)·前端周刊第 10 期

發(fā)表評論

0條評論

feng409

男|高級講師

TA的文章

pycharm怎么安裝tensorflow

移動端適配方案

關(guān)于css3的陰影遮蓋問題的小研究

css3的3D

JS基礎(chǔ)入門篇（十二）—對象

兩個常規(guī)的頁面布局方式

Proxy 的巧用

2019干掉手機(jī)uc瀏覽器的底部強(qiáng)制廣告

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

辨色力測試

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！