资讯专栏INFORMATION COLUMN

ES6 手写一个“辨色”小游戏

feng409 / 1454人阅读

摘要:前言依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上。颜色由三色构成,三色值越接近,则颜色显示越接近。

1. 前言

依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo。 --项目源码

本实例基于 ES6 实现,并兼容 ie9及以上。

2. 项目结构

index.html index.css index.js

本文主要讲述如何使用 js 实现功能,html css 不在此范围。直接上代码。






  
  
  
  
  suporka color game



  

辨色力测试

找出所有色块里颜色不同的一个

开始挑战

辨色力测试

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

此游戏中可以配置的为游戏总时长 time 以及结束方法 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(); // 下一关
  }
}

其中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 的矩阵图形,并且每个小盒子的大小一致,只是其中有一块颜色与众不同,每个关卡的一般颜色也不相同,因此我们需要随机获取一个颜色,并且根据关卡级别的增加返回一个逐渐接近一般颜色的特殊颜色

颜色由 RGB 三色构成,三色值越接近,则颜色显示越接近。随着等级的增加,两种颜色的三色值差无限接近与 0. 此时我想起了中学时代的反比例函数(无限接近于x轴), 本文用的是 100/step(随着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 中,再随机修改其中一个的颜色赋值为特殊颜色,并给这个 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.js

index.html 引入生成的 colorGame.js 即可。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97876.html

相关文章

  • Canvas 进阶(三)ts + canvas 重写”辨色游戏

    摘要:话不多说,先上和项目源码有趣的是,在我写完这篇文章之后,发现爱编程的李先森也写了一篇手写辨色力小游戏实现方式有所不同,可以对比下。 1. 背景 之前写过一篇文章 ES6 手写一个辨色小游戏, 感觉好玩挺不错。岂料评论区大神频出,其中有人指出,打开控制台,输入以下代码: setInterval( ()=>document.querySelector(#special-block).cli...

    Aceyclee 评论0 收藏0
  • 一款轮播插件的诞生

    摘要:同理,向左轮播至第一张图片时,也会取消后轮播图定位至第六张图片而后再度开启。续判断是否开启自动轮播,如是则自动轮播加入事件监听监听鼠标移入事件,当鼠标移入的时候,停止自动滚动。监听左右按钮的点击,执行上一张,下一张图的轮播效果。 1. 前言 早在几个月前,就想自己动手写个轮播图组件,因此也看了许多文章,断断续续过了几个月,今天终于有时间腾出手来给此插件做个总结,因此有了这篇文章。话不多...

    qianfeng 评论0 收藏0
  • 前端之从零开始系列

    摘要:只有动手,你才能真的理解作者的构思的巧妙只有动手,你才能真正掌握一门技术持续更新中项目地址求求求源码系列跟一起学如何写函数库中高级前端面试手写代码无敌秘籍如何用不到行代码写一款属于自己的类库原理讲解实现一个对象遵循规范实战手摸手,带你用撸 Do it yourself!!! 只有动手,你才能真的理解作者的构思的巧妙 只有动手,你才能真正掌握一门技术 持续更新中…… 项目地址 https...

    Youngdze 评论0 收藏0
  • FCC 成都社区·前端周刊 第 10 期

    摘要:正式发布在过去的一周,正式发布,带来大量改进和修复。这是自开展以来的第七个主要版本,并将在年月成为下一个分支。以后,如果使用具有已知安全问题的代码,的用户会收到警告通知。将自动检查针对数据库的安装请求,并在代码包含漏洞时发出警告通知。 1. Node.js 10 正式发布 在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundati...

    BigNerdCoding 评论0 收藏0
  • FCC 成都社区·前端周刊 第 10 期

    摘要:正式发布在过去的一周,正式发布,带来大量改进和修复。这是自开展以来的第七个主要版本,并将在年月成为下一个分支。以后,如果使用具有已知安全问题的代码,的用户会收到警告通知。将自动检查针对数据库的安装请求,并在代码包含漏洞时发出警告通知。 1. Node.js 10 正式发布 在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundati...

    li21 评论0 收藏0

发表评论

0条评论

feng409

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<