How to Make a Rhythm Game in AS3 – Part 6

Part 6: Scoring

The next step in making our rhythm game is scoring. The user will get points depending on how far away the arrow is from the receptor when it hits it. We’re also going to make the health bar gain and lose parts when the user hits or misses the receptor. First of all, we need to define a score variable at the top of the game frame. We also have to define a String variable that will show how well the user hits the arrow.

//the score variable
var score:int = 0;
//either perfect, great, nice, or good
var scoreString:String = '';

That was pretty easy. Next, we want to increase the score whenever the user hits the right key when it hits the score. We’re going to make it increase by 10 for a perfect hit, 8 for a great hit, 6 for an nice hit, and 4 for a good hit. Add this code to the “Arrow.as” class in the checkKeys() function:

private function checkKeys(e:KeyboardEvent):void{
	//checking if a certain key is down and it's touching the receptor
	if(e.keyCode == arrowCode && this.hitTestObject(_root.mcReceptor)){
		//checking if the correct key is down
		//if the user hits it about perfectly
		//the receptors y coordinate is about 10 px away from the
		//symbol's y coordinate.
		if(this.y <= _root.mcReceptor.y + 15 && this.y >= _root.mcReceptor.y + 5){
			_root.score += 10;
			_root.scoreString = 'Perfect';
		} else if (this.y <= _root.mcReceptor.y + 25 && this.y >= _root.mcReceptor.y-5){
			_root.score += 8;
			_root.scoreString = 'Great';
		} else if (this.y <= _root.mcReceptor.y + 40 && this.y >= _root.mcReceptor.y -30){
			_root.score += 6;
			_root.scoreString = 'Nice';
		} else {
			_root.score += 4;
			_root.scoreString = 'Good';
		}
 
		destroyThis();//remove it from stage
	}
}

The next thing we have to do now is program the health bar. If the user misses or hits the arrow key at the wrong time, then we have to lose health. If the user hits it right though, the health will increase. First of all, give the health bar an instance name, mcHealth. Then, we’re going to make a function for this, so we don’t have to write all the if statements repeatedly. Define this function at the bottom of your code:

//this function will change the health depending on how much health change
//it needs, positive or negative
function changeHealth(healthDiff:Number):void{
	healthDiff /= 100;//the scaleX only changes in percentages
	//checking if the health is already at it's full
	//or will be full after this hit
	if(mcHealth.scaleX + healthDiff >= 1){
		mcHealth.scaleX = 1;
	} else if(mcHealth.scaleX + healthDiff <= 0){
		//checking if the health will be equal or below 0
		//lose function will go here
 
	} else {
		//if there are no problems
		mcHealth.scaleX += healthDiff;
	}
}

The next thing we’re going to do is run this function positively when the user hits the key correctly. In the arrow’s code where it hit tests with the receptor, put this code for perfect:

changeHealth(5);

This will increase the health by 5. You can do the rest yourself, just keep on decrementing the health change by 1, and you’ll be good.

Next comes the hard part, making the user lose health. Again, we have to define a few variables at the top. They will be Booleans saying whether or not the receptor is touching a certain key.

//Booleans checking if the arrows are touching the receptor
var touchLeft:Boolean = false;
var touchUp:Boolean = false;
var touchDown:Boolean = false;
var touchRight:Boolean = false;

Now, add this code to the makeLvl() function:

//checking if mcReceptor is touching any arrows
	//first we reset the variables we got last time just in case they aren't true anymore
	touchLeft = false;
	touchUp = false;
	touchDown = false;
	touchRight = false;
	//this for loop will be used for the hit testing
	for(var i:int = 0;i<numChildren;i++){
		var target:Object = getChildAt(i);
		if(target.arrowCode != null && target.hitTestObject(mcReceptor)){//if the object is an arrow and is touching the receptor
			if(target.arrowCode == 37){//if left arrow
				touchLeft = true;
			} else if(target.arrowCode == 38){//if up arrow
				touchUp = true;
			} else if(target.arrowCode == 40){//if down arrow
				touchDown = true;
			} else if(target.arrowCode == 39){//if right arrow
				touchRight = true;
			}
		}
 
 
	}

Now that we have the variables checking which arrow is touching the receptor, now we need some key checkers. Add this to the bottom of your code in the “game” frame:

stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKeys);
function checkKeys(e:KeyboardEvent):void{
	//if the left key is down and no left arrows are touching the receptor
	if(e.keyCode == 37 && !touchLeft){
		changeHealth(-10); //make the health go down
	} else if(e.keyCode == 38 && !touchUp){//and so on
		changeHealth(-10);
	} else if(e.keyCode == 40 && !touchDown){
		changeHealth(-10);
	} else if(e.keyCode == 39 && !touchRight){
		changeHealth(-10);
	}
}

Phew, that took a while. Now, for the final part of losing health, when the person misses the arrow altogether. Place this code at the end of the arrow’s eFrame function.

//if game is over or it's off the stage, destroy it
if(_root.gameOver || this.y < -60){
	//if off the stage
	if(this.y < -60){
		_root.changeHealth(-10);
	}
	destroyThis();
}

Well, that’s all for scoring. This probably has been the longest lesson in the series. If you survived through this without having any trouble, then you can do the next part without my help, the finishing touches.

Spread the Knowledge

  • Print
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • Google Bookmarks
  • Design Float
  • DZone
  • Yahoo! Buzz
  • PDF
  • Reddit
  • RSS
  • Technorati

Preview

Download Source
(Requires Flash CS3 or above)

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials