HTML5游戏 看你有多“色” 开发

所有文章搬运自我的个人主页：sheilasun.me

在极客学院看到了这个游戏，在网上找到这个游戏玩了好久真的比较上瘾，于是自己也试着做了一下，可以戳这里试玩→看你有多色

游戏规则：

找出颜色不同的方块

梳理界面：

界面应该至少有三个部分：

1. 开始界面

提示玩法，以及游戏入口

2. 游戏界面

需要提供：

• 进行操作的地方（游戏区）

• 当前得分

• 当前剩余时间

  游戏设计者特意设置了一分钟的时间限制，因为这款游戏真的很很很很很耗眼睛，我费尽力气也就玩了个“超级色魔lv44”级别，眼珠子都快瞪飞了。每一分钟让眼睛能休息下很科学。

• 暂停按钮

3. dialog界面

比如点了暂停会跳转到这里，这时应提供“继续游戏”按钮。

比如游戏结束了也会跳转到这里，这时应提供游戏结果，例如"经鉴定您是【瞎子lv2】"，以及"再来一次"按钮。

以上的“界面”在html中可以用div实现，三个同样大小的div，position均为absolute，重叠在一起放置，通过隐藏或显示来完成“跳转”效果。

梳理细节：

上面这些是大致的框架，下面梳理细节部分。

首先是游戏区的实现，是一个正方形区块，有n*n个方块，n的值由当前关卡确定，越到后面的关卡，n值越大，要在2*2的格局中找出不同颜色的那个，轻而易举，在9*9的格局就不那么容易了。

而且，这个“不同颜色”的设置也有讲究，我们把每一关中出现的两种颜色称为“普通颜色”和“不同颜色”，如图，只有一个方块是“不同颜色”，其他方块涂的都是“普通颜色”，找出这特殊的一个就过关了。

每关的“普通颜色”随机获取（是黑色或白色就剔除重选），“不同颜色”就是在“普通颜色”上加点亮度，如亮度提升10%，这个提升的比例每关也有差别，越到后面值越小，越难分辨。

![此处输入图片的描述][2]

代码实现：

html以及css部分这里就不说细节了，关键的点就是：

三个界面的position要设为absolute，位置完全重合，叠叠乐，这样只要简单的隐藏或显示就行了。

刚加载时，显示“开始界面”div，游戏开始，显示“游戏界面”，暂停或游戏结束，显示“dialog”界面，继续游戏或再玩一次，又回到“游戏界面”。

主要是说一说js部分：

• 第一个问题，小方块们是如何画上去的？

其实一开始，我是想用a或span标签的，但是越到后面关卡，小方块越多，比如说9*9就能产生81个标签，这样的话，dom节点似乎有点多啊。于是我就想用canvas，我又想代码写起来可以简便些，于是我就找上了createjs家的easeljs，说干就干，赶紧奔到createjs官网上大致看了一下用法，赶紧开工，API不会用反正可以随时回来查。下面是easeljs绘制圆的示例用法：

var stage = new createjs.Stage("demoCanvas");//参数传入canvas对象或者其id
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();

说个插曲，一开始我也在想是不是有必要引入createjs，后来我突然想起来我在网上玩这个游戏的时候，似乎看到别人的方块都是圆角的，比不加圆角好看好多，我，也想这么做。但是依稀记得canvas似乎并没有现成的画圆角矩形的方法，难道我要用arc加line去拼合？还有，我还得为那个特殊的小方块添加点击事件呢，如果就用原生的api，我需要这样做：

• 用一个变量a保存那个特殊的小方块覆盖的坐标范围
• 给canvas对象添加click事件
• 在click事件中判断click的位置与a中范围是否交叉，是的话，那么恭喜自己，点中啦

这太麻烦了，而用createjs的话，我可以直接使用drawRoundRectangle方法，我还可以在画小方块的时候就给它（仅给它）绑上click事件，特别方便。

• 第二个问题，如何随着关卡增加，同时增加游戏难度？

前面说过，难度的增加是通过增加"小方块的个数"和减少"不同颜色相对普通颜色增加的亮度比例"，那么如何反映到代码上呢？

可以用一个数组保存每关的每行小方块个数（列方向上也是这个数），如：

var levs= [2, 3,  4, 4, 5, 5, 5, 6, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9]

这样每关的小方块总数就分别是：2*2，3*3，4*4，4*4......

每次要画小方块的时候，就从这个数组里取值，如第三关就是每行levs[2]个，每列也是levs[2]个，即共4*4个。

