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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8137字，纯文字阅读大概需要12分钟。

内容图文

用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)) returnfalse;
        this.beginPoint = touch.getLocation();
//        this.setZIndex(100);this.flash = true;
        this.setScale(1.2);
        returntrue;
    },
    //触摸移动
    onTouchMoved:function (touch, event) {
        if (!this.containsTouchLocation(touch)) returnfalse;
        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);}
            }
            returnfalse;
        }
    },
    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)returnfalse;
        var leftBlock = Block.getBlock(this.pointX - 1,this.pointY);
        if(leftBlock && leftBlock.name == this.name){
            this.destroy();
            leftBlock.destroy();
            returntrue;
        }
        returnfalse;
    },
    checkRight:function(){
        if(this.pointX == LLK.LEVEL.x - 1)returnfalse;
        var rightBlock = Block.getBlock(this.pointX + 1,this.pointY);
        if(rightBlock && rightBlock.name == this.name){
            this.destroy();
            rightBlock.destroy();
            returntrue;
        }
        returnfalse;
    },
    checkUp:function(){
        if(this.pointY == LLK.LEVEL.y - 1)returnfalse;
        var upBlock = Block.getBlock(this.pointX,this.pointY+1);
        if(upBlock && upBlock.name == this.name){
            this.destroy();
            upBlock.destroy();
            returntrue;
        }
        returnfalse;
    },
    checkDown:function(){
        if(this.pointY == 0)returnfalse;
        var downBlock = Block.getBlock(this.pointX,this.pointY - 1);
        if(downBlock && downBlock.name == this.name){
            this.destroy();
            downBlock.destroy();
            returntrue;
        }
        returnfalse;
    }
 
});
 
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];
　　　　}
　　}
　　returnnull;
};

　　首先我们先来看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];
　　　　}
　　}
　　returnnull;
};

　　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)) returnfalse;
        this.beginPoint = touch.getLocation();
//        this.setZIndex(100);this.flash = true;
        this.setScale(1.2);
        returntrue;
    },
    //触摸移动
    onTouchMoved:function (touch, event) {
        if (!this.containsTouchLocation(touch)) returnfalse;
        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);}
            }
            returnfalse;
        }
    },
    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方法结束游戏。

原文：http://www.cnblogs.com/jackyWHJ/p/3778270.html

内容总结

以上是互联网集市为您收集整理的用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现全部内容，希望文章能够帮你解决用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1190133.html

来源：【匿名】

【上一篇】cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第九步---英雄发动攻击【下一篇】cocos2d-js跨域访问问题，cocos2d-js请求网络数据

更多 ►

【用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现】教程文章相关的互联网学习教程文章

Cocos2d-x之实现动作的反转

Cocos2d-x之实现动作的反转 //实现动作的反转，即向相反方向移动 //原动作是向右下角移动的label->runAction(MoveBy::create(1, Point(-50, -50))); //反转之后原动作是向右上角移动的label->runAction(MoveBy::create(1, Point(-50, -50))->reverse());原文：http://www.cnblogs.com/dudu580231/p/4373559.html

Cocos2dx 3.2 之实现精灵图片放大功能【图】

原文地址 http://blog.csdn.net/jhonlight/article/details/38408351 今天一个群友问我：我Scene里放置一个Layer，Layer盛放一张图片，即背景图片，我想更换这张图片，而且要求带有系统提供的切换Scene 淡入淡出的效果，于是我用Director类的切换用系统提供的切换动画包装的scene，但是效果是整个scene都被切换了，而我想要的是只有背景变化，其余的不变。大家都知道，这样做当然不可以，Director（...

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

Cocos2d-x3.0游戏实例之《别救我》第八篇——TiledMap实现关卡编辑器

好吧，我真心完全搞不懂，我现在只不过是写了3个类而已，怎么就已经到第八篇了？我感觉我说话已经够简单明了毫不唠叨了，真是奇怪。（小若：我噗，噗噗！）好吧，既然现在主角已经能出现并且进行操作了，那，也是时候让怪物出场了。让怪物出现太简单了，不就是写一个Monster类，然后创建刚体，让它可以和主角碰撞，然后让主角扣血或者加血么？没错，确实就是这样的，但是，这不是重点，我想介绍的是，利用关卡编辑器来创建所有要...

cocos2d-x3.1 下实现相似Android下ExpandListView的效果【代码】【图】

在左Android開始有SDK提供ExpandListView的可扩展列表，而在iOS下有很多第三方做好的Demo，这里我是參照iOS下RATreeView这个第三方库实现的。本文代码：须要在3.1以上版本号执行。假设是用3.0版本号须要将Vec2换成Piont原文地址：http://blog.csdn.net/qqmcy/article/details/29559241代码下载：http://download.csdn.net/detail/qqmcy/7469387以下说下用法：DJDataObject.h ? 数据模型类// // DJDataObject.h // testthirdone /...

基于Cocos2dx + box2d 实现的愤慨的小鸟Demo

1. Demo初始界面2. 游戏界面3. 精确碰撞检測4. 下载压缩文件文件夹AngryBird source 愤慨的小鸟Demo源码，基于Cocos2dx C++，以及box2d技术。 run可运行程序文件夹点击打开链接原文：http://www.cnblogs.com/blfbuaa/p/6818175.html

cocos2d-x 3.4之排行榜的实现【图】

