Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Dudeski game, Construct, Game development and HTML5.

Some days ago I showed you how to control a character like in popular Dudeski game in HTML5 with Construct2, and you were able to move to the left, to the right, prepare to jump and jump.

Now it’s time to add some stuff to the game. Being a ski game, what’s the first thing a skier has to do? Passing through flags, of course.

Just to make something different, we will turn a ski game with the player on the top and moving down in a car game with a car on the bottom and moving up. Same game mechanics, different point of view.

And we will learn how to make flags. A flag is a special item the car must cross on its left or on its right, according to flag type.

In next example, also playable with the mouse, green flags must be crossed on the left side, and red flags must be crossed on the right side. If you fail, flags will become semi-transparent.

Keep the mouse pressed on the left red half of the screen to move the car to the left, or on the right green half of the scene to move the car to the right. You can also jump but it does not affect gameplay at this stage.

So, in order to create flags, we must:

* Create a flag a little bit outside to the top of the screen, every a certain amount of time or randomly, it does not matter, just create it outside the screen.

* At each frame, move down all flags according to current car speed. The car only moves left and right, and we fake the speed by moving vertically everything else.

* Once a flag disappears from the bottom of the screen, we also need to remove it. There’s no point in keeping in game assets that won’t affect the game anymore.

* Each flag can be crossed to its left or to its right according to its type. I check it this way: the flag has a flag variable called “checked”. Once the vertical position of the flag is greater than vertical position of the car – that is the flag is in a lower position than the car – and “checked” is false (that is it’s the first time we spot the flag when it’s lower than the car), I match flag and car horizontal position. This way I know if the car is on the left or on the right of the flag, and act consequentially.

Here is the fully commented actions and events list:

So that’s how you manage flag in a ski/race game. Obviously flags can be arranged to make doors, or left alone as in the example. Next time, I am going to add obstacles to be avoided or jumped, meanwhile download the source code of the entire project.

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