A simple hamster game

Disclaimer: This article was created by fengyun1989 and is licensed using the knowledge sharing signature-non-commercial use-sharing 2.5 mainland China License Agreement in the same way.

Preface: I have been busy in the last two months and haven't updated my tutorials for a long time. So many things have happened in these days, and WP8 has been released. My t8788 was also completely abandoned... The RP version is also available for Win8. The prospect is unknown. Certainly many people are confused. In my opinion, they are all cloud games. Language is just a tool. It is king to be able to communicate with every hundred connections. Microsoft cannot change iOS or android. For the next period of time, it is estimated that some Win8 tutorials will be written. I feel that Win8 and WP8 have an inexplicable relationship, but I cannot tell you clearly. It is like this.

This tutorial describes a simple hamster game. If you do not know about cocos2d-x programming, You can first read the "using cocos2d-x to make a simple Windows Phone 7 game" series of articles. However, if you have relevant experience, you should leave it alone.

Program:

Overview:

　　The main problem is that the mouse clicks in the early stage and the mouse clicks. There are two ways for a hamster to get its head. One is to use animation and the other is to use the vertical effect of the Z axis. Animation effect method nowpaper some time ago to write such an article "Cocos2d-x
For windowsphone: Develop a hamster game. I don't want to be here anymore. I am too lazy to repeat the repeated content. Here we will introduce the method of the Z axis.

　　　　

You only need to divide the foreground into three parts. It can be divided into three blocks, separated from the center of the hole. Set the Z axis, bottom, top, and end when adding to the layer. Set a black background. There is space between the two graphs to let the hamster sprite move. This will produce the visual effects that the hamster has drilled out of the cave.

Download the desired image now; http://dl.dbank.com/c0tayrr384

Start:

Create a cocos2d project named cocos2dwhacamoledemo. Of course, openxlive is not used because it is a practice project. Remove the check box. Then fix the reference. These operations have been performed many times. If you do not understand it, read the previous articles.

Then add a class to the classes folder. Name attackmolescene. CS to inherit from ccscene. The modification code is as follows:

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

What has been done above, and the foreground is added in the layer. Three pieces, careful friends noticed. When I addchild, the Z axis parameters are different. The background is at the end, so the Z axis value is the smallest. Leave a place between the two blocks to the hamster. The foreground position is also set to the top, bottom, and bottom three positions. In this way, from the top of the Z axis, we can see that it will become a whole prospect.

Modify the applicationdidfinishlaunching method of appdelegate:

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

Now you can execute. You can see a good prospect.

Now let's add a hamster and try it out.

Add the following in the init method of the layer:

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

Add a hamster to the layer and set it to move back and forth in the lower left corner. In this example, or 30th is computation. I use the graphic tool to open the grass.png file, use the mouse to obtain the coordinates, and then use the pen to calculate the coordinates. It should be noted that the coordinate origin in the cocos2d-x is in the lower left corner. The window is in the upper left corner.

Now, compile and run the program.

Randomly impersonate a hamster

Let's first think about how to do the following, how to save the hamster genie, how to determine the initialization coordinates, how to determine whether the hamster is beaten, and then let him disappear, how can I determine if a hamster exists in the hole without repeated addition.

My method is to use arrays to solve all problems. Relatively simple.

Add the following declaration to the layer:

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

The above molevalue records whether there is a hamster in the current hole. 1 indicates yes, and 0 indicates no. Moles records the reference of all the current spammers. The last two are the initialization coordinates, 3*2 = 6. These coordinates are calculated by using the drawing tool.

The code that is now commented out to a single hamster above. Add method to layer:

       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);        }

And add a row to the init method.

this.schedule(addMole, 1.0f);

We changed the mouse to move up and down once. Then, call the callback function to remove the sprite. Set the value of molevalue for this position to 0. Now you can see that the hamster is not afraid of death.

Hamster

Since the hamster is not afraid of death. It seems uncomfortable to do not play, but now, when you click the screen, no one will respond... Because we have not registered and processed the click.

So how can we determine that the mouse has been clicked. I set such a range to click the mouse.

Because the hamster is initialized under the box, its coordinate X is the same as the midpoint coordinate X under the black box. The Y value + 70 is the same as the Y value of the midpoint under the black box.

Now add a method to process the contact coordinates:

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

In this way, traverse all the holes and determine whether the click is the hole. Then, determine whether there is a hamster. If there is a hamster, remove it.

Register the touch event in the init method:

this.isTouchEnabled = true;

Then, reload the cctouchesended method:

        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);            }        }

This method first converts coordinates and then processes coordinates. Run now. You can see that the hamster is killed.

Where to go

　　Now we have a good hamster game. Do you think something is missing ..

• Consider expanding the actions of a hamster, and adding a hammer or something. In addition, you can add the facial expression after the mouse is beaten, which can be implemented using action.
• Reconstructs the hardcoded hamster and adds multiple levels.
• Try to use an animation to make an animation.
• More types of Hamster are added. For example, some hamster can be beaten 2 times.
• Add great sound effects

This project code download: http://dl.dbank.com/c0bgua6l79