本篇文章给大家带来的内容是关于es6实现一个“辨色”小游戏的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
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> <p class="container"> <p class="wgt-home" id="page-one"> <h1>辨色力测试</h1> <p>找出所有色块里颜色不同的一个</p> <a id="start" class="btn btn-primary btn-lg">开始挑战</a> </p> <header class="header"> <h1>辨色力测试</h1> </header> <aside class="wgt-score"> </aside> <section id="screen" class="screen"> </section> <footer> <p> <a href="http://zxpsuper.github.io" style="color: #faf8ef"> my blog</a></p> ©<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> </p></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 classclass colorgame { constructor() { }}
3. 功能实现一个游戏对象有其默认的配置，也可以由使用者单独设置，因此——
// index.jsclass colorgame { constructor(useroption) { this.option = { time: 30, // 总时长 end: score => { document.getelementbyid( screen ).innerhtml = `<p class="result" style="width: 100%;"> <p class="block-inner" id="restart"> you score is ${score} <br/> click to start again</p> </p>`; 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.jsclass 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.jsclass 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 中，再随机修改其中一个的颜色赋值为特殊颜色，并给这个 p 一个特殊 id，且监听此 dom 元素的点击事件，若点击了，则进入下一个关卡。
// index.jsclass 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 = `<p class="block" style="width: ${blockwidth}%;"> <p class="block-inner" style="background-color: #${normalcolor}"></p> </p>`; // 包含所有盒子的数组 let arr = []; // 初始化数组 for (let i = 0; i < col * col; i++) arr.push(item); // 修改随机盒子 arr[randomblock] = `<p class="block" style="width: ${blockwidth}%;"> <p class="block-inner" style="background-color: #${specialcolor}" id="special-block"></p> </p>`; // 修改页面 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.jsconst 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实现一个“辨色”小游戏的方法的详细内容。