***************************************转载请注明出处：http://blog.csdn.net/lttree********************************************~~~~五一假期啊~~~~这个排行榜，我搜过很多，但至今都没找到。。。我就自己研究了下，用TableView+UserDefault来实现，其中还用到了输入文本框 CCTextFieldTTF，可以实现存储。应该算是首发了~.~先看一下，实际效果吧：试验品，所以界面有点渣渣。。。现在来说下实现方法，首先，要会用 UserDef...

如何在Cocos2D游戏中实现A*寻路算法(一)【图】

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;)免责申明：本博客提供的所有翻译文章原稿均来自互联网，仅供学习交流之用，请勿进行商业用途。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！该篇博客由iOS课程团队的Johann Fradj发布,他现在是一个全职开发iOS的开发者.他是Hot Apps Factory(其...

关于cocos2d-js中使用 ClippingNode 以及 BlendFunc 来实现遮罩【代码】

关于ClippingNode 以及 BlendFunc 来实现遮罩 1. ClippingNode实现遮罩首先要准备一张png有透明度的图片一张想要被遮住的图片cliper : function(frameName){//创建一个遮罩的模板var sten = new cc.Sprite(frameName);//创建一个ClippingNode 并设置一些基础属性容器宽高与模板有关var clipnode = new cc.ClippingNode();clipnode.attr({stencil:sten,anchorX:0.5,anchorY:0.5,alphaThreshold:0.8,//设置裁剪透明值阀值默认值为...

cocos2dx2.2.2登录场景中Checkbox选择框的实现【代码】【图】

在前两篇文章中，我们介绍了在注册场景中需要用到的输入框及弹出框的实现方式，这两篇文章中介绍的内容在登录场景同样会用到。而我们经常会在登录场景中见到的另一种元素就是自动登录或者记住密码的Checkbox选择框。那么，接下来就让我们看看这个选择框如何实现。首先，我们先看一下效果我们需要的就是一个Checkbox选择框，后面加上“自动登录”或者其他的文字。效果就是点击选择框或文字时，Checkbox的状态会进行切换；同时在程序...

Cocos2d-x3.1下实现相似iOS页面滑动指示圆点

原文地址：http://blog.csdn.net/qqmcy/article/details/37612457代码下载：http://download.csdn.net/detail/qqmcy/7613835SliderIndicatorLayout.h// // SliderIndicatorLayout.h // ht_mobile_cpp // // Created by 杜甲 on 14-7-9. // //#ifndef __ht_mobile_cpp__SliderIndicatorLayout__ #define __ht_mobile_cpp__SliderIndicatorLayout__#include "cocos2d.h" #include "ui/CocosGUI.h"USING_NS_CC;class SliderIndicat...

菜鸟福利 A星寻路算法 cocos2d-x实现【图】

这篇blog是翻译自iOS Tutorial Team的成员 Johann Fradj，他目前是一位全职的资深iOS开发工程师。他是HotApps Factory的创始人，该公司开发了AppCooker你是否在做一款游戏的时候想实现一种寻路算法，让一些怪兽或者游戏主角，让它们移动到特定的位置，避开墙壁和障碍物呢？如果是的话，请看这篇教程，我们会展示如何使用著名的A星寻路算法来实现它！公式表示为： f(n)=g(n)+h(n), 其中 f(n)是从初始点经由节点n到目...

Quick Cocos2dx 场景对象基类实现【代码】【图】

从使用Quick-Cocos2d-x搭建一个横版过关游戏(四)拷来个进度条类，但是由于那个类有个bug，在setProgress里面self.fill是找不到的，所以我改进了一下，代码如下： 1local Progress = class("Progress", function()2-- body 3return display.newNode()4end)5 6function Progress:ctor(background, fill)7local progress = display.newSprite(background)8local fill = display.newProgressTimer(fill, display.PROGRESS_TIMER_BAR)9 ...

cocos2dx windows phone平台下CCLabelTTF自动换行的实现(2)

前几天发过一篇文章说如何实现wp8下的CCLabelTTF如何自动换行，后来发现果如预料的那般，效果很不好，主要是非等宽字体的情况下看着很糟心，因此再修改了一版，效果要好很多了。具体实现其实就是参考initGlyphs，但是会不断的检查是否超过宽度，如果超过则自动换行。具体的直接看代码就明白了/**************************************************************************** Copyright (c) 2010 cocos2d-x.org Copyright (c) Micr...

Cocos2d-x3.1中使用万普平台实现Android平台广告添加【代码】【图】

本文使用万普广告平台往Cocos2d-x3.1项目中添加广告。万普的SDK for Cocos2d-x功能挺全的，只是官方文档的使用说明中使用的Cocos2d-x引擎是2.0.1，平台是Windows下的，年代有点久远，本文主要介绍Mac10.9.5+XCode6.0.1+Cocos2d-x使用万普添加广告。首先赞一下万普的工作人员，头一天晚上注册使用，第二天就打电话问候有没有问题~1、注册万普账号http://www.waps.cn，万普其实可以不用登陆注册，同样可以下载相关SDK。2、下载SDK下载...

COCOS2D - 最热教程

cocos2dx资源异步加载 cocos2dxA*+tiledMap cocos2dx项目接入爱贝第三方支付sdk遇到...Cocos2d-x3.0中容器介绍（cocos2d::Vec...cocos2dx lua bug之module 'lsqlit...Cocos2dx-JS绑定C++大致流程 android – 在哪里可以找到使用Cocos2D...Cocos2d-x教程(10)Cocos2d-x学习笔记（2）Cocos2d-x学习笔记（12）（CCControlSw...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现】教程文章相关的互联网学习教程文章

COCOS2D - 最新教程

COCOS2D - 最热教程