Egret开发《消灭方块》后记（三）点击事件那点事

        追求好的性能就要对代码很苛刻，效率都是一点一点挤出来的，蚊子肉也是肉，但是这一点点的积累就会带来一个很流畅的游戏。本篇说的是关于点击事件的优化，对效率的提升可能不是那么明显，只是为你提供一种用更高效的方式解决问题的思路，希望能对你有所启发。

怎么来减少事件侦听

        对于《消灭方块》这个游戏，怎么判断玩家点击的是那个方块呢？假如让你来实现你会怎么做呢？是给每个方块添加一个点击事件吗？如果你想到的是这一种之外的方式，那么恭喜你，你已经是个注重效率的程序员了。

        那么讲一下《消灭方块》的点击判断吧。方块不接受任何事件，但是在方块下面放一个接受点击的交互层，长和宽和方块总体的宽高保持一致，玩家点击其实是点击的交互层，这样的话我捕获交互层点击事件的localX和localY，数学运算一下就可以知道点击的是那个方块，具体看下图：

从点击坐标计算点击方块索引的代码：

    private getTouchIndexByPos(localX, localY):number
    {
        return Math.floor(localX / (GameConfig.BLOCK_WIDTH + GameConfig.BLOCK_MARGIN)) +
            Math.floor(localY / (GameConfig.BLOCK_WIDTH + GameConfig.BLOCK_MARGIN)) * GameSettings.COLUMN;
    }

        这样我只需要一个点击事件就很好地实现点击方块的判断。这种方法的好处：首先执行效率高，做一点数学运算的消耗可以忽略不计了，其次玩家永远都不会点错方块（比如方块下落的时候被点击也不会被误判）。突然有种感觉，玩家玩游戏只是在玩数组里的数据而已。

        如果你还有更好的方式，请留言一起讨论。

点击事件还可以这么用

        做过网页的朋友一定会记得HTML有个“热点图片”，这很好用啊，当然要借鉴过来啊。“热点图片”就是一张图片，点击不同的区域触发不同的事件而已。《消灭方块》最后结算界面就是个“热点图片”，左右两边的“按钮”是和背景图在一起的。

这其实是我想偷懒的结果…这样就不用切图再做按钮再拼UI了，对吗？

实现代码：

class HotspotBitmap extends egret.Bitmap
{
    private _hotspot:any[];
    public constructor()
    {
        super();
        this._hotspot = [];
        this.touchEnabled = true;
        this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouch, this);
    }

    public addHotspotArea(rect:egret.Rectangle, callBack:Function, thisObj:any, para?:any):void
    {
        this._hotspot.push({"rect":rect, "callBack":callBack, "thisObj":thisObj, "para":para});
    }

    private onTouch(e:egret.TouchEvent):void
    {
        var x:number = e.localX;
        var y:number = e.localY;
        var tempObj:any;
        for(var i:number = 0;i < this._hotspot.length;i ++)
        {
            tempObj = this._hotspot[i];
            if(tempObj.rect.contains(x, y))
            {
                if(tempObj.para)
                    tempObj.callBack.call(tempObj.thisObj, tempObj.para);
                else
                    tempObj.callBack.call(tempObj.thisObj);
            }

        }
    }
}