<cocos2dx for window phone>一个简单的打地鼠游戏

免责声明：本文章由fengyun1989创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

写在前面：最近两个月比较忙，很久没更新教程了。这么些日子，发生了不少事，WP8发布了。我的T8788也被彻底抛弃了。。。win8也RP版了。前景未卜啊。肯定不少人在迷茫了吧。我觉得呢，都是浮云，语言只是工具，能够一通百通才是王道，微软不行大不了换IOS，Android。接下来的一段时间，估计会写些win8的教程。我感觉win8和WP8有种莫名的联系，不过也道不清说不明。反正就顺着感觉来了。

本次教程写一个简单的打地鼠游戏。如果你对cocos2d-x编程不了解，可以先阅读《用cocos2d-x做一个简单的windows phone 7游戏》系列文章。不过，如果你有相关的经验就另当别论了。

程序截图：

思路简介：

　　打地鼠主要是问题就在于地鼠出头和打地鼠的点击处理。地鼠出头有两种方法，一种是用动画，一种是用Z轴的纵向效果。动画效果的方法Nowpaper前段时间就写了这么一篇《Cocos2d-x for WindowsPhone:开发一个打地鼠游戏》，我想就不在这里啰嗦了。懒得再将这些重复的内容在做一遍。这里就介绍下Z轴的方法。

　　　　

　　　 只要把前景分为3块。分为上中下三块，在洞的中心分开。添加到层的时候设置Z轴，最下的最前，最上的最后。最后后的设置一块黑色的背景。两块图之间留着空间来让地鼠Sprite进行move动作。这样就能产生地鼠从洞中钻出的视觉效果了。

　　　　现在来下载需要的图片；http://dl.dbank.com/c0tayrr384

开始吧：

　　新建一个工程cocos2d的工程，命名为cocos2dWhacAMoleDemo。当然，因为是练习项目，所以OpenXLive没有用到。就去掉那个勾。然后修复引用。这些操作做了很多次了。不懂的建议看下以前的文章。

　　  然后再Classes文件夹添加一个类。命名为AttackMoleScene.cs，使之继承于CCScene。修改代码如下：

namespace cocos2dWhacAMoleDemo.Classes
{
    class AttackMoleScene:CCScene
    {
        public AttackMoleScene()
        {
            this.addChild(AttackMoleLayer.node());
        }
    }

    class AttackMoleLayer : CCLayer
    {
        public override bool init()
        {
            if (!base.init())
                return false;
            CCSize winSize = CCDirector.sharedDirector().getWinSize();
            CCSprite background = CCSprite.spriteWithFile(@"images/background");
            background.position = new CCPoint(winSize.width / 2, winSize.height / 2);
            this.addChild(background, -3);
            CCSprite grassUpper = CCSprite.spriteWithFile(@"images/grass_upper");
            grassUpper.position = new CCPoint(winSize.width / 2, winSize.height - grassUpper.contentSize.height / 2);
            this.addChild(grassUpper, -2);
            CCSprite grassMid = CCSprite.spriteWithFile(@"images/grass_mid");
            grassMid.position = new CCPoint(winSize.width / 2,
                winSize.height - grassUpper.contentSize.height - grassMid.contentSize.height / 2);
            this.addChild(grassMid, 0);
            CCSprite grassLower = CCSprite.spriteWithFile(@"images/grass_lower");
            grassLower.position = new CCPoint(winSize.width / 2, grassLower.contentSize.height / 2);
            this.addChild(grassLower, 2);
            return true;
        }

        public new static AttackMoleLayer node()
        {
            AttackMoleLayer layer = new AttackMoleLayer();
            if (layer.init())
                return layer;
            return null;
        }
    }
}

上面做了些什么呢，在层里面添加了前景。三块，细心的朋友注意到了。我addChild的时候，Z轴的参数都不一样。背景在最后，所以Z轴的值最小。每两块间留一个位置给地鼠冒头。前景的位置也是设置成上中下三个位置。这样，从Z轴的上头看下就能正好成一整块前景。

　　现在修改AppDelegate的applicationDidFinishLaunching方法：

            //CCScene pScene = cocos2dWhacAMoleDemoScene.scene();
            AttackMoleScene pScene = new AttackMoleScene();
            //run
            pDirector.runWithScene(pScene);

现在可以执行了。就可以看到不错的前景了。

那么现在来添加一个地鼠来冒一下头试试吧。

在层的init方法上面添加：

            CCSprite mole = CCSprite.spriteWithFile(@"images/mole_1");
            mole.position = new CCPoint(155,30);
            var move = CCMoveBy.actionWithDuration(2, new CCPoint(0, 100));
            var action = CCRepeat.actionWithAction(CCSequence.actions(move, move.reverse()), 5);
            mole.runAction(action);
            this.addChild(mole, 1);

添加一个地鼠到层中，并且设置它在左下角的洞里进行Move来回运动。关于这个坐标（155,30）是怎么算出来的，我用画图工具打开grass.png这个文件，用鼠标来大概获取坐标，然后用笔算下坐标。需要注意的是，cocos2d-x里面的坐标原点在左下角。而window的是在左上角。

