用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

Block可以说是这个游戏的核心类，它除了包含自身的一些属性和方法外还添加了对触摸事件的响应。

我们先来看下源码吧

/**
 * Power by  html5中文网(html5china.com)
 * author: jackyWHJ
 */
var Block = cc.Sprite.extend({
    id:0,
    name:"",
    active:true,
    pointX:0,
    pointY:0,
    beginPoint:null,
    flash:false,
    ctor:function (arg) {
        this._super();
        if(!arg)return;
        this.initWithSpriteFrameName(arg);
        this.name = arg;
//        cc.registerTargetedDelegate(0,true,this);
        cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this, 0, true);
    },
    //销毁隐藏
    destroy:function () {
        var explosion =Explosion.getOrCreateExplosion();
        explosion.setPosition(this.getPosition());
//        SparkEffect.getOrCreateSparkEffect(this.getPosition());
        if(LLK.SOUND){
            cc.AudioEngine.getInstance().setMusicVolume(0.7);
            cc.AudioEngine.getInstance().playEffect(s_explodeEffect_mp3);
        }
　　　　　this.setVisible(false);
        this.active = false;
        LLK.COUNT --;
        if(LLK.COUNT <= 0/* || 1*/){
            g_sharedGameLayer.onGameOver();
        }
    },

    //判断触摸点是否在图片的区域上
    containsTouchLocation:function (touch) {
        //获取触摸点位置
        var getPoint = touch.getLocation();

        //物体当前区域所在的位置
        var contentSize  =  this.getContentSize();
        var myRect = cc.rect(0, 0, contentSize.width, contentSize.height);
        myRect.origin.x += this.getPosition().x;
        myRect.origin.y += this.getPosition().y;
        //判断点击是否在区域上
        return cc.rectContainsPoint(myRect,getPoint);
    },
    //刚触摸瞬间
    onTouchBegan:function (touch, event) {
        if (!this.containsTouchLocation(touch)) return false;
        this.beginPoint = touch.getLocation();
//        this.setZIndex(100);
        this.flash = true;
        this.setScale(1.2);
        return true;
    },
    //触摸移动
    onTouchMoved:function (touch, event) {
        if (!this.containsTouchLocation(touch)) return false;
        var touchPoint = touch.getLocation();
        var xDist = touchPoint.x - this.beginPoint.x,yDist = touchPoint.y - this.beginPoint.y;
        //移动距离超过10个像素位才有效
        if((Math.abs(xDist) >= 10 || Math.abs(yDist) >= 10)&&this.flash){
            this.flash = false;
            var block = this;
            if(Math.abs(xDist) > Math.abs(yDist)){
                if(xDist > 0){this.moveRight(block);}
                else{this.moveLeft(block);}
            }
            else{
                if(yDist > 0){this.moveUp(block);}
                else{this.moveDown(block);}
            }
            return false;
        }
    },
    onTouchEnded:function(touch,event){
        this.setScale(1);
        this.flash = true;
    },

    moveLeft:function(block){
        if(block.pointX == 0)return;
        var leftBlock = Block.getBlock(block.pointX - 1,block.pointY);
        if(leftBlock){
            leftBlock.pointX = block.pointX;
            leftBlock.setPosition(block.pointX*60,block.pointY*60+30);
            leftBlock.checkTheSame();
        }
        block.pointX --;
        block.setPosition(block.pointX*60,block.pointY*60+30);
        block.checkTheSame();
    },
    moveRight:function(block){
        if(block.pointX == LLK.LEVEL.x - 1)return;
        var rightBlock = Block.getBlock(block.pointX + 1,block.pointY);
        if(rightBlock){
            rightBlock.pointX = block.pointX;
            rightBlock.setPosition(block.pointX*60,block.pointY*60+30);
            rightBlock.checkTheSame();
        }
        block.pointX ++;
        block.setPosition(block.pointX*60,block.pointY*60+30);
        block.checkTheSame();
    },
    moveUp:function(block){
        if(block.pointY == LLK.LEVEL.y - 1)return;
        var upBlock = Block.getBlock(block.pointX,block.pointY+1);
        if(upBlock){
            upBlock.pointY = block.pointY;
            upBlock.setAnchorPoint(cc.p(0, 0));
            upBlock.setPosition(block.pointX*60,block.pointY*60+30);
            upBlock.checkTheSame();
        }
        block.pointY ++;
        block.setPosition(block.pointX*60,block.pointY*60+30);
        block.checkTheSame();
    },
    moveDown:function(block){
        if(block.pointY == 0)return;
        var downBlock = Block.getBlock(block.pointX,block.pointY - 1);
        if(downBlock){
            downBlock.pointY = block.pointY;
            downBlock.setPosition(block.pointX*60,block.pointY*60+30);
            downBlock.checkTheSame();
        }
        block.pointY --;
//        block.setAnchorPoint(cc.p(0, 0));
        block.setPosition(block.pointX*60,block.pointY*60+30);
        block.checkTheSame();
    },
    checkTheSame:function(){
        this.checkLeft() || this.checkUp()||this.checkRight()||this.checkDown();
    },
    checkLeft:function(){
        if(this.pointX == 0)return false;
        var leftBlock = Block.getBlock(this.pointX - 1,this.pointY);
        if(leftBlock && leftBlock.name == this.name){
            this.destroy();
            leftBlock.destroy();
            return true;
        }
        return false;
    },
    checkRight:function(){
        if(this.pointX == LLK.LEVEL.x - 1)return false;
        var rightBlock = Block.getBlock(this.pointX + 1,this.pointY);
        if(rightBlock && rightBlock.name == this.name){
            this.destroy();
            rightBlock.destroy();
            return true;
        }
        return false;
    },
    checkUp:function(){
        if(this.pointY == LLK.LEVEL.y - 1)return false;
        var upBlock = Block.getBlock(this.pointX,this.pointY+1);
        if(upBlock && upBlock.name == this.name){
            this.destroy();
            upBlock.destroy();
            return true;
        }
        return false;
    },
    checkDown:function(){
        if(this.pointY == 0)return false;
        var downBlock = Block.getBlock(this.pointX,this.pointY - 1);
        if(downBlock && downBlock.name == this.name){
            this.destroy();
            downBlock.destroy();
            return true;
        }
        return false;
    }

});

