网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于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>