Heim > Artikel > Web-Frontend > So implementieren Sie ein Minispiel zur „Farbidentifizierung“ in ES6

So implementieren Sie ein Minispiel zur „Farbidentifizierung“ in ES6

不言Original: 2018-09-19 15:39:491809Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Methode zur Implementierung eines „Farbidentifizierungs“-Minispiels in ES6. Ich hoffe, dass er für Sie hilfreich ist.

1. Einleitung

Ich erinnere mich dunkel an das Farberkennungsspiel, das vor ein paar Jahren im Freundeskreis beliebt war, um Rechtecke mit verschiedenen Farben zu finden. Vor ein paar Tagen hatte ich plötzlich die Idee, ein ähnliches Spiel von Hand zu schreiben. Beginnen wir ohne weiteres mit der Demo. --Projektquellcode

Dieses Beispiel wird basierend auf ES6 implementiert und ist mit ie9 und höher kompatibel.

2. Projektstruktur

index.html index.css index.js

In diesem Artikel geht es hauptsächlich um die Verwendung von js zum Implementieren von Funktionen. HTML-CSS fällt nicht in diesen Bereich. Gehen Sie direkt zum Code.

<!--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. Funktionsimplementierung

Ein Spielobjekt hat seine Standardkonfiguration, die auch individuell vom Benutzer festgelegt werden kann, also——

// 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); // 初始化，合并用户配置
  }
}

Konfigurierbar in diesem Spiel ist die Gesamtspieldauer und die Endmethode end().

Im obigen Code wird die Punktzahl des Benutzers angezeigt, wenn das Spiel endet, und der Benutzer kann auf klicken, um das Spiel neu zu starten. addEvent() ist eine mit dem IE kompatible Ereignisabhörmethode. Der Code lautet wie folgt:

// 事件兼容方法
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() mit Der Parameter wird zum Initialisieren des Spiels verwendet, und die Funktion ohne Parameter wird zum Neustarten des Spiels verwendet. Daher -

// 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(); // 下一关
  }
}

wobei „extend()“ die Methode zum Schreiben der Kompatibilitätszusammenführungskonfiguration ist, der spezifische Code lautet wie folgt:

// 合并参数方法
function extend(o, n, override) {
  for (var p in n) {
    if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
      o[p] = n[p];
  }
}

nextStep() Dies ist die Kernmethode des Spiels, die wird im Folgenden ausführlich vorgestellt.

// index.js
class ColorGame {
  constructor(userOption) {
    // ...
  }
  init(userOption) {
    // ...
  }
  nextStep() {
  }
}

Der Hauptteil des Spiels ist eine n*n-Matrixgrafik, und jedes kleine Kästchen hat die gleiche Größe, außer dass ein Teil davon eine andere Farbe hat und die allgemeine Farbe jeder Ebene ist auch anders, daher müssen wir zufällig eine Farbe erhalten und eine spezielle Farbe zurückgeben, die sich mit zunehmender Ebene allmählich der allgemeinen Farbe annähert.

Farbe besteht aus drei RGB-Farben. Je näher die drei Farbwerte beieinander liegen, desto näher ist die Farbanzeige. Mit zunehmendem Pegel liegt der trichromatische Wertunterschied zwischen den beiden Farben unendlich nahe bei 0. Zu diesem Zeitpunkt erinnerte ich mich an die umgekehrte Proportionalfunktion in der Mittelschule (unendlich nahe an der x-Achse. Dieser Artikel verwendet 100/). Schritt (Verringert sich, wenn der Schritt zunimmt).

/**
 * 根据关卡等级返回相应的一般颜色和特殊颜色
 * @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);
}

Nachdem wir über die grundlegenden Methoden gesprochen haben, sprechen wir über die nextStep()-Methode.

Zuallererst muss die Matrix eine maximale Anzahl von Spalten haben. Wenn sie zu klein ist, ist sie schwierig zu bedienen und die Anzeige sieht nicht gut aus.

Zweitens bestimmen Sie die Anzahl der Spalten col in jeder Ebene, und Sie können die Gesamtzahl der kleinen Kästchen col col ermitteln und die HTML-Fragmentzeichenfolge jedes Kästchens in einer Länge von col Ändern Sie im Array arr of col zufällig die Farbe eines von ihnen in eine spezielle Farbe, geben Sie diesem p eine spezielle ID und überwachen Sie das Klickereignis dieses Dom-Elements. Wenn Sie darauf klicken, gelangen Sie zur nächsten Ebene.

// 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;
    });
  }
}

Nachdem Sie dies geschrieben haben, öffnen Sie bitte index.html. Wurde die Funktion implementiert? Ist das das Ende der Geschichte? Wenn Sie vorsichtig sind, stellen Sie möglicherweise fest, dass dieses Spiel im IE nicht funktioniert und der IE nicht mit der es6-Syntax kompatibel ist. was zu tun?

4. Kompatibilität und Erweiterung

Um mit dem IE kompatibel zu sein, müssen wir die es6-Syntax in es5 konvertieren und Babel zum Kompilieren verwenden.

Wir haben festgestellt, dass diese js-Datei nur über das Skript-Tag importiert werden kann. Ich möchte, dass sie mit dem Modul „common.js“ oder „require.js“ kompatibel ist.

--UMD, hier ist ein Artikel über die Modularisierung von js, an dem UMD beteiligt ist. Studierende mit Bedarf können einen Blick darauf werfen - Javascript-Modularisierung

Im Folgenden finden Sie eine detaillierte Beschreibung der Verwendung webpack Um die oben genannten Anforderungen zu erfüllen:

// 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-Datei, fügen Sie export default ColorGame

zur letzten Zeile der Datei hinzu und führen Sie den Befehl webpack --config ./webpack.js

index.html, um die generierten colorGame.js einzuführen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Minispiel zur „Farbidentifizierung“ in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So positionieren Sie das Klickereignis eines DivNächster Artikel：So positionieren Sie das Klickereignis eines Div

In Verbindung stehende Artikel

Mehr sehen