GC devkit Quick Start-game Overview (III)

Connect to http://www.cnblogs.com/hangxin1940/archive/2013/04/11/3015553.html

# Start Process

In the constructor 'init ', we listen to the ''app: start' event to process the upper-layer notifications, and then call the 'start _ game_flow' method to play the animation sequence, finally, call 'play _ game' to start the game.

Function start_game_flow (){
VaR that = this;

Animate (that. _ scoreboard). Wait (1000)
. Then (function (){
That. _ scoreboard. settext (text. Ready );
}). Wait( 1500). Then (function (){
That. _ scoreboard. settext (text. Set );
}). Wait( 1500). Then (function (){
That. _ scoreboard. settext (text. Go );
// Start the game...
Game_on = true;
Play_game.call (that );
});
}

'Ready, set, go! 'There is a short pause when switching the three words. Each time the split board content is updated and the next animation is loaded. In the last animation step, the 'play _ game. Call (that) 'method is called. 'That' is just a reference of 'this ', but it is convenient to make a correct reference in different contexts.

# Game start

The 'play _ game' function contains several timers. The 'ticket' function is used to randomly expose the mole from the cave. A timer has a countdown to update in a 'textview' every second, and the game is terminated when the time limit is exceeded.

Function play_game (){
VaR I = setinterval (BIND (this, tick), mole_interval ),
J = setinterval (BIND (this, update_countgo down), 1000 );

// Reset all timer, marker, and countdown
SetTimeout (BIND (this, function (){
Game_on = false;
Clearinterval (I );
Clearinterval (j );
SetTimeout (BIND (this, end_game_flow), mole_interval * 2 );
This. _ countdown. settext (": 00 ");
}), Game_length );

// Display the countdown and delete the start prompt.
SetTimeout (BIND (this, function (){
This. _ scoreboard. settext (score. tostring ());
This. _ countdown. style. Visible = true;
}), Game_length * 0.25 );

// If there is no time, set the red countdown text
SetTimeout (BIND (this, function (){
This. _ countdown. updateopts ({color: '# cc0066 '});
}), Game_length * 0.75 );
}

Function tick (){
// Randomly select a mole
VaR Len = This. _ molehills. length,
Molehill = This. _ molehills [math. Random () * Len | 0];

// If the selection of moles is already activated, select another
While (molehill. activemole ){
Molehill = This. _ molehills [math. Random () * Len | 0];
}
Molehill. showmole ();
}

Function update_countdown (){
Countdown_secs-= 1;
This. _ countdown. settext (":" + ("00" + countdown_secs). Slice (-2 )));
}

# End sequence

After the game countdown ends, the game's ending animation starts to be played by the 'end _ game_flow 'function. It checks the game score and displays it, the mole keeps popping up as if it is laughing at you.

Function end_game_flow (){
VaR ishighscore = (score> high_score ),
End_msg = get_end_message (score, ishighscore );

This. _ countdown. settext (''); // clear the countdown Information
// Reset the score card
This. _ scoreboard. updateopts ({
Text :'',
X: 10,
Size: 17,
Verticalalign: 'top ',
Textalign: 'left ',
Multiline: True
});

// Check whether it is the highest score and play the corresponding Animation
If (ishighscore ){
High_score = score;
This. _ molehills. foreach (function (molehill ){
Molehill. endanimation ();
});
} Else {
VaR I = (this. _ molehills. Length-1)/2 | 0; // center mole
This. _ molehills [I]. endanimation (true );
}

This. _ scoreboard. settext (end_msg );
// Allow touch reset after a short delay
SetTimeout (BIND (this, emit_endgame_event), 2000 );
}

Once the new scoreboard is set and the moles animation is playing, the user's touch events will be monitored in 2 seconds.

Function emit_endgame_event (){
This. Once ('inputselect', function (){
This. emit ('gamescreen: end ');
Reset_game.call (this );
});
}

After a user clicks, A 'gamescreen: end' event will be sent. The upper-Layer Program processes this event. Then, the view stack will pop up and close this game view to display the title view, so that the user can start the game again.

# Moles Resource: 'molehill. js'

The 'molehill 'class is another big class, which is stored in'./src/molehill. js'

# Alignment component

A mole hole is made up of three types of images: the bottom layer of the mole hole, the mole, and the upper layer of the mole hole. The animation of the mole moves up and down on the Y axis, and a rectangular mask is provided to cover the excess part of the mole image. Moles look like they jump out of the hole and wait to knock on it.

This. Build = function (){
VaR hole_back = new UI. imageview ({
Superview: This,
Image: hole_back_img,
//...
});

This. _ inputview = new UI. View ({
Superview: This,
Clip: True,
//...
});

This. _ moleview = new UI. imageview ({
Superview: This. _ inputview,
Image: mole_normal_img,
//...
});

VaR hole_front = new UI. imageview ({
Superview: This,
Canhandleevents: false,
Image: hole_front_img,
//...
});

//...

This. _ inputview. On ('inputselect', BIND (this, function (){
If (this. activeinput ){
Sound. Play ('whack ');
This. emit ('molehill: hit ');
This. hitmole ();
}
}));
};

This figure shows how the three 'imageview' are stacked into a mole:

! [Devkit] (http://docs.gameclosure.com/guide/assets/game-walkthrough/molehill-layers.png "devkit ")

If the mole's body stretched out a mole hole, it would be finished. We must make people feel that the lower part of the mole's body is under the grass. Here, you can use the clipboard to create a new 'view'. You only need to set the 'clip' attribute to 'true ', in this way, any subview attached to this view will only display images within its range. In the preceding figure, the mole only shows its own image (inside the black box) attached to the clipboard ).

