Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Line Rider game, and Flash.

Finally this tut has its 5th part.

You should read steps 1 to 4 before continuing with this one, although this time it’s not so important, because before to approach the “running car” I am going to explain the “walking man” on a line.

The same kind of gamestyle you can find in draw play 1 and 2.

Believe or not, this is an important step to understand before adventuring into running cars.

Now, let’s start.

I said we are going to see a man walking on a line we created.

As usual the “line” is instanced as terrain while the code I am showing is the one in the “player” object… yes, that red box is supposed to be the player…

The player is falling

The first thing to do is determine when the player is falling and when the player isn’t falling. If you think about the real world, a man is falling when there is no ground under his feet. Or when he’s so drunk. Or both. But at the moment we are only interested about the ground.

So, let’s translate real world physics into actionscript:

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		_y += yspeed;
	}
}

Line 2: Set the gravity at 0.2

Line 3: Set the yspeed (vertical speed) to zero

Line 6: Checks if _root.go is true. This is true once the “go” button is pressed. It’s not important for the game, I put it just to make the movie wait for a user input before starting.

Line 7: Gravity calls… yspeed is increased by gravity value.

Line 8: Performing a hit test between the terrain and the _x, _y+_height/2 spot. Since the anchor point of the player is on its center, you can easily understand the spot is located in the middle on the bottom side. Basically, the player’s feet.

Line 9: raising the player of one pixel (obviously, since the player must be sunk at the moment)

Line 10: set yspeed to zero (no need to fall if we are sunk into the ground)

Line 12: add yspeed to _y position

Look at the movie:

The player is not stable to the ground. Maybe the floor is too hot, maybe the code has something to be fixed.

The problem is that once the player touches the ground, I continue adding yspeed to _y position, so the player sinks a bit into the ground. Then, the while loop raises him a bit, just to watch him sinking again. That’s why the player seems to flick.

The player is falling – part 2

I need a hack to tell the “physics engine” to stop considering yspeed if the player has its feet on the ground

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Lines 12-13: The yspeed value is added to _y (old line 12) only if the player is in the air. Look at the +1 in the _y+_height/2+1. I need to “forecast” next player’s position and if I find it will be in the ground, then I stop considering the gravity. Otherwise lines 14-15 set yspeed to zero.

Now the player is falling in the right way.

Let’s make him walk now.

The player is moving

To make the player move, we need to check if some keys are pressed and manage the x speed according to the key pressed.

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			_x -= xspeed;
		}
		if (Key.isDown(Key.RIGHT)) {
			_x += xspeed;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Line 3: Set x speed to 1

Lines 8-10: If the left key is pressed, I move the player xspeed pixels to the left

Lines 11-13: Same thing with the right arrow key

Now the player can walk!!

But… try to walk to the left margin of the stage… or to the right one… you may notice there is a hard slope, but the player walks on it as if it was a plain ground. That’s not realistic!!

The player is moving – part 2

In order to make the player stop walking when on a too hard slope, we have to define a “knee” point. If the “knee” hits the ground, it means the ground is a hard slope, or a stair, o whatever thing the player can’t climb.

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if (!_root.terrain.hitTest(_x, _y+_height/2+1, true)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Line 9: Before moving the player to the left, I assure his “knee” (located to the leftmost side of the square at a quarter height of the player) is not touching the ground.

Line 14: Same thing with the right side.

Now the player cant’ walk on slopes!! Now we want the player to jump

The player is jumping

To make the player jump, I am going to check if the SPACE key is pressed

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		if (Key.isDown(Key.SPACE)) {
			yspeed = -5;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
		}
		if ((!_root.terrain.hitTest(_x, _y+_height/2+1, true)) or (yspeed<0)) {
			_y += yspeed;
		} else {
			yspeed = 0;
		}
	}
}

Lines 18-20: If the SPACE key is pressed, the yspeed is set to -5 (since yspeed is affected by gravity, a negative value will make the player fly).

Line 26: In the if statement I add a check: If the yspeed is less than zero (player jumping) I add the yspeed to _y even if the player is not going to touch the ground. Without that condition, the player will never jump.

Look at our jumping player!

Again, it's not over... as you can see, if you press SPACE while the player is in the air, the player will jump again, and again... you can make the player fly and I don't want it.

The player is jumping - part 2

I need a variable to decide if the player can jump or not. Basically, a player can always jump execpt when he is already jumping

onClipEvent (load) {
	gravity = 0.2;
	yspeed = 0;
	xspeed = 1;
	jumping = 0;
}
onClipEvent (enterFrame) {
	if (_root.go) {
		if (Key.isDown(Key.LEFT)) {
			if (!_root.terrain.hitTest(_x-_width/2, _y+_height/4, true)) {
				_x -= xspeed;
			}
		}
		if (Key.isDown(Key.RIGHT)) {
			if (!_root.terrain.hitTest(_x+_width/2, _y+_height/4, true)) {
				_x += xspeed;
			}
		}
		if ((Key.isDown(Key.SPACE)) and (!jumping)) {
			yspeed = -5;
			jumping = 1;
		}
		yspeed += gravity;
		while (_root.terrain.hitTest(_x, _y+_height/2, true)) {
			_y--;
			yspeed = 0;
			jumping = 0;
		}
		if ((!_root.terrain.hitTest(_x, _y+_height/2+1, true)) or (yspeed<0)) {
			_y += yspeed;
		} else {
			yspeed = 0;
			jumping = 0;
		}
	}
}

Line 5: initializing a variable to tell the player is not jumping

Line 19: Added the control if the player is NOT jumping when SPACE key is pressed.

Line 21: Set the jumping variable to 1. Actually, the player is jumping (so he can't jump anymore until he touches the ground)

Lines 27 and 33: Set the jumping variable to zero. When the player is hitting the terrain, or when the player is about to hit the terrain, he is not jumping, or the jump is over.

There are some other things to fix but at the moment it's over.

Download the full source codes and give me feedback

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.