ES6 手寫一個“辨色”小遊戲

ECMAScript · 發表 2018-09-19 10:45:34

摘要：依稀記得幾年前朋友圈流行的辨色小遊戲，找出顏色不同的矩形。前些天突發奇想，打算自己手寫一個類似的遊戲，話不多說，先上Demo . --專案原始碼本例項基於 ES6 實現，併兼容 ie9及以上。 2. 專案結構 index.html index.css i...

依稀記得幾年前朋友圈流行的辨色小遊戲，找出顏色不同的矩形。前些天突發奇想，打算自己手寫一個類似的遊戲，話不多說，先上Demo . --ofollow,noindex">專案原始碼

本例項基於 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>
<div class="container">
<div class="wgt-home" id="page-one">
<h1>辨色力測試</h1>
<p>找出所有色塊裡顏色不同的一個</p>
<a id="start" class="btn btn-primary btn-lg">開始挑戰</a>
</div>
<header class="header">
<h1>辨色力測試</h1>
</header>

<aside class="wgt-score">
</aside>

<section id="screen" class="screen">
</section>

<footer>
<div> <a href="http://zxpsuper.github.io" style="color: #FAF8EF"> my blog</a></div>
©<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>
</div>
</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 class
class ColorGame {
constructor() {
}
}
複製程式碼

3. 功能實現

一個遊戲物件有其預設的配置，也可以由使用者單獨設定，因此——

// index.js
class ColorGame {
constructor(userOption) {
this.option = {
time: 30, // 總時長
end: score => {
document.getElementById(
"screen"
).innerHTML = `<div class="result" style="width: 100%;">
<div class="block-inner" id="restart"> You score is ${score} <br/> click to start again</div>
</div>`;
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 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.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 = `<div class="block" style="width: ${blockWidth}%;">
<div class="block-inner" style="background-color: #${normalColor}"></div>
</div>`;

// 包含所有盒子的陣列
let arr = [];

// 初始化陣列
for (let i = 0; i < col * col; i++) arr.push(item);

// 修改隨機盒子
arr[randomBlock] = `<div class="block" style="width: ${blockWidth}%;">
<div class="block-inner" style="background-color: #${specialColor}" id="special-block"></div>
</div>`;

// 修改頁面 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 手寫一個“辨色”小遊戲

2. 專案結構

3. 功能實現

4. 相容與拓展

您可能也會喜歡…