...
drawRects:function() {
    gameView.removeAllChildren();//移除上次绘制
    var num = this.levs[this.curLev];//当前关卡每行列应有的方块数
    //计算每个小方块的宽度，所有小方块宽度加上两两之间的间隔构成整个stage（绘制舞台）的宽度
    var width = (stage.canvas.width - gap * (num - 1)) / num;
    var height = (stage.canvas.height - gap * (num - 1)) / num;
    var color = randomColor();//获取随机色
    var pickedX = _randomPick(0, num - 1);//随机指定特殊方块的位置
    var pickedY = _randomPick(0, num - 1);
    for (var i = 0; i < num; i++) {
        for (var j = 0; j < num; j++) {
            var rec;
            if (i === pickedX && j === pickedY) {
                rec = new Rectangle(width, height, color, .5, Rectangle.TYPE_PICKED);//创建特殊方块
                (function (me) {
                        rec.addEventListener('click', function () {
                        me.nextLevel();//进入下一关
                 })
            })(this);//注意闭包
            } else {
                        rec = new Rectangle(width, height, color, .5, Rectangle.TYPE_NORMAL);//创建普通方块
            }
            gameView.addChild(rec);
            rec.x = (width + gap) * i;//偏移&&铺开
            rec.y = (height + gap) * j;
        }
    }
}
...

需要注意添加监听事件的地方，一开始写的时候没注意直接用的this.nextLevel()，直接去window对象上找了，结果nextLevel方法自然是undefined。解决的办法是创建一个立即执行函数，传入this。

那么如何设置亮度提升比例呢？

当然也可以用类似上面的方法，用另一个数组保存这些比例。但是我不想写那么死，还是用一个函数实现吧：

在20%与60%间取值。

...
getLightenRatio: function () {  //由当前关卡数获取亮度增加比例
    var minValue = 0.2, maxValue = 0.6;
    return maxValue - (maxValue - minValue) / (this.levs.length - 1) * this.curLev;
    }
...

• 第三个问题,如何计算得分？如何结束游戏？如何获得鉴定级别(或者说头衔）？

关于得分这里我都是做的简单处理，过一关则加一分。

关于结束方式，因为这个游戏里没有僵尸没有炸弹，唯一的结束方式就只能是时间用完啦。

关于鉴定级别，如我们玩的时候看到的“色狼lv23”是如何得到的呢？

还是定义一个数组，保存了这些级别的名称。

var title=["瞎子", "色盲", "色郎", "色狼", "色鬼", "色魔", "超级色魔", "变态色魔", "孤独求色"];

显示游戏结果的时候，就是从这个数组里取出某值，具体取哪个值，就看自己定义的规则了。

比如说，我认为得分15分或以下的基本就算瞎子了，之后每加五分晋级一次，比如15分对应“瞎子”，16-20分对应“色盲”，21-25对应“色狼”，以此类推下去。

唯一需要注意的就是边界控制，不要超出数组最大索引。

• 第四个问题,暂停以及继续游戏应该做些什么？

用一个变量保存剩余时间leftTime，缺省值是60，即一分钟后游戏结束.

如果没有暂停功能，那么处理起来很简单，游戏刚进入时，初始化计时器，一秒tick一次，只要在计时器的tick事件里递减这个leftTime即可，当leftTime小于0，结束。

但加入暂停功能也不麻烦，只要手动设置一个标记isPaused，在tick事件的最开始判断这个标记的值，false则执行事件的递减。暂停按钮的点击即是改变这个变量的值为true，继续游戏按钮的点击即是改变其为false。

...
pause: function () { //暂停游戏
    this.isPaused = true;
},
resume: function () { //继续游戏
    this.isPaused = false;
},
...

tick事件内部：

if (!me.isPaused) {
    --me.leftTime;
    if (me.leftTime === 0) {
        me.gameover();
    }
}

• 第五个问题，“再来一次”该做些什么？

应该回到游戏界面并将环境重置，所以之前的代码中应该提供一个reset方法，这里调用这个方法即可。

好了，这样下来，整个游戏差不多就完成了，还是戳这里可以玩~→看你有多色

戳这里有代码~→github-sheila1227，代码遵循AMD规范，入口文件如下：

<script src="http://libs.tan14.net/require.js/2.1.14/require.min.js" data-main="js/app.js"></script>

入口文件中做一下配置：

requirejs.config({
    "baseUrl": "./js",
    "paths": {
        "app": "app",
        "jquery": "//libs.baidu.com/jquery/2.0.0/jquery.min" ,//结尾不要加.js扩展名
        "createjs": "easeljs.min"
    }
});

// Load the welcome module to start the app
requirejs(["welcome"], function(welcome) {
welcome.init('.page-welcome.page');
});

这里有个问题是，因为jQuery支持AMD,所以我可以直接require，但是createjs不支持AMD，所以我直接用script标签直接引入，但我感觉是不是应该用define包一下，让它也可以支持requirejs的方式。这个问题，留着后面查查资料再解决吧~

有任何不妥之处或错误欢迎各位指出，不胜感激~