用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行 ...

随机推荐

ping百度不通的解决方案
1.ping www.baidu.com unknow baidu.com 第一步,确定是否能ping通网关第二步,确定是否能直接ping通外网如ping 8.8.8.8 第三步,如果上面两个都 ...
端口监听与telnet
例一: 明明端口已经监听了,为什么远程的telnet连接不上. 远程机器 telnet 10.10.1.85 53 就是进不去. Linux 防火墙一关,ok service iptables sto ...
Hadoop eclipse插件使用过程中出现的问题
http://download.csdn.net/detail/java2000_wl/4326323 转自http://www.ithao123.cn/content-945210.html 由于h ...
”ftp使用dos命令“
ftp不能使用dos命令,ftp有专用的命令. 在批处理文件中,如果用到dos命令获取信息(比如:系统日期),将用获取的信息,输出到ftp脚本文件中,然后执行ftp脚本文件. set yyyy=%DA ...
WebService学习小结
基于web的服务,服务器整理资源供多个客户端应用访问,是一种多个跨平台跨语言的应用间通信整合的方案使用场景:天气预报.股票.地图,火车票 schema约束复习 <!-- book.xsd,定义 ...
[译] JavaScript 的事件循环
译者注本译文基本是按原文的意思来翻译,但对于 JavaScript 的事件循环,个人感觉还是 Philip Roberts 的视频讲解更形象些,思路和本文大致相同,不过他把事件表理解为 Web AP ...
调用iPhone的短信
不传递短信内容,可以调用下面的方法: [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"sms://4664 ...
ESXi安装iso镜像添加驱动（esxi6.5，6.7）
准备工作:1.安装 Windows PowerShell 3.0 (需要启用Windows AutoUpdate服务,安装完毕计算机需要重启) https://www.microsoft.com/en ...
[ Laravel 5.6 文档 ]laravel数据库操作分页(自定义分页实现和自定义分页样式)
简介在其他框架中,分页可能是件非常痛苦的事,Laravel 让这件事变得简单.易于上手.Laravel 的分页器与查询构建器和 Eloquent ORM 集成在一起,并开箱提供方便的.易于使用的.基 ...
web开发中比较常用的html标签
作为一名web开发人员,总结了一下经常用到的html标签,如下:<html> <head>  <me ...

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

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

随机推荐

热门专题