Egret – 2D跑酷金币功能

我们已经可以开始跑酷了,现在我们需要一个金币层,用来显示跑酷地图上的金币,这里需要注意的是金币的显示需要与地图背景、道路相吻合。金币层如下图所示

普通加金币

  • 点与矩形碰撞
  • /** 
     *  
     * @param x1 点 
     * @param y1 点 
     * @param x2 矩形view x 
     * @param y2 矩形view y 
     * @param w  矩形view 宽 
     * @param h  矩形view 高 
     * @return 
     */ 
    public isCollisionPoint(x1:number, y1:number, x2:number, y2:number, w:number, h:number): boolean {
        if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) {  
            return true;
        }
        return false;
    }
    
  • 检测两个矩形是否碰撞
  • /** 
     * 检测两个矩形是否碰撞 
     * @return 
     */ 
    public isCollisionWithRect(x1:number, y1:number, w1:number, h1:number,
            x2:number, y2:number, w2:number, h2:number) : boolean{
        if (x1 >= x2 && x1 >= x2 + w2) {  
            return false;  
        } else if (x1 <= x2 && x1 + w1 <= x2) {  
            return false;  
        } else if (y1 >= y2 && y1 >= y2 + h2) {  
            return false;  
        } else if (y1 <= y2 && y1 + h1 <= y2) {  
            return false;  
        }
        return true;
    }
    

    我们需要判断逗小鸭和金币的外边矩形碰撞,我们需要绘制下对象外边框

    /*
     * Drag Object
     */
    public debugDraw(obj:egret.DisplayObject, name, color, offx:number, offy:number, is_center:boolean) {
        if (this.app.root.getChildByName(name) != undefined) {
            this.app.root.removeChild(this.app.root.getChildByName(name));
        }
        var shp:egret.Shape = new egret.Shape();
        shp.name = name;
        shp.graphics.beginFill( color, 1);
        if (is_center) {
            shp.graphics.drawRect( (obj.x + offx) - obj.width / 2, (obj.y + offy) - obj.height / 2, 
                obj.width, obj.height );
        } else {
            shp.graphics.drawRect( (obj.x + offx), (obj.y + offy), 
                obj.width, obj.height );
        }
        
        shp.graphics.endFill();
        shp.alpha = 0.5
        this.app.root.addChildAt(shp, this.app.root.numChildren);
    }
    //////
    public CheckCollision() {
        var view:egret.DisplayObjectContainer = (this.app.viewManager.getView(ViewConst.Player));
        var dxy = view.getChildByName("DXY");
        App.DebugUtils.debugDraw(dxy, "dxy", "0xff0000", 0, 0, true);
        var num = this.coinContent.numChildren;
        var id_index = 0;
        for (var i = 0; i < num; i++) {
            var c_content:egret.DisplayObjectContainer = this.coinContent.getChildAt(i);
            for (var j = 0; j < c_content.numChildren; j++) {
                var coin = c_content.getChildAt(j);
                App.DebugUtils.debugDraw(coin, "coin" + id_index, "0x00ff00", c_content.x + this.coinContent.x, 
                    c_content.y + this.coinContent.y, false);
                id_index++;
            }
        }
    }
    

    运行结果如下图所示


    在跳起来的时候两个矩形发生了碰撞,下一步我们就来处理下

    ...
    var dxy_rect = App.MathUtils.getRect(dxy, 0, 0, true);
    var coin_rect = App.MathUtils.getRect(coin, c_content.x + this.coinContent.x, 
        c_content.y + this.coinContent.y, false);
    if (App.MathUtils.isCollisionWithRect(dxy_rect[0], dxy_rect[1], dxy_rect[2], dxy_rect[3],
    coin_rect[0], coin_rect[1], coin_rect[2], coin_rect[3])) {
        coin.parent.removeChild(coin);
    }
    ...
    


    下一章来完成加吸金币工具的功能

    欢迎留言

    avatar
      Subscribe  
    Notify of