现在编译运行，就能看到一个地鼠来回冒头了。

让地鼠随机冒头

　　我们先来思考下接下来的怎么做，怎么保存所以的地鼠精灵，怎么确定初始化坐标，怎么判断地鼠被打，然后让他消失，怎么确定洞里面有地鼠而不至于重复添加。

　　　我的方法是全部用数组来解决。比较简单。

　　 添加以下的声明到层：

        int[,] moleValue = new int[2, 3] { { 0, 0, 0 }, { 0, 0, 0 } };
        CCSprite[,] moles = new CCSprite[2, 3];
        int[] initPositionX = new int[3] { 155, 400, 640 };
        int[] initPositionY = new int[2] {30, 260};

上面的moleValue记录的是当前洞里有没有地鼠，1就是有，0就是没有。moles记录当前所有冒头地鼠的引用。最后两个是初始化坐标，3*2=6. 这些坐标都是我通过画图工具来计算出来的。

现在注释到上面的单个地鼠冒头的代码。往层里面添加方法：

       void addMole(float dt)
        {
            Random r = new Random();
            int i = r.Next() % 3;
            int j = r.Next() % 2;
            if (moleValue[j, i] == 0)
            {
                moles[j, i] = CCSprite.spriteWithFile(@"images/mole_1");
                moles[j, i].position = new CCPoint(initPositionX[i], initPositionY[j]);
                var move = CCMoveBy.actionWithDuration(2, new CCPoint(0, 100));
                var action = CCSequence.actions(move, move.reverse()
                    , CCCallFuncN.actionWithTarget(this, spriteMoveDone));
                moles[j, i].runAction(action);
                moleValue[j, i] = 1;
                if (j == 0)
                    this.addChild(moles[j, i], 1);
                else
                    this.addChild(moles[j, i], -1);
            }
        }

        void spriteMoveDone(object sender)
        {
            CCSprite sprite = sender as CCSprite;
            for (int i = 0; i < 3; i++)
            {
                for (int j = 0; j < 2; j++)
                {
                    if (moles[j, i] == sprite)
                    {
                        moleValue[j, i] = 0;
                        break;
                    }
                }
            }
            this.removeChild(sprite, true);
        }

并且添加一行到init方法

this.schedule(addMole, 1.0f);

我们修改地鼠变为只是上下Move一次。并且在退回后调用回调函数移除该sprite。设置该位置的moleValue值为0.现在就能看见地鼠不怕死的不断冒头了。

打地鼠

　　既然地鼠都不怕死的冒出来了。不打貌似很不爽的样子，但是，现在点击屏幕，没人任何反应。。。因为我们还没有对点击进行注册和处理。

　　   那么怎么判断是点击了地鼠呢。我设定这么一个范围算是点击了地鼠。

　　由于地鼠初始化在框的下面，其坐标的X和在这个黑色框下边的中点坐标X一样。Y值+70才算和这个黑色框下边的中点的坐标Y值一样。

现在添加一个方法来处理触点坐标：

        private void handleTouchPosition(CCPoint touch)
        {
            for (int i = 0; i < 3; i++)
            {
                for (int j = 0; j < 2; j++)
                {
                    float tempX = initPositionX[i] - touch.x;
                    if ((tempX < 80 && tempX > -80) && (initPositionY[j] + 150 - touch.y > 0 && initPositionY[j] + 70 < touch.y))
                    {
                        if (moleValue[j, i] == 1)
                        {
                            if (moles[j, i] != null)
                            {
                                this.removeChild(moles[j, i], true);
                            }
                            moleValue[j, i] = 0;
                            moles[j, i] = null;
                        }
                        return;
                    }
                }
            }
        }

这样，遍历所有的洞，判断点击是否是这个洞。然后判断现在是否有地鼠，有地鼠就把地鼠移除。

现在在init方法中注册触摸事件：

this.isTouchEnabled = true;

然后重载ccTouchesEnded方法：

        public override void ccTouchesEnded(List<CCTouch> touches, CCEvent event_)
        {
            foreach (var touch in touches)
            {
                CCPoint touchLocation = touch.locationInView(touch.view());
                touchLocation = CCDirector.sharedDirector().convertToGL(touchLocation);
                touchLocation = this.convertToNodeSpace(touchLocation);
                handleTouchPosition(touchLocation);
            }
        }

这个方法先把坐标转换，再处理坐标。现在运行，可以看到地鼠被打死了。

何去何从

　　现在，我们已经拥有了一个不错的打地鼠游戏。是不是觉得少了点什么呢。。

• 　　　　考虑拓展地鼠被打的动作，加个锤子或者什么的。另外，可以添加地鼠被打后的表情，这都可以用Action可以实现
• 　　　　把硬编码的地鼠重构出来，添加多个关卡
• 　　　　去试试用动画来制作地鼠冒头
• 　　　　增加更多种类的地鼠，比如说有些地鼠可以挨打2下
• 　　　　添加很棒的音效

本次工程代码下载：http://dl.dbank.com/c0bgua6l79