1.はじめに
数年前に友達の輪で流行った色分けのミニゲームを覚えています.色の違う長方形を探します.先日、自分で似たようなゲームを書きたいと思いました.話は多くなくて、先にDemoに行きます.プロジェクトのソースコード
この例はES 6に基づいて実装され、ie 9および以上の互換性がある.
2.プロジェクト構造index.html index.css index.jsこの文章は主にjsを使って機能を実現する方法を述べています.html cssはこの範囲ではありません.直接コードします

  
  
  
  
  



  

    

      
     
      
              
        を  する
    
    

      
     
    

    

    

    
    
    
  




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

/*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 = `

        
 You score is ${score} 
 click to start again
      
`;
        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 = `  ：${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(); //    
  }
}

その中のexted()は互換性の合併配置の書き方で、具体的なコードは以下の通りです.

//       
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を使います.

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

基本的な方法を説明し終わったら、next Step()の方法を説明します.
まず、行列は一番多い列数の制限が必要です.小さすぎて扱いにくいです.表示もよくないです.
その次に、各ステージの列数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.jsindex.は生成されたcolorGame.jsを導入すれば良い.