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 中，再随机修改其中一个的颜色赋值为特殊颜色，并给这个 p 一个特殊 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 = `<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.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实现一个“辨色”小游戏的方法的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：ES6完成一个“辨色”小游戏的办法