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

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

我们先来看下源码吧
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——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;
};
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
  首先我们先来看Block的几个重要属性:name是block的名字属性,用来判断相邻的block是不是同种类型,active是block是否存在界面上的标识,pointX,pointY是block的位置坐标。
接下来我们看构造方法ctor
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
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);
    },
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现

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

  接下来看getBlock这个方法,它根据传入的坐标位置获取相对应的block,而获取的这个block前提是它的active属性为true,也就是获取到的是还存在界面上的block,不存在的话就返回null。
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
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;
};
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
  onTouchBegan、onTouchMoved、onTouchEnded是对触摸事件的相应,在onTouchBegan和onTouchMoved中,我们需要先行判断当前的触点是否存在与sprite上,所有我们有了containsTouchLocation这个方法 ,在刚触摸的瞬间我们把sprite放大并且把当前的flash标识设置为true,这个flash标识是用来判断我们的触摸拖动是否已经结束(其实也应该可以不用这么做,但是我在调试中发现了个bug,所以就设置了这个标识),而在onTouchMoved中,我们根据拖动的位移判断当前是往那个方向移动,然后移动Block。移动结束后,我们在onTouchEnded把Block的大小还原。
 
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——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;
    },
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
  而在我们移动方块后,我们需要判断发生位移的方块是否在上下左右4个方向上存在相同的方块,这个通过checkTheSame来实现,具体看源码
checkTheSame:function(){
        this.checkLeft() || this.checkUp()||this.checkRight()||this.checkDown();
},
之后是相同的方块销毁隐藏
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
//销毁隐藏
    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();
        }
    },
用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
在该方法中,我们隐藏Block并且在Block的位置添加爆炸效果然后播放音效,之后,我们的Block总计数减1,然后在计数为0的时候游戏结束,调用主程序的onGameOver方法结束游戏。
 
 

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

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

上一篇:ITFriend网站内测公测感悟


下一篇:Newtonsoft.Json 与 DataTable的相互转换