本篇文章给大家带来的内容是关于es6实现一个“辨色”小游戏的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo。 --项目源码
本实例基于 ES6 实现,并兼容 ie9及以上。
index.html index.css index.js
本文主要讲述如何使用 js 实现功能,html css 不在此范围。直接上代码。
<!--index.html--> nbsp;html> <meta> <meta> <meta> <link> <title>suporka color game</title> <p> </p><p> </p><h1>辨色力测试</h1> <p>找出所有色块里颜色不同的一个</p> <a>开始挑战</a> <header> <h1>辨色力测试</h1> </header> <aside> </aside> <section> </section> <footer> <p> <a> my blog</a></p> ©<a>Suporka</a> ©<a>My book</a> ©<a>My Github</a> </footer> <!-- <script src="index.js"></script> --> <script></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>
/*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() { } }
一个游戏对象有其默认的配置,也可以由使用者单独设置,因此——
// index.js class ColorGame { constructor(userOption) { this.option = { time: 30, // 总时长 end: score => { document.getElementById( "screen" ).innerHTML = `<p> </p><p> You score is ${score} <br> click to start again</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.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>${this.score}</span> 时间:<span>${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 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 <p></p> `; // 包含所有盒子的数组 let arr = []; // 初始化数组 for (let i = 0; i <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 语法。怎么办?
为了兼容 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中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号