ホームページ > 記事 > ウェブフロントエンド > ES6 で「色識別」ミニゲームを実装する方法
この記事の内容は、ES6 での「色識別」ミニゲームの実装方法に関するものです。必要な方は参考にしていただければ幸いです。 。
私は、数年前に友達の輪の中で流行っていた、異なる色の長方形を見つける色識別ゲームをなんとなく覚えています。数日前、似たようなゲームを手作りしてみようと突然思いつきました。さっそくデモから始めましょう。 --プロジェクトのソース コード
この例は ES6 に基づいて実装されており、ie9 以降と互換性があります。
index.htmlindex.cssindex.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>
/*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 class="result" style="width: 100%;"> <p class="block-inner" id="restart"> You score is ${score} <br/> click to start again</p> </p>`; addEvent(document.getElementById("restart"), "click", () => { this.init(); }); } // 结束函数 } this.init(userOption); // 初始化,合并用户配置 } }
このゲームでは設定可能です合計ゲーム継続時間と終了メソッド 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 個のマトリックス グラフィックで、各小さなボックスは同じサイズですが、1 つの部分の色が異なり、一般色##各レベルの # も異なるため、色をランダムに取得し、レベルが上がるにつれて徐々に一般的な色に近づく 特別な色 を返す必要があります。
色はRGB 3色で構成されており、3つの色の値が近いほど、より近い色で表示されます。レベルが上がると、2色の三色値の差は限りなく0に近づきます。この時、中学校の反比例関数(x軸に限りなく近い)を思い出しました。この記事では##100/を使用します。 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 で、そのうちの 1 つの色を特別な色にランダムに変更し、この p に特別な 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 = `<p class="block" style="width: ${blockWidth}%;"> <p class="block-inner" style="background-color: #${normalColor}"></p> </p>`; // 包含所有盒子的数组 let arr = []; // 初始化数组 for (let i = 0; i < col * col; i++) arr.push(item); // 修改随机盒子 arr[randomBlock] = `<p class="block" style="width: ${blockWidth}%;"> <p class="block-inner" style="background-color: #${specialColor}" id="special-block"></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 構文と互換性がないことがわかるかもしれません。何をするか? 4. 互換性と拡張IE と互換性を持たせるには、es6 構文を es5 に変換し、babel を使用してコンパイルする必要があります。 この js ファイルは script タグを介してのみインポートできることがわかりました。common.js または require.js モジュールのインポートと互換性があるようにしたいのですが、どうすればよいですか? --UMD、これは UMD に関連する js のモジュール化に関する記事です。必要な学生は参照してください - Javascript Modularization以下は使用方法の詳細な説明です。上記の要件を達成するには:
// 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 ファイル、ファイルの最後の行にエクスポート デフォルト ColorGame を追加し、コマンド webpack --config ./webpack.js# を実行します。
##index.html で生成された colorGame.js を紹介するには、
##
以上がES6 で「色識別」ミニゲームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。