Teochew Thunder: Web Tutorial: Valentine's Maze Game (Part 3/4)

Still with me? Cool!

In order to win the game, the player needs to click on the tiles to rotate them till there is a clear unbroken line from the start tile to the end tile.

We'll write the code for rotating those tiles.

First, go to your resetboard() function and add these lines. Upon initialization of each tile, the rotatetile() function will be added to the onclick event of that tile.

Add this line after the objtiletype array definition. This defines the global variable started, which is false by default.

Now create the rotatefile() function. The If-else statement here gives you control over the rotation. If the game is not started, clicking only brings up a prompt asking the player to start the game.

            function rotatetile(vartile,varsec)
            {
                if (started)
                {

                }
                else
                {
                    alert("Please start the game first.");
                    return false;
                }
            }

            function resetboard()
            {

If the game has been started, the two arguments passed into the rotatetile() function come into play. vartile is the id of the tile that was clicked, while varsec defines the number of seconds it takes for the rotation to complete. Adjust varsec as you see fit! Now, the code gets the rotation status of the tile, adds 90 degrees to it, then uses varsec to determine the speed of the rotation.

But that's just the visual rotation. We have to take care of the logical part too. The n, s, e and w values of the tile will change with each rotation.

Just a visual to help you see what I mean. Let's say this tile is rotated...

	Before	After
n	0	0
s	1	1
e	1	0
w	0	1

Or this tile.

	Before	After
n	1	0
s	1	0
e	0	1
w	0	1

Try it! Run your code. Click on the tiles. What happens? Bet you just kept getting prompts to start the game, eh? No sweat, there's something you're missing. Alter your reset() function. So clicking on "begin" not only resets the board, it also starts the time with the timer_start() function!

Now add the global variable gametime.

Next, create your timer_start() function. This basically puts an initial value of 60 seconds in the pnlTimer div, clears the gametime variable, then sets a timer function to the decrement_timer() function. And of course, sets the global variable started to true.

You got it, another function! Create the timer_decrement() function.

Now run the code. Click on "begin". Does the timer display say "60 seconds"? Now click on the tiles. Do they rotate?

My timer isn't moving!

That's because we haven't written any code for the timer_decrement() function. Here goes...

This basically gets the value of the pnlTimer div. If the time is now 0, it resets gametime, sets the started variable to false, and prompts the player. If not, it decrements the value and puts it back in the div.

Refresh. Is your timer moving now?

How do I win the game?

Well, as you probably know by now, rotating the tiles until there is an unbroken line from the start tile to the end tile, wins the game. But how does the script know? The answer is in the rotatetile() function. Add this segment. The function findcurrentpath() checks the board, after every rotation. If it finds an unbroken path from start tile to the end tile, it returns true. And that's when you can prompt the player with a congratulatory message, clear the gametime variable, set the started variable back to false, and put a "replay" link in the pnlMessage div.

Phew! Got all that? Now it's time for one last function, which is findcurrentpath(). First, we declare variables next_id and current_id. current_id is set to the first element in the path array, which is the id of the start tile. At the end of it, if next_id is the same as the last element in the path array, the function returns true. Otherwise, it returns false.

Now declare the variables trynext and direction. trynext is exactly what the name suggests - a temporary variable for feeling out the next tile's id. direction is meant to hold the next possible direction.

direction will never be the direction that the next tile came from. For example, if the next possible direction is east, then for the tile eastwards of the current tile, the next possible direction is never west.

	n possible
(current) w not possible	(next)	e possible
	s possible

This is reflected in the next series of If statements. Since the start tile has only one exit point, it's easy to determine the one possible direction.

Another Do-while loop. next_id is set at a default of "-1". If a next tile is available, this value is changed to the id of the next tile. This continues until no next tile is available (ie, next_id remains at a value of "-1") or the value of next_id is the same as the last element of the path array.

Here, let's create the If statement for "n", ie. direction north. First, we check if it's at the top row. If so, north is a dead end and no further action is necessary. next_id remains at "-1" and findcurrentpath() returns false. If not, we check for the s property of the tile above the current tile. If it's not "1", that means there's no connection. Again, no further action is necessary. next_id remains at "-1" and findcurrentpath() returns false. If there is a connection, trynext is set to the id of the tile above the current tile. We then check for the exit points of that tile - north, east or west. We won't check south because the previous tile was from the south!

So do the same for the other directions.

That's it! Time to test your game!

Run your code. I've left the path shaded in orange to help see if what you have is correct. Click on "begin" and start rotating your tiles. When there's an unbroken line between the start tile and the end tile, you should see the victory prompt.

Now remove this line or comment it out.

And you have a game!

We'll put the finishing touches on this game. Up the difficulty level a bit. It will be short, I promise.

Teochew Thunder

Pages

Tuesday, 9 February 2016

Web Tutorial: Valentine's Maze Game (Part 3/4)

My timer isn't moving!

How do I win the game?

That's it! Time to test your game!

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews