이 글의 내용은 ES6에서 "색상 식별" 미니 게임을 구현하는 방법에 대한 것입니다. 도움이 필요한 친구들에게 참고가 되기를 바랍니다. 당신.

1. 소개

몇 년 전 친구들 사이에서 유행했던 직사각형 찾기 게임이 어렴풋이 기억납니다. 다른 색상으로. 며칠 전, 비슷한 게임을 직접 작성해야겠다는 생각이 갑자기 떠올랐습니다. 이제 데모부터 시작하겠습니다. --프로젝트 소스 코드

이 예제는 ES6 기반으로 구현되었으며 ie9 이상과 호환됩니다.

2. 프로젝트 구조

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

로그인 후 복사

여기서 확장()은 호환성 병합 구성의 작성 방법이며, 구체적인 코드는 다음과 같습니다.

// 合并参数方法
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 3가지 색상으로 구성되어 있으며, 3가지 색상 값이 가까울수록 색상 표현이 더 가까워집니다. 레벨이 올라갈수록 두 색의 삼색값 차이는 한없이 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, 각 상자의 HTML 조각 문자열을 col 길이로 저장합니다.

col의 배열에서 그 중 하나의 색상을 무작위로 특수 색상으로 수정하고, 이 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 모듈화

자세한 내용은 아래에 설명되어 있습니다. 위의 요구 사항을 충족하기 위해 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 파일 index.js 파일의 마지막 줄에 내보내기 기본 ColorGame

을 추가하고 webpack 명령을 실행하세요. -config ./webpack.js

index.html 생성된 colorGame.js를 소개하면 됩니다

위 내용은 ES6에서 '색상 식별' 미니 게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!