摘要:前言依稀記得幾年前朋友圈流行的辨色小游戲,找出顏色不同的矩形。前些天突發奇想,打算自己手寫一個類似的游戲,話不多說,先上。顏色由三色構成,三色值越接近,則顏色顯示越接近。
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 即可。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/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...
閱讀 2513·2023-04-25 17:27
閱讀 1824·2019-08-30 15:54
閱讀 2369·2019-08-30 13:06
閱讀 2980·2019-08-30 11:04
閱讀 746·2019-08-29 15:30
閱讀 729·2019-08-29 15:16
閱讀 1733·2019-08-26 10:10
閱讀 3603·2019-08-23 17:02