Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Tutorials.

Ok, now you have your own game portal. Let’s call it triqui.com.

You want to share a link with your friends, or want search engine to index it properly.

If I want you to play Jamag, I have to give you this link
http://www.triqui.com/play.php?id=1713.
Now, I would like you to tell me how can you understand I am talking about Jamag from this link http://www.triqui.com/play.php?id=1713.
You can’t.

Now let’s understand why I have to write that play.php?id=xxxx to play a game.

All information about the games is stored in a database, and every game has an unique id assigned by the script.

Jamag’s id is 1713, so when I pass this value, the php script knows where to retrieve information about the game.

If you want to play Jamag on Kongregate, this is the link:
http://www.kongregate.com/games/triqui/jamag.

Seems like Kongregate has a directory to store my games (triqui) and a subdirectory for every game I made.

Obviously that’s not true. This is possible thanks to…

.htaccess file

Normally .htaccess is used to implement custom error pages or password protected directories. But you can do a lot more with this file.

First, let me point that .htaccess is the file extension, not the filename. The filename does not exists.

That’s what I created with my favourite text editor (notepad…)

ErrorDocument 404 /index.php
RewriteEngine on
RewriteRule ^id/([^/\.]+)/?$ /play.php?id=$1 [L]

Let’s see what is it:

Line 1: ErrorDocument detects any document error. If you don’t know what I am talking about, here it is a brief list:

401: Unauthorized – The request requires user authentication.

403: Forbidden – The server understood the request, but is refusing to fulfill it.

404: Not Found – The server has not found anything matching the Request-URI.

So ErrorDocument 404 refers to a “not found” error… that happens when the user looks for a page that does not exist

/index.php is the path where to redirect the user if he requested a page that does not exist

We can say that ErrorDocument 404 /index.php means “if someone requested a page that does not exist, then redirect him to index.php”.

And that’s what happens: go to http://www.triqui.com/dfgretre (a page that does not exist) and you will be redirected to home page.

Just in one line of code…

Line 2: Activation of the RewriteEngine module, a rewriting engine to rewrite requested URLs on the fly.

Not all servers support the rewrite engine.

In order to determine if your server supports it, you have to upload a php file with just:

and see what happens. In the result page, search for “mod_rewrite”.

If you find it in the “Apache loaded modules” section, then you know your server supports the rewrite engine, although in a server with php version 4.4.7 I was able to make it work even if the search returned a negative result.

Line 3: The core instruction: RewriteRule looks if the current URL matches with the regular expression passed as first parameter.

That ^id/([^/\.]+)/?$ is a regular expression, and even if I am planning to make a tutorial about regular expressions (reg exps from now on), at the moment I am just recommending you this Wikipedia article.

The second parameter of RewriteRule is the substitution.

Basically this instruction says: if the page starts with id (^id/) then copy everything that’s not a slash, a backslash or a period (([^/\.]+)) and make sure that after the starting matched id there is only a slash (/?$)… then load the page /play.php?id=$1, pasting the characters previously copied in place of $1.

The final [L] tells not to search for any more rule if this one was satisfied.

In an even basic way, the script says:

If you find an URL like
http://www.triqui.com/id/1713/
just redirect to URL
http://www.triqui.com/play.php?id=1713

And that’s what happens if you go to http://www.triqui.com/id/1713/.

I hust had to upload that .htaccess file in my root directory.

You may say there is not a big difference between play.php?id=1713 and /id/1713/ but this is the first step to friendly URLs generation.

Stay tuned for the next update.

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