Block.getBlock = function(pointX,pointY) {
　　for (var j = 0,len = LLK.map.length; j < len; j++) {
　　　　if (LLK.map[j].active && pointX == LLK.map[j].pointX && pointY == LLK.map[j].pointY)
　　　　{
　　　　　　return LLK.map[j];
　　　　}
　　}
　　return null;
};

　　首先我们先来看Block的几个重要属性：name是block的名字属性，用来判断相邻的block是不是同种类型，active是block是否存在界面上的标识，pointX,pointY是block的位置坐标。

接下来我们看构造方法ctor

ctor:function (arg) {
        this._super();
        if(!arg)return;
        this.initWithSpriteFrameName(arg);
        this.name = arg;
//        cc.registerTargetedDelegate(0,true,this);
        cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this, 0, true);
    },

　　构造方法中，使用initWithSpriteFrameName方法根据传进来的参数初始化sprite，同时，给sprite的name属性赋值，之后添加该sprite的触摸监听事件。

　　接下来看getBlock这个方法，它根据传入的坐标位置获取相对应的block，而获取的这个block前提是它的active属性为true,也就是获取到的是还存在界面上的block，不存在的话就返回null。

Block.getBlock = function(pointX,pointY) {
　　for (var j = 0,len = LLK.map.length; j < len; j++) {
　　　　if (LLK.map[j].active && pointX == LLK.map[j].pointX && pointY == LLK.map[j].pointY)
　　　　{
　　　　　　return LLK.map[j];
　　　　}
　　}
　　return null;
};

