用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;

};

　　首先我们先来看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:概述中有完整的源码链接

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

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单
系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** ...
用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面
游戏主界面,同时也是主程序,包括sprite的生成加入以及游戏状态的控制. 下面同样贴下源码再讲解; /** * Power by html5中文网(html5china.com) * author: ...
用cocos2d-html5做的消除类游戏《英雄爱消除》——概述
在bbs.html5china.com论坛学习了MV和老马的小熊蘑菇后我也自己模仿他们做了这样子一个游戏,权当技术交流学习,现在附上游戏截图和源码. 游戏截图: 1.系统菜单界面: 2.游戏界面 3. ...
用cocos2d-html5做的消除类游戏《英雄爱消除》(4)——游戏结束
游戏结束界面: 在前面几个教程中,这个界面的创作所需要的知识点基本我们都讲过了,这里就说下用户数据的缓存吧,也是先来看下源码 /** * Power by html5中文网(html5china.co ...
消除类游戏(js版)
最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...
ccf题库中2015年12月2号消除类游戏
题目如下: 问题描述消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这 ...
CCF2015122消除类游戏（C语言版）
问题描述消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...
ccf消除类游戏
问题描述消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...
CCF CSP 201512-2 消除类游戏
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201512-2 消除类游戏问题描述消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行 ...

随机推荐

【BIEE】10_资料库查看数据报错
导入元数据后,在资料库右键物理表名,[查看数据]报错: 出现这个问题,没搞明白是为啥- 后来百度意外发现一个方法,修改NQSConfig.INI文件即可解决问题那么就开始来搞定这个问题 [1]打开路 ...
关于清理 mac 其他文件的的方法
mac 用于开发使用时间长硬盘会越来越小,速度越来越慢的, 亦是花了几分钟研究怎么清理系统的缓存, 方法: 1,到 https://www.omnigroup.com/more/ 安装 OmniDis ...
跨discuz站获取
1.在需要取得formhash的页面加入下面js代码,还需要jquery库. <script lanuage="javascript"> $(function(){ $ ...
static 关键字的使用，静态和非静态类的区别
直接以一个例子说明: using System; using System.Collections.Generic; using System.Diagnostics; using System.IO ...
转： Appium ---移动自动化测试
转自:http://www.cnblogs.com/nbkhic/p/3803830.html 什么是appium? 下面这段介绍来自于appium的官网. Appium is an open-sou ...
hdu5399
题意:给你m行个长度为 n的序列或者-1 -1代表这一行的序列不确定,然后让你找出有多少种情况满足对于每一个i 有f1(f2(⋯fm(i)))=i: 思路:分为三种情况:1,每行序列中有反复数输出0: ...
css 温故而知新 1px的问题
解决方法1: //border @mixin border($pos, $color) { content: ""; position: absolute; transform-o ...
brew Error: Formulae found in multiple taps
Mac PHP brew install php56-apcu Error: Formulae found in multiple taps: * homebrew/php/php56-apcu * ...
poj3411--Paid Roads(bfs+状压)
题目链接:id=3411">点击打开链接题目大意:有n个点.m条有向边,经过边须要一个花费,a b c p q代表 a到b的一条道路,假设经过这条边之前经过c点,那么须要p的花费,否 ...
局域网简单的SVN服务器的搭建
最近组织在做一个比较大的项目,需要多人参与配合,经常会对项目文件增删查改,因此使用了SVN作为项目管理工具.但大家都很"盲",所以搭建SVN服务器的任务就落在了我这 ...

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

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

随机推荐

热门专题