摘要:前言依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上。颜色由三色构成,三色值越接近,则颜色显示越接近。
1. 前言
依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo。 --项目源码
本实例基于 ES6 实现,并兼容 ie9及以上。
2. 项目结构index.html index.css index.js
本文主要讲述如何使用 js 实现功能,html css 不在此范围。直接上代码。
suporka color game
/*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 = ``; addEvent(document.getElementById("restart"), "click", () => { this.init(); }); } // 结束函数 } this.init(userOption); // 初始化,合并用户配置 } }You score is ${score}
click to start again
此游戏中可以配置的为游戏总时长 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 = `得分:${this.score} 时间:${this.time}`; // 开始计时, 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 = ``; // 包含所有盒子的数组 let arr = []; // 初始化数组 for (let i = 0; i < col * col; i++) arr.push(item); // 修改随机盒子 arr[randomBlock] = ``; // 修改页面 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 即可。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97876.html
摘要:话不多说,先上和项目源码有趣的是,在我写完这篇文章之后,发现爱编程的李先森也写了一篇手写辨色力小游戏实现方式有所不同,可以对比下。 1. 背景 之前写过一篇文章 ES6 手写一个辨色小游戏, 感觉好玩挺不错。岂料评论区大神频出,其中有人指出,打开控制台,输入以下代码: setInterval( ()=>document.querySelector(#special-block).cli...
摘要:正式发布在过去的一周,正式发布,带来大量改进和修复。这是自开展以来的第七个主要版本,并将在年月成为下一个分支。以后,如果使用具有已知安全问题的代码,的用户会收到警告通知。将自动检查针对数据库的安装请求,并在代码包含漏洞时发出警告通知。 1. Node.js 10 正式发布 在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundati...
摘要:正式发布在过去的一周,正式发布,带来大量改进和修复。这是自开展以来的第七个主要版本,并将在年月成为下一个分支。以后,如果使用具有已知安全问题的代码,的用户会收到警告通知。将自动检查针对数据库的安装请求,并在代码包含漏洞时发出警告通知。 1. Node.js 10 正式发布 在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundati...
阅读 2493·2023-04-25 17:27
阅读 1806·2019-08-30 15:54
阅读 2354·2019-08-30 13:06
阅读 2951·2019-08-30 11:04
阅读 722·2019-08-29 15:30
阅读 694·2019-08-29 15:16
阅读 1716·2019-08-26 10:10
阅读 3583·2019-08-23 17:02