　　onTouchBegan、onTouchMoved、onTouchEnded是对触摸事件的相应，在onTouchBegan和onTouchMoved中，我们需要先行判断当前的触点是否存在与sprite上，所有我们有了containsTouchLocation这个方法 ，在刚触摸的瞬间我们把sprite放大并且把当前的flash标识设置为true，这个flash标识是用来判断我们的触摸拖动是否已经结束（其实也应该可以不用这么做，但是我在调试中发现了个bug，所以就设置了这个标识），而在onTouchMoved中，我们根据拖动的位移判断当前是往那个方向移动，然后移动Block。移动结束后，我们在onTouchEnded把Block的大小还原。

    //判断触摸点是否在图片的区域上
    containsTouchLocation:function (touch) {
        //获取触摸点位置
        var getPoint = touch.getLocation();

        //物体当前区域所在的位置
        var contentSize  =  this.getContentSize();
        var myRect = cc.rect(0, 0, contentSize.width, contentSize.height);
        myRect.origin.x += this.getPosition().x;
        myRect.origin.y += this.getPosition().y;
        //判断点击是否在区域上
        return cc.rectContainsPoint(myRect,getPoint);
    },
    //刚触摸瞬间
    onTouchBegan:function (touch, event) {
        if (!this.containsTouchLocation(touch)) return false;
        this.beginPoint = touch.getLocation();
//        this.setZIndex(100);
        this.flash = true;
        this.setScale(1.2);
        return true;
    },
    //触摸移动
    onTouchMoved:function (touch, event) {
        if (!this.containsTouchLocation(touch)) return false;
        var touchPoint = touch.getLocation();
        var xDist = touchPoint.x - this.beginPoint.x,yDist = touchPoint.y - this.beginPoint.y;
        //移动距离超过10个像素位才有效
        if((Math.abs(xDist) >= 10 || Math.abs(yDist) >= 10)&&this.flash){
            this.flash = false;
            var block = this;
            if(Math.abs(xDist) > Math.abs(yDist)){
                if(xDist > 0){this.moveRight(block);}
                else{this.moveLeft(block);}
            }
            else{
                if(yDist > 0){this.moveUp(block);}
                else{this.moveDown(block);}
            }
            return false;
        }
    },
    onTouchEnded:function(touch,event){
        this.setScale(1);
        this.flash = true;
    },

　　而在我们移动方块后，我们需要判断发生位移的方块是否在上下左右4个方向上存在相同的方块，这个通过checkTheSame来实现，具体看源码

checkTheSame:function(){
        this.checkLeft() || this.checkUp()||this.checkRight()||this.checkDown();
},

之后是相同的方块销毁隐藏

//销毁隐藏
    destroy:function () {
        var explosion =Explosion.getOrCreateExplosion();
        explosion.setPosition(this.getPosition());
//        SparkEffect.getOrCreateSparkEffect(this.getPosition());
        if(LLK.SOUND){
            cc.AudioEngine.getInstance().setMusicVolume(0.7);
            cc.AudioEngine.getInstance().playEffect(s_explodeEffect_mp3);
        }
　　　　 this.setVisible(false);
        this.active = false;
        LLK.COUNT --;
        if(LLK.COUNT <= 0/* || 1*/){
            g_sharedGameLayer.onGameOver();
        }
    },

在该方法中，我们隐藏Block并且在Block的位置添加爆炸效果然后播放音效，之后，我们的Block总计数减1，然后在计数为0的时候游戏结束，调用主程序的onGameOver方法结束游戏。

 

 

下面是几个主要功能的教程

用cocos2d-html5做的消除类游戏《英雄爱消除》——概述

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面

用cocos2d-html5做的消除类游戏《英雄爱消除》(4)——游戏结束

ps:概述中有完整的源码链接