ホームページ > 記事 > ウェブフロントエンド > ES6 で「色識別」ミニゲームを実装する方法
ES6 で「色識別」ミニゲームを実装する方法
- 不言オリジナル
- 2018-09-19 15:39:491778ブラウズ
この記事の内容は、ES6 での「色識別」ミニゲームの実装方法に関するものです。必要な方は参考にしていただければ幸いです。 。
1. はじめに
私は、数年前に友達の輪の中で流行っていた、異なる色の長方形を見つける色識別ゲームをなんとなく覚えています。数日前、似たようなゲームを手作りしてみようと突然思いつきました。さっそくデモから始めましょう。 --プロジェクトのソース コード
この例は ES6 に基づいて実装されており、ie9 以降と互換性があります。
2. プロジェクトの構造
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() {
}
}
3. 関数の実装
ゲーム オブジェクトにはデフォルトの設定があり、ユーザーが個別に設定することもできるため、——
// 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 サイトの他の関連記事を参照してください。