We also regard the clipboard as a button area to check whether the player has knocked on the correct mole, as long as the touch falls into the rectangle area and the mole is activated, it is regarded as a successful hit. However, there is another problem: the user's input is captured by the mole image, but there is still a mole hole image before it, which covers the following areas, in this way, the event cannot be processed normally. We can set the 'canhandleevents' attribute of the Upper-layer image to 'false' to make the touch event as expected. It allows the event to pass through the view and capture the lower control.

In addition, in the 'built' function, we assign a function reference to the 'animator' object, which we will use during the game.

This. _ animator = animate (this. _ moleview );

We can execute this function at any time to play the mole animation. Of course, it is not considered a valid game action. This reference has the benefit of calling it every time you want to play an animation. You don't have to create a new 'animate' object every time.

# Mole Animation

The 'mole' class defines three animated sequences: moles jump out of the cave, moles go back to the hole, and ends the animation where the moles slowly come out and "Laugh" players. They are all defined using the 'animate' object:

// Mole
This. showmole = function (){
If (this. activemole === false ){
This. activemole = true;
This. activeinput = true;

This. _ animator. Now ({y: mole_up}, 500, animate. ease_in)
. Wafit (1000). Then (BIND (this, function (){
This. activeinput = false;
}). Then ({y: mole_down}, 200, animate. ease_out)
. Then (BIND (this, function (){
This. activemole = false;
}));
}
};

// Moles
This. hitmole = function (){
If (this. activemole & this. activeinput ){
This. activeinput = false;

This. _ animator. Clear ()
. Now (function (){
This. _ moleview. setimage (mole_hit_img );
}). BIND (this ))
. Then ({y: mole_down}, 1500)
. Then (BIND (this, function (){
This. _ moleview. setimage (mole_normal_img );
This. activemole = false;
This. activeinput = false;
}));
}
};

// End the animation
This. endanimation = function (){
This. activeinput = false;
This. _ animator. Then ({y: mole_up}, 2000)
. Then (BIND (this, function (){
This. _ interval = setinterval (BIND (this, function (){
If (this. _ moleview. getimage () === mole_normal_img ){
This. _ moleview. setimage (mole_hit_img );
} Else {
This. _ moleview. setimage (mole_normal_img );
}
}), 100 );
}));
};

The 'imase' function inserts a JavaScript Object attribute. If it imports a 'view' object, it inserts the style attribute of the object. This method is very convenient, because it is very convenient for us to animation based on the current style.

For example, if a mole is in the cave, let's make it a hole. Here is the 'showmole' function:

This. _ animator. Now ({y: mole_up}, 500, animate. ease_in)
. Wafit (1000). Then (BIND (this, function (){
This. activeinput = false;
}). Then ({y: mole_down}, 200, animate. ease_out)
. Then (BIND (this, function (){
This. activemole = false;
}));

First, the animation object is called '. now ({y: mole_up}, 500, animate. ease_in) 'function, which immediately operates the Y axis attribute of the animation object and defines it as 'this. _ moleview 'object. Because the main animation is an instance of the 'view' class, we actually operate on its 'style. Y' attribute, or the vertical position of the mole image on the screen. The 'role _ up' variable is set to 5 at the beginning of the file, which is the offset of the parent view 'this. _ inputview. The first step of the animation was executed for half a second/500 ms. The animation was slowly moved to the final position, and finally the mole showed its head.

Then, the second part of the animation will be paused by the '. Wait (1000)' method for 1 second, And the next animation will continue. In this way, the mole will drill out of the hole and then quickly go into the hole. If you click mole during this time, the score will be recorded.

Last '. then (...) 'called. It is immediately executed through a callback function. This method sets 'activeinput' of the mole hole to 'false', so that the mole hole will not accept the input event. When this action ends, the animation enters the next animation sequence.

We now expect the mole to return to the hole, so call '. then ({y: mole_down}, 200, animate. ease_out) ', as we can see ,'. the then' function can be called in multiple ways. Here, we call it through '. Now ()', which changes the position of the mole on the Y axis to make it slowly lower and enter the cave.

After the animation ends, we use '. Then (...)' to change the attribute 'activemole' of the mole to 'false', And the animation process ends.

# Sound

We use a separate controller to add the sound, which is located in './src/soundcontroller. js ':

Import audiomanager;

Exports. Sound = NULL;

Exports. getsound = function (){
If (! Exports. Sound ){
Exports. Sound = new audiomanager ({
Path: 'resources/sounds ',
Files :{
Levelmusic :{
Path: 'music ',
Volume: 0.5,
Background: True,
Loop: True
},
Whack :{
Path: 'effect ',
Background: false
}
}
});
}
Return exports. sound;
};

Here, a 'audiomanager' object is created when the program is started, and this object is returned when the 'getsound' function is called at any time.

Let's go back to the 'initui 'function of the'./src/application. js' file to see its usage details.

This. initui = function (){
//...

VaR sound = soundcontroller. getsound ();

//...

Titlescreen. On ('titlescreen: start', function (){
Sound. Play ('levelmusic ');
GC. App. View. Push (gamescreen );
GC. App. emit ('app: start ');
});

Gamescreen. On ('gamescreen: end', function (){
Sound. Stop ('levelmusic ');
GC. App. View. Pop ();
});
};

After you press the start button, the 'titlescreen: start' event is triggered and the background music is played. If the 'loop 'attribute of 'levelmusic' is 'true', the entire sound will be played cyclically until the game ends '. /src/soundcontroller. 'New audiomanager (...) in the JS 'file (...)'

# Summary

Playing moles is simple, but it is a work-ready and complete game. We learned how to organize engine APIs together.