window.requestAnimationFrame (with high resolution timing, very precise) and window.performance.now polyfills

Two Vanilla JavaScript polyfills:

I have just adapted the window.requestAnimationFrame polyfill made by Paul Irish to work with high resolution timing automatically (when possible) and improved the performance a little bit. Here it is: https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0

I have also mixed the window.performance.now polyfill made by Paul Irish with Aaron Levine’s and modified some of the code to improve it. Here it is: https://gist.github.com/jalbam/cc805ac3cfe14004ecdf323159ecf40e

Both polyfills can be used either separately or together and they will automatically detect whether the web client needs them or not. Just load them in your code (using your favourite way) and, if the client needs them, the polyfills will deploy and be used.

If you want to use them together, remember to load first the code of the window.performance.now polyfill since the window.requestAnimationFrame polyfill could need it.

Any comments are welcome!

NW.js port for Raspberry Pi

There is a NW.js (formerly node-webkit) binary compiled for the ARMv6 used by Raspberry Pi. It also runs on Raspberry Pi 2 and Raspberry Pi 3 since they are backward compatible with ARMv6. Other compatible hardware should also be able to run this binary.

It can be found on GitHub: https://github.com/jalbam/nwjs_rpi

Instructions

  1. You need a package.nw which is just a .zip file with .nw extension that contains your project (at least, it needs an index.html and a package.json inside). The included package.nw is just an example using the Yasminoku game. Since this is only a port, if you need it you can go to the official web site of NW.js and read the documentation to know more about package.nw, package.json, etc.
  2. Optional: merge nw and package.nw into a single file with the following command:
cat nw package.nw > Your_new_binary_file
  1. Edit fix_libudev.so.0 and fix_libudev.so.1 and replace Your_new_binary_file found in their code by the real name of your binary file (if you did not merge nw and package.nw together, then replace it by just nw).
  2. If you need it, give executable permissions (and other desired permissions) to Your_new_binary_file (or nw) using the chmod command (as root).
  3. Try to run the binary:
./Your_new_binary_file

If you did not merge the nw and package.nw files in one single file (as explained in step 2), you should run this command instead:

./nw
  1. In the case the system complains about libudev.so.0 when you try to run the binary, just type the following command:
./fix_libudev.so.0

Likewise, if needed, do the same for libudev.so.1 running this:

./fix_libudev.so.1

Note: these two commands above will only work if you have followed the step 3 properly before. Each of them only needs to be executed once and never again.

  1. If all works well, you can distribute your project. You will need these files at least (in the same folder): libffmpegsumo.so, nw.pak and Your_new_binary_file (or nw and package.nw instead). I would recommend including fix_libudev.so.0 and fix_libudev.so.1 optionally (modified as explained in step 3) if you think others might need them.

Versions

node-webkit (now called NW.js) version: v.0.7.0-pre

Node.js version: v0.10.12

Tested on

  • Raspberry Pi Model B Revision 2.0 Mounting holes” with 512MB RAM (000e revision) using Raspbian GNU/Linux 7 “wheezy” (Linux raspberrypi 4.1.19+ #858 armv6l GNU/Linux).
  • Raspberry Pi 2 Model B PCB Revision 1.1″ with 1024MB RAM (a01041 revision) using Raspbian GNU/Linux 8 “jessie” (Linux raspberrypi 4.9.35-v7+ #1014 SMP armv7l GNU/Linux).
  • Raspberry Pi 3 Model B PCB Revision 1.2″ with 1024MB RAM (a02082 revision) using Raspbian GNU/Linux 8 “jessie” (Linux raspberrypi 4.1.19-v7+ #858 SMP armv7l GNU/Linux).
  • Raspberry Pi Zero W PCB Revision 1.1″ with 512MB RAM (9000c1 revision) using Raspbian GNU/Linux 9 “stretch” (Linux raspberrypi 4.14.71+ #1145 SMP armv6l GNU/Linux).
  • Raspberry Pi 3 Model B+ PCB Revision 1.3″ with 1024MB RAM (a020d3 revision) using Raspbian GNU/Linux 9 “stretch” (Linux raspberrypi 4.14.71-v7+ #1145 SMP armv7l GNU/Linux).
  • Orange Pi Zero (Allwinner H2+)” with 512MB RAM (hardware sun8i, 0000 revision) using Raspbian GNU/Linux 8 “jessie” (Linux OrangePizero 3.4.39 #2 SMP PREEMPT armv7l GNU/Linux).
  • Orange Pi Zero Plus2 (Allwinner H3)” with 512MB RAM (hardware sun8i, 0000 revision) using Raspbian GNU/Linux 8 “jessie” (Linux OrangePI 3.4.112-opi #1 SMP PREEMPT armv7l GNU/Linux).

Compatibility

  • Raspberry Pi Zero, all models
  • Raspberry Pi, all models
  • Raspberry Pi 2, all models
  • Raspberry Pi 3, all models
  • Other devices with compatible hardware (Orange Pi, Banana Pi, etc.)

Credits

The original binary was shared by Nils Måsén “piksel” (aka “spaculo”) at https://www.youtube.com/watch?v=MqNUYk9Y8jY so thank you very much! 🙂

sockjs_test_server_nwjs – SockJS test server on NW.js

sockjs_test_server_nwjs” is just a simple SockJS server running on Node.js but using NW.js (formerly node-webkit) to provide a simple visual interface for testing purposes. It was made on 29th July 2016 (approximately).

Screenshot

The default listening port is set to 9999 but can be modified easily.

It comes with a self-extracting single-file binary for Windows 32-bit (using 7zip‘s SFX) that runs on Windows XP with SP2 (Service Pack 2) minimum and also on newer Windows versions as Windows 10 (generated with Web2Executable) but also includes the source code so it can be ported to other platforms supported by NW.js easily.

It can be found on GitHub: https://github.com/jalbam/sockjs_test_server_nwjs

fake_rest_server – REST server in PHP

fake_rest_server” is a simple and easy-to-configure REST server made in PHP.

I made it just to create different REST servers very fast for testing purposes. It was made on 12th May 2016 (approximately).

It can be found on GitHub: https://github.com/jalbam/fake_rest_server

Configuring the server

To add new paths (routes) and methods, the developer just needs to create a new folder structure (folder and subfolders if needed) which represents the route and inside one file per method named [method_desired].php (for example, put.php).

To start developing your REST server, you will only need to download the files inside the src/ folder.

You may want to take a look at the src/_code/functions.php file (the engine will include it automatically) as it provides some basic but useful functions. There you can also add new functions or modify the existing ones.

If you want to add data, you can use the src/_code/data/data.php file (automatically included by the engine).

If you want to add configuration data, you can use the src/_code/config.php file (automatically included by the engine).

As the engine defines the USING_REST_SERVER constant, you can protect any of the files with the following line at the beginning:

<?php if (!defined("USING_REST_SERVER") || !USING_REST_SERVER) { return; } ?>

Note: this authorization code above is also defined in the AUTHORIZATION_CODE constant (inside the the src/_code/config.php file).

Example:

1) In the root folder (where the src/_code/ folder and the src/index.php file are placed), create a folder called myRESTService/.

2) Inside the myRESTService/ folder we have just created, create another folder called user/ and inside of it create two files: index.php and get.php.

3) Inside the myRESTService/user/index.php file, place the following code:

<?php
  //Users info (this could be in the "src/_code/config.php" file, but it is just an example):
  $usersData = Array
  (
    //User IDs:
    "1" =>
      Array
      (
        "name" => "John Doe",
        "favouriteFood" => "meat"
      ),
    "2" =>
      Array
      (
        "name" => "Joan Alba Maldonado",
        "favouriteFood" => "pizza"
      )
  );
  
  //Gets the data needed which has been sent through the REST client:
  $userId = getVariable("id"); //"getVariable" and other functions available in the "src/_code/functions.php" file.

4) Inside the myRESTService/user/get.php file put the following code:

<?php
  if ($userId === "") { echo "No id sent!"; }
  else if (array_key_exists($userId, $usersData))
  {
    echo $usersData[$userId]["name"] . " likes eating " . $usersData[$userId]["favouriteFood"];
  }
  else { echo "User cannot be found! (id=" . $userId . ")"; }

5) With this, we will have our REST server configured with the myRESTService/user/ route, accepting the GET method with the id parameter. This example can be found in the example_easy/ folder.

Testing the server

If you do not have a REST client, the server can be tested on any web browser by adding the debug=1 parameter to the URL as well as the method parameter with the method desired (not needed if the method is GET), as for example: http://localhost/fake_rest_server/src/index.php/route_1/subroute?method=post&debug=1&username=Joan

Following the example above, you can use a web browser to visit the following links:

http://localhost/route_to_the_REST_server/index.php/myRESTService/user/?method=get&debug=1&id=1 (it should show “John Doe likes eating meat”)

http://localhost/route_to_the_REST_server/index.php/myRESTService/user/?method=get&debug=1&id=2 (it should show “Joan Alba Maldonado likes eating pizza”)

http://localhost/route_to_the_REST_server/index.php/myRESTService/user/?method=get&debug=1&id=3 (it should show “User cannot be found! (id=3)”)

http://localhost/route_to_the_REST_server/index.php/myRESTService/user/?method=get&debug=1 (it should show “No id sent!”)

Note that the “/” character at the end of the route is optional.

Final comments

It is very easy to extend using PHP language. The project already includes some examples with routes, methods, functions and data as user accounts, etc. as examples (in both the example/ and the example_easy/ folder) but they can be deleted.

The only really-needed code is located in the src/ folder. Inside of it, the route_1/ folder and all of its content can also be deleted since it is just an example.

License

This project can be used, reproduced, distributed and modified freely for any non-commercial purposes but always keeping the author’s name and copyright clauses. Other than that, just use this project as you wish but never sell it!

EASPM123 – Get rid of spam emails!

EASPM123 (Email Anti-Spam 123) is an Easy-to-use JavaScript API that protects any email address you want to use in your website from spambots. First version (1.0) was released in November 2015.

It works in any browser with JavaScript support, even old ones (including Internet Explorer 5.0), offers different security options (very configurable) and it is just 2.57 KiB minified. If you want, you can easily configure it to be used with many languages at the same time.

Despite of this, this script should consider as a way to improve safety against spambots but not the unique method. A good anti-spam for your email (server or client) is still always recommended.

It can be found on GitHub: https://github.com/jalbam/easpm123

Basic idea

The basic idea is to disguise the email address by modifying it using a text that will be removed by the script when the desired JavaScript events are fired (or, if desired, automatically when the document is loaded).

Most spambots will not fire those JavaScript events or, even if they did it, many of the times will not catch the email address after doing it but the previously-shown email address (so they will end with a non-valid email address which includes the text that should have been removed).

The text to be removed should be human-understandable so that a human being could figure out the real email in the case that JavaScript was disabled or something failed. Under these circumstances, to help any human-being to figure out the real email address, this script uses the so-called “without-no-spam” elements which are elements containing the instructions that the human-being should follow to get the real email address. These “without-no-spam” elements will be removed automatically by the script if JavaScript is available.

As nowadays many spambots can already translate “AT” and “DOT” to “@” and “.” respetively, to improve safety this script provides a way to translate any desired text to the AT (@) symbol. The key here is to use a non-so-famous text that no spambot will understand at all.

There are different ways to use this script detailed below, some safer than others. Please, continue reading.

Usage

You can download the project from GitHub directly to include it in your project or you can also use one of the following commands while you are in your project:

Bower:

bower install easpm123

Yarn:

yarn add easpm123

npm (it will need a package.json):

npm i easpm123

The behaviour can be configured easily through the main (and unique) object the script uses (for more information, you can read the instructions in README.htm). But if you are lazy, although it would be less safe, you just need to include the .js file in your website and change the class name (or add to the current classes a new one) of the elements containing the links to the emails (the class name should be “easpm123” by default).

In order to start using this API, the “.js” file you choose (for example, easpm123_min.js which is already minified) must be included in your document. The most common way to do this is by using a tag:

<!-- NOTE: Edit the "src" property to point to the right location of the .js file: -->
<script src="easpm123_min.js" type="text/javascript" language="javascript"></script>

If we decide to use the main (and unique) object, this is how it looks like:

EASPM123
(
    autoLoad,
    //Next values can be set to null to force using default ones or use
    //an empty array if you do not want any value at all:
    linkClasses,
    withoutNoSpamElementClasses,
    linkIDs,
    withoutNoSpamElementIDs,
    textsToClear,
    atSymbolAliases,
    eventNames
);

The parameters accepted are the following ones:

Parameter Type Default value Mandatory? Description
autoLoad boolean true No If it is set to true, the script will be loaded automatically (the run method will not be needed to be called) when the document is ready. If it is set to false, all the rest of parameters will be ignored and they will need to be used in the run method instead.
linkClasses array of strings [“easpm123”] No Class names used by the tags (which contain a link to an email address) that will be affected.
withoutNoSpamElementClasses array of strings [“easpm123_label”] No Class names of the “without-no-spam” elements that will be removed.
linkIDs array of strings [“easpm123”] No IDs used by the tags (which contain a link to an email address) that will be affected.
withoutNoSpamElementIDs array of strings [“easpm123_label”] No IDs used by the “without-no-spam” elements that will be removed.
textsToClear array of strings [“NO_SPAM_WELCOME”] No Texts to be removed (case sensitive) from the email address.
atSymbolAliases array of strings [“{AT_HERE}”] No Texts that will be replaced by the AT (@) symbol.
eventNames array of strings [“mouseover”, “click”, “touchstart”] No Events that will fire the script. Those events will be attached to all affected tags (which contain a link to an email address) and also to all the affected “without-no-spam” elements. Use an empty array to run the script automatically without events.

Note that, except for the first parameter (autoLoad), all the rest of the parameters can accept the null value if we want to use their default value or can also accept an empty array (as for example the [] value) in the case that we do not want any value at all. In the case of the last parameter (eventNames), using an empty array will force the script to run its magic automatically without having to fire any event (not recommended as the safety would be decreased).

If the autoLoad parameter is set to false (not recommended), the rest of parameters will be ignored and the run method will have to be called manually when desired (always after the document has been loaded!). This method accepts the same parameters as the main object except the first one (it does not need the autoLoad parameter). Read below to see an example showing how to use it.

Have in mind that, as soon as the script is included, it will run itself once with the default options. We can run it again (through either the main object or the run method), if desired, after that.

The main object can only be used before the onload event of the window object is fired. If we want to run the script after that, we need to use the run method instead. In fact, the run method can only be used after the onload event of the window object is fired.

See the examples below for more information.

Example #1 – Easiest way for the developer (not so safe), with just HTML:

Note that, after the script is included, it immediately modifies the onload event of the window object (keeping any previous event, so it will not override anything) to execute itself after some milliseconds (it does not do it immediately to get rid of some spambots which will not have this into account). If, during the time between the inclusion of the script and the milliseconds (100 by default) before its executed itself, the onload event of the window object is overrided, this example will simply not work.

This way, any tag whose id is easpm123 or class property contains the easpm123 class, will be affected. The default text to remove from the email will be “NO_SPAM_WELCOME” and the “{AT_HERE}” text will be replaced by the AT (@) symbol.

The text inside of the elements whose id is easpm123_label or class property contains the easpm123_label class will be removed automatically when the page loads. These elements are called “without-no-spam” elements and are useful for the users when JavaScript is not available.

The real email address will be shown when the user is over or clicks or taps the email link (the tag described above).

HTML:

<!-- Using ID: -->
<a id="easpm123" href="mailto:email{*AT_HERE*}NO_SPAM_WELCOMEexample.com">email{*AT_HERE*}<del style="text-decoration:line-through;"><s>NO_SPAM_WELCOME</s></del>example.com</a>
<span id="easpm123_label">(without NO_SPAM_WELCOME)</span>
<br />
<!-- Using class: -->
<a class="easpm123" href="mailto:email{*AT_HERE*}NO_SPAM_WELCOMEexample.com">email{*AT_HERE*}<del style="text-decoration:line-through;"><s>NO_SPAM_WELCOME</s></del>example.com</a>
<span class="easpm123_label">(without NO_SPAM_WELCOME)</span>

Example #2 – Easiest way for the user (very unsafe), with a bit of JavaScript and HTML:

This methods needs a little bit of JavaScript (using an empty array as the eventNames parameter) but will not need any event fired by the user. The script and its magic will be performed automatically. The users can be happier this way but some spambots will be too. Safety wise, this method is not recommended.

As we are using the main object, this must be run before the onload event of the window object is fired.

JavaScript:

EASPM123(true, null, null, null, null, null, null, [] /* eventNames */);

HTML:

Use the same HTML code from the Example #1.

Example #3 – Second easiest way for the user (still unsafe), with a bit of JavaScript and HTML:

This will be little bit safer than the Example #2 as we change default values by the desired ones. Different IDs and class names have been used just to show how it works.

As we are using the main object, this must be run before the onload event of the window object is fired.

JavaScript:

EASPM123
(
    true, //autoLoad.
    ["class_email_link", "class_email_link2"], //linkClasses.
    ["class_without_no_spam_label", "class_without_no_spam_label2"], //withoutNoSpamElementClasses.
    ["id_email_link", "id_email_link2"], //linkIDs.
    ["id_without_no_spam_label", "id_without_no_spam_label2"], //withoutNoSpamElementIDs.
    ["WITHOUT_THIS_TEXT", "TAKE_THIS_OUT"], //textsToClear
    ["[PUT_AT_HERE]", "{HERE_AN_AT_SYMBOL}"], //atSymbolAliases.
    [] //eventNames.
);

HTML:

<!-- Using ID: -->
<a id="id_email_link" href="mailto:email[PUT_AT_HERE]WITHOUT_THIS_TEXTexample.com">email[PUT_AT_HERE]<del style="text-decoration:line-through;"><s>WITHOUT_THIS_TEXT</s></del>example.com</a>
<span id="id_without_no_spam_label">(without NO_SPAM_WELCOME)</span>
<br />
<a id="id_email_link2" href="mailto:email[PUT_AT_HERE]WITHOUT_THIS_TEXTexample.com">email[PUT_AT_HERE]<del style="text-decoration:line-through;"><s>WITHOUT_THIS_TEXT</s></del>example.com</a>
<span id="id_without_no_spam_label2">(without NO_SPAM_WELCOME)</span>
<br />
<!-- Using class: -->
<a class="class_email_link" href="mailto:email{HERE_AN_AT_SYMBOL}TAKE_THIS_OUTexample.com">email{HERE_AN_AT_SYMBOL}<del style="text-decoration:line-through;"><s>TAKE_THIS_OUT</s></del>example.com</a>
<span class="class_without_no_spam_label">(without NO_SPAM_WELCOME)</span>
<br />
<a class="class_email_link2" href="mailto:email{HERE_AN_AT_SYMBOL}TAKE_THIS_OUTexample.com">email{HERE_AN_AT_SYMBOL}<del style="text-decoration:line-through;"><s>TAKE_THIS_OUT</s></del>example.com</a>
<span class="class_without_no_spam_label2">(without NO_SPAM_WELCOME)</span>

Example #4 – Not-so-easy way for the user (safer), with a bit more of JavaScript and HTML:

This is like the Example #3 but only firing the script under the default events (onmouseover, onclick and ontouchstart) and not automatically.

As we are using the main object, this must be run before the onload event of the window object is fired.

JavaScript:

EASPM123
(
    true, //autoLoad.
    ["class_email_link", "class_email_link2"], //linkClasses.
    ["class_without_no_spam_label", "class_without_no_spam_label2"], //withoutNoSpamElementClasses.
    ["id_email_link", "id_email_link2"], //linkIDs.
    ["id_without_no_spam_label", "id_without_no_spam_label2"], //withoutNoSpamElementIDs.
    ["WITHOUT_THIS_TEXT", "TAKE_THIS_OUT"], //textsToClear
    ["[PUT_AT_HERE]", "{HERE_AN_AT_SYMBOL}"], //atSymbolAliases.
);

HTML:

Use the same HTML code from the Example #3.

Example #5 – A little-bit-more-difficult way (a bit safer), with more JavaScript and HTML:

This is like the Example #4 but using the run method instead of the main object. So instead of running the script automatically we will do it manually.

Note that the main object must be used before the onload event of the window object is fired but the run method must be run after that.

For safety purposes, the main object waits by default 100 milliseconds before it runs the script automatically. In this example we will wait a little bit more to add even more safety.

JavaScript:

setTimeout
(
    function()
    {
        EASPM123.run
        (
            ["class_email_link", "class_email_link2"], //linkClasses.
            ["class_without_no_spam_label", "class_without_no_spam_label2"], //withoutNoSpamElementClasses.
            ["id_email_link", "id_email_link2"], //linkIDs.
            ["id_without_no_spam_label", "id_without_no_spam_label2"], //withoutNoSpamElementIDs.
            ["WITHOUT_THIS_TEXT", "TAKE_THIS_OUT"], //textsToClear
            ["[PUT_AT_HERE]", "{HERE_AN_AT_SYMBOL}"], //atSymbolAliases.
            []
        );
    },
    300
);

HTML:

Use the same HTML code from the Example #3.

Improving safety

To improve the safety and get rid of as many spambots as possible I recommend the following:

  1. Do not fire the script automatically (without needing events). So, do not do as the Example #2 or Example #3.
  2. Do not use the default values for the text which replaces the AT (@) symbol. Use your imagination to invent new ones. Look at the Example #4.
  3. Do not use the default values for the text which should be removed from the email address. Use your imagination to invent new ones. Look at the Example #4.
  4. Do not use the default values for the classes or IDs (for both, elements and the “without-no-spam” elements) and use your own ones. Look at the Example #4.
  5. Use the run method instead of the main object and call it some milliseconds after the onload event of the window object is fired. Look at the Example #5.
  6. Images or other elements instead of text can be used inside the “without-no-spam” elements to make it harder for the spambots to figure out the email address. Have in mind that some browsers can have images disabled or even some people could not see them properly.
  7. You can consider about using other events instead of the default ones to fire the script. That could, maybe, improve safety.
  8. If you are paranoid enough, you can consider using different ways to obfuscate the strings in the arrays used in the optional parameters and also use other ways of obfuscating. Again, use your own imagination.

Final comments

Following the instructions and some guidelines (included inside the package), the email addresses should be human-understandable even when JavaScript is disabled.

If you are tired of being spammed, you should try this little script (with an email address which spambots do not know yet!).

Live example: http://htmlpreview.github.io/?https://github.com/jalbam/easpm123/blob/master/test_min_eval.htm

License

Forbidden to use without keeping the author’s name and copyright clauses. Other than that, just use this script freely but never sell it!

Super Queue – queue and lottery viral game in PHP and JavaScript (November 2014)

I made this game for a Chinese software company whose final client was a chain of jewelry stores that wanted a Weixin (aka WeChat) game to promote themselves by giving the players some prizes and coupons just during a week (to celebrate the Chinese Single’s day, the 11th of November). Weixin (WeChat) is the most used instant messaging client for mobile devices in China, made by Tencent (the same company that also owns QQ). It was finished on 7th November 2014 (approximately).

Screenshots

The graphics are made by 乔安 (Qiao An) and Chinese translation is done by 董双丽 (Dong Shuangli). The development took almost one month.

The game consists of two levels. In the first level, you are waiting in a queue and your mission is to jump the queue until you can enter the door. Once you enter through the door, the second level consists in waiting for a partner of the opposite gender (it can be either a real player or a fake one if the game is configured to use fake players or the admin force it) and, when you get a partner, then each of you have to spin a roulette wheel with zodiac symbols and both will win a prize if you both get the same zodiac symbol. If you get a different symbol, you get a discount coupon instead.

It is a viral game because players have to share the game to others in order to jump the queue they are waiting in. Every time someone registers through your invitation, you will jump two places. But others will also be able to jump and move in front of you so it becomes a kind of fight.

Players do not need to have the game open all the time. So they can close the game and open it again later whenever they want to. If any progress has been made or any thing new has happened, the game will show it.

There is a maximum number of people per queue, so the game creates a “new world” with a new queue every time a person joins the game for the first time if all other queues are full. The game also fills the queue with fake people in order to increase level difficulty and to avoid looking empty. All of that is configurable through variables.

The way to log in, prizes, maximum people per queue, chances to win, and many other things can be configured through the configuration file.

The game already includes Chinese and English languages. There is also a localization file that allows to translate the game into many more languages easily. The game will try to detect automatically the user’s language.

The company wanted to run the game just for a week. During this week, the game was a complete success and had more than 50,000 players. All prizes were given out.

The game was running on Weixin (WeChat) and uses some of its functions, but it can be configured without effort to be used in any other app or platform (as for example in QQ, Facebook or any web browser with JavaScript and CSS enabled).

There is a debug mode which can be accessed through a password. That debug mode shows useful information about the game in real time and it also provides an admin control panel (similar to a God mode panel) with many options to cheat, control other players, etc.

It also includes an overload test page to check server limits.

This game was made using technologies as HTML, CSS / CSS 3, JavaScript, JSON, XHR (AJAX), PHP, mySQL, RPC (Remote Procedure Call), OpenID, OAuth, Weixin API (WeChat API) / WeixinJSBridge, etc.

You can try the game by yourself just creating the database needed (a SQL file with the required tables is included) and editing the configuration file to use that database. Basically, you just need a web server that supports PHP and mySQL.

It can be found on GitHub: https://github.com/jalbam/super_queue

TetrisDAI – Tetris in Java (May 2008)

“TetrisDAI” is an open source Tetris clone (highly modular) written in Java 1.6 (aka Java SE 6) with NetBeans.

Screenshot

It is my first Java game and was made in mid 2008.

The code is extremely modular and is ready to be modified and configured pretty easily by anyone. For instance, you can change control keys, their delay, add new pieces with different shapes or change the current ones or even delete them, change the colour of the whole game (including the pieces), change game visual aspect and sizes (width and height of the cells and of the map, text aspect, margins), decide whether to use images or just simple computer-generated graphics for cells and background, decide language (game is already translated into Spanish, Catalan and English and just needs to change a variable to choose one among those languages) or add new languages easily, change menu items, change initial speed and speed increase when next level is reached, change needed lines to finish a level, modify score system (score for piece placed, score for each line and exponential score increase for multiple lines), enable or disable sound and so on.

Official language is English but the code also includes Spanish and Catalan translations (as stated before, just by changing a variable, all the game will use the desired language).

This game has been tested under Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, Haiku OS and others.

Official web site: http://tetrisdai.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/tetrisdai/).

It can also be found on GitHub: https://github.com/jalbam/tetrisdai

Gamoliyas – Game of Life in JavaScript (August 2007)

“Gamoliyas” is an open source Conway’s Game of Life version (highly configurable) totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my ninth DHTML game and was made in mid 2007.

Players can configure the game with many options, as changing the world size, choosing between spherical and limited world, using colours that change depending on the number of neighbours, changing speed, saving a world or opening a previously stored one, drawing cells yourself or generating them randomly, etc.

The game is specially designed to allow to be used inside any other web site (by using an IFRAME, for example). We just need to get the URL (which will be used in the SRC parameter of the IFRAME tag) generated by the “save world” option with the desired behaviour we have decided in the options that the game will ask us (world size, auto-play, spherical world, multicolour, hide top menu, hide bottom controls, hide bottom information panel, do not allow to draw, speed, size of the cells and space between cells). The game accessed through that URL will start containing the cells which were present when we pressed the “save world” option. You can see a live example using this game with an IFRAME in my personal portfolio: http://www.joanalbamaldonado.com/portfolio/

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

This game only uses a few images which are not necessary to make it work if we are using the game with the panels and such hidden. So all the rest you can see has been made using just pure HTML and CSS.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: http://gamoliyas.tuxfamily.org/gamoliyas_english/

Play online in English (mirror): http://www.dhtmlgames.com/gamoliyas/gamoliyas_english/

Play online in Spanish: http://gamoliyas.tuxfamily.org/gamoliyas_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/gamoliyas/gamoliyas_spanish/

Official web site: http://gamoliyas.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/gamoliyas/).

It can also be found on GitHub: https://github.com/jalbam/gamoliyas

Hundiyas – Battleship game in JavaScript (June 2007)

“Hundiyas” is an open source Battleship (aka Battleships or Sea Battle) game totally written in DHTML (HTML, CSS and JavaScript). Highly configurable.

Screenshot

It is my eighth DHTML game and was made in mid 2007.

Players can configure the game with many options. For instance, you can change board size, decide whether to allow bombing same cell more than once or not, whether to allow to place two ships next to each other without any space between them or not, whether to mark already bombed cells or not, decide who will start playing first and choose among three difficulty levels (easy, normal and hard) that will change the AI (Artificial Intelligence) of the game.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: http://hundiyas.tuxfamily.org/hundiyas_english/

Play online in English (mirror): http://www.dhtmlgames.com/hundiyas/hundiyas_english/

Play online in Spanish: http://hundiyas.tuxfamily.org/hundiyas_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/hundiyas/hundiyas_spanish/

Official web site: http://hundiyas.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/hundiyas/).

It can also be found on GitHub: https://github.com/jalbam/hundiyas

Some C games (2006 to 2007)

Here are some games in C language I made during the time I was studying the “Programació estructurada i modular / Programación estructurada y modular” (Structured and modular programming) subject that belonged to “CFGS DAI (Ciclo Formativo de Grado Superior en Desarrollo de Aplicaciones Informáticas)” which is a Software development associate degree equivalent (similar to Foundation degree in the UK, Diploma of Higher Education in Scotland or Higher Certificate in the Republic of Ireland) at IES Baix Camp school in Reus city (Spain).

Screenshot

All are text-based games. It includes a Blackjack (aka Twenty-one) card game, a roulette game (with four different ways to play), a John Conway’s Game of Life (cells can be inserted either manually or randomly), a Mastermind game, Buscacaminas (pathfinding program with some Minesweeper characteristics), Pongetet (a pong game) and Pilotes (just a bouncing text generator). The IDE used was Bloodshed Dev-C++.

They can be found on GitHub: https://github.com/jalbam/c_games

La villa del seis – horror adventure game in PHP and DHTML (September 2006)

“La villa del seis” (aka “La villa del 6”) is an open source adventure game written in PHP, HTML, CSS and JavaScript.

Screenshot

This game was made in late 2006 and uses the engine of Yasmina’s Quest that I made before, modified and improved. It was made together with Yasminan Llaveria del Castillo and some of the photos used were taken by Esteban Villegas Gallego.

Official languages are Spanish and Catalan.

It has become quite famous on the Internet, with thousands and thousands of downloads and online players. It was even mentioned in at least one well-known Spanish magazine called “Año/Cero” in an article titled “La ruta de los pueblos condenados” written by José Manuel Serrano Cueto and published in January 2007 (on paper as well as on-line).

Since this has the Yasmina’s Quest engine but improved, some people has chosen the code of this game to create their adventure instead of using the Yasmina’s Quest code. As well as Yasmina’s Quest, the game can be played either as a point-and-click adventure or as a text adventure and it can run in any kind of web browser. JavaScript and CSS are useful but not really necessary. Images are not necessary either, allowing the game to be played in a text-based web browser as Lynx or Links.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, QNX, BlackBerry Tablet OS, Android, iOS and others. In its homepage you can see some screenshots with the game running on many different platforms such as Nintendo DS, Sony PSP, Sega Dreamcast and Pocket PC.

Recently (27 September 2018), a new package using php-webkit was added so it can be played offline on Windows XP with SP2 (Service Pack 2) and newer (including Windows 10). Just download the la_villa_del_seis_php-webkit_win32.zip or the la_villa_del_seis_php-webkit_win32.7z file. The la_villa_del_seis_php-webkit_win32_installer.exe file also provides an installer for the same package. Porting the same package to other operating systems and platforms should not be too difficult. For some older Windows versions (older than Windows XP with SP2), the la_villa_del_seis_on_server2go.zip file (la_vila_del_sis_on_server2go.zip file in Catalan) provides an older package which uses Server2Go.

Play online in Spanish: http://lavilladel6.tuxfamily.org/lavilladel6_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/lavilladel6/lavilladel6_spanish/

Play online in Catalan: http://lavilladel6.tuxfamily.org/lavilladel6_catalan/

Play online in Catalan (mirror): http://www.dhtmlgames.com/lavilladel6/lavilladel6_catalan/

Official web site: http://lavilladel6.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/lavilladel6/).

It can also be found on GitHub: https://github.com/jalbam/lavilladel6

Conectayas – Connect four, Tic-tac-toe and similar connection games in JavaScript (September 2006)

“Conectayas” is an open source Tic-tac-toe, Connect four (aka Four in a row) and similar style games (highly configurable) totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my seventh DHTML game and was made in late 2006.

In fact, this game is not only a game but many since the player can configure it to play Tic-tac-toe, Connect-4 and other similar games. You can configure the number of human players (1 or 2 players), who will start playing first (first player or second player which can be either the computer or a human), board size, the necessary pieces in a line to win, the colour of the pieces and choose whether to use gravity or not (with gravity the pieces will fall down as in Connect-four).

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the backgrounnd image you just need to replace it with another one.

This game only uses one image for the background which is not necessary to make it work, so all the rest you can see has been made using just pure HTML and CSS.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget and even a Drupal module found at https://www.drupal.org/project/connectiv.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: http://conectayas.tuxfamily.org/conectayas_english/

Play online in English (mirror): http://www.dhtmlgames.com/conectayas/conectayas_english/

Play online in Spanish: http://conectayas.tuxfamily.org/conectayas_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/conectayas/conectayas_spanish/

Official web site: http://conectayas.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/conectayas/).

The repository can be found on GitHub: https://github.com/jalbam/conectayas

Buscayasminas – Minesweeper game in JavaScript (August 2006)

“Buscayasminas” is an open source Minesweeper game (configurable) totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my sixth DHTML game and was made in mid 2006.

Players can configure the game with some options. You can change the number of mines, board size and set a time limit (in seconds) or disable it.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: http://buscayasminas.tuxfamily.org/buscayasminas_english/

Play online in English (mirror): http://www.dhtmlgames.com/buscayasminas/buscayasminas_english/

Play online in Spanish: http://buscayasminas.tuxfamily.org/buscayasminas_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/buscayasminas/buscayasminas_spanish/

Official web site: http://buscayasminas.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/buscayasminas/).

The repository can be found on GitHub: https://github.com/jalbam/buscayasminas

Yasminoku – Sudoku game, generator and solver in JavaScript (July 2006)

“Yasminoku” is an open source Sudoku (game, generator and solver) totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my fifth DHTML game and was made in mid 2006.

The game will generate sudokus and the player will have to solve them. It is not only a normal sudoku game but also a sudoku solver, allowing users to introduce their own sudoku in order to solve it.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script.

This game doesn’t use any image at all, just pure HTML and CSS.

The game has been quite successful and famous, included for instance in a famous Spanish online newspaper called “Libertad Digital“.

Official languages are Spanish and English. You can find a lot of translations in other languages over the Internet, including German, French, Portuguese, Czech, Hungarian and Chinese.

Other modified and adapted versions of this game can be found on the Internet, including one Opera widget and several translations.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

UPDATE (9th December 2014):

The new improved version (0.75a) comes with some bug fixes, using some CSS3 effects and HTML5, a better mobile devices support, autosave (using Web Storage and falling back to cookies if not supported), it is printer-friendly, it adapts automatically to any screen resolution (200 x 180 is the minimum), improves browser integration (can be included easily in any web site with an IFRAME, for example), is available for and ported to many platforms and can be ported to many more (it is compatible with Apache Cordova, PhoneGap Build, PhoneGap, Intel XDK, BlackBerry WebWorks, virtually any browser extension guidelines and so on), and is now multilingual with language auto-detection (main version includes Chinese, English, Catalan and Spanish languages and it is very easy to add new ones).

It can be controlled by mouse (or finger on mobile devices) and/or keyboard (gamepads on some devices as Wii or some remote control on some TV devices should also work).

Through the new configuration menu, you can choose language (in the case you are not happy with the auto-detected one), disable autosave, change the way the game helps you, set the number of seconds the on-the-fly calculated solution is displayed and disable some visual effects (in order to improve performance).

The game is specially designed to allow to be used inside any other web site (by using an IFRAME, for example). We just need to get the URL (which will be used in the SRC parameter of the IFRAME tag) generated by the “Share” option (inside the configuration menu). If we want to configure it even more, we can set or edit some parameters included in the generated URL (you can read more about it in the game’s website). You could even use another sudoku generator and send the generated sudoku to the game through a parameter of its URL.

Since you can choose the initial numbers, from 0 to 81, keep in mind that sometimes the game can generate sudokus with more than one solution.

Native ports that have been tested should work properly. Browser version will work virtually everywhere, in modern browsers as well as in old ones (including Internet Explorer 5.0).

Apart from the normal version (for web browsers), some ports and versions include Android (including Nokia X and Fire OS which is used by Amazon Kindle Fire, Amazon Fire TV, Amazon Fire TV, Fire Phone, etc.), iOS (iPhone, iPod Touch, iPad), BlackBerry 10, BlackBerry Tablet OS (BlackBerry PlayBook), Nokia Series 40 (S40) / WRT Widget, Nokia Asha widget / W3C Packaged Web App (W3C Widget), Windows Phone 7 & 8, Chrome OS / Chromium OS (Google Chrome App), Firefox OS (Mozilla Firefox App), Mozilla Firefox Add-on, Opera Extension (Opera add-on), Google Chrome extension, Safari extension, Microsoft Edge extension, WebOS, Facebook App, Windows 32 bit (including installer), Apple Mac OS X (Intel), Linux x86 (32 bit and 64 bit), Raspberry Pi and compatible (Linux as Raspbian or Pidora), etc.

To read more about how to use it in your web site, port it to other platforms, translate it to other languages, etc. please, refer to its official site below.

Play online in multiple languages: http://yasminoku.tuxfamily.org/new/online/

Play online in multiple languages (mirror): http://www.dhtmlgames.com/yasminoku/new/online/

Official web site: http://yasminoku.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/yasminoku/).

The repository can be found on GitHub: https://github.com/jalbam/yasminoku

Yasminuroban – Sokoban game in JavaScript (March 2006)

“Yasminuroban” is an open source Sokoban (aka Warehouse keeper) version totally written in DHTML (HTML, CSS and JavaScript). With level editor.

Screenshot

It is my fourth DHTML game and was made in early 2006.

The game includes a level editor and, as far as I know, it is the first level editor ever made using JavaScript. It allows you to modify the current level or create a new one to play it after you press the “Play map” option. You can also copy the generated JavaScript code which can be used to modify the game code by yourself, for example.

You can also change the game behaviour or add new levels easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet (with configurable skins or themes and with many sets of levels that the player can choose), including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X and others.

Play online in English: http://yasminuroban.tuxfamily.org/yasminuroban_english/

Play online in English (mirror): http://www.dhtmlgames.com/yasminuroban/yasminuroban_english/

Play online in Spanish: http://yasminuroban.tuxfamily.org/yasminuroban_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/yasminuroban/yasminuroban_spanish/

Official web site: http://yasminuroban.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/yasminuroban/).

The repository can be found on GitHub: https://github.com/jalbam/yasminuroban

Tetríssimus – Tetris game in JavaScript (March 2006)

“Tetríssimus” is an open source Tetris clone totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my third DHTML game and was made in early 2006.

Editing the game code in order to add new pieces with different shapes or change the current ones or even delete them is very easy. You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the background image you just need to replace it with another one.

This game only uses one image for the background which is not necessary to make it work, so all the rest you can see has been made using just pure HTML and CSS.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget and even a Drupal module found at https://www.drupal.org/project/tetris.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X and others.

Play online in English: http://tetrissimus.tuxfamily.org/tetrissimus_english/

Play online in English (mirror): http://www.dhtmlgames.com/tetrissimus/tetrissimus_english/

Play online in Spanish: http://tetrissimus.tuxfamily.org/tetrissimus_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/tetrissimus/tetrissimus_spanish/

Official web site: http://tetrissimus.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/tetrissimus/).

The repository can be found on GitHub: https://github.com/jalbam/tetrissimus

PunkPong – Pong game in JavaScript (February 2006)

“PunkPong” is an open source Pong clone totally written in DHTML (HTML, CSS and JavaScript).

Screenshot

It is my second DHTML game and was made in early 2006.

It allows you to use either mouse or keyboard to control your paddle.

Despite the fact that it is very easy in the beginning, the difficulty increases slowly every level and the computer will be much harder to beat.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script.

This game doesn’t use any image at all, just pure HTML and CSS.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget and even a Drupal module found at https://www.drupal.org/project/pong.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: http://punkpong.tuxfamily.org/punkpong_english/

Play online in English (mirror): http://www.dhtmlgames.com/punkpong/punkpong_english/

Play online in Spanish: http://punkpong.tuxfamily.org/punkpong_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/punkpong/punkpong_spanish/

Official web site: http://punkpong.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/punkpong/).

The repository can be found on GitHub: https://github.com/jalbam/punkpong

La Ranísima – Space Invaders alike game in JavaScript (February 2006)

“La Ranísima” is an open source game that was written totally in DHTML (HTML, CSS and JavaScript) and was inspired by the Space invaders classic although uses infantile graphics that will be loved by the youngest children.

Screenshot

It is my first DHTML game and it was made in early 2006 based on DOM manipulation, when almost nobody knew about the power of JavaScript for game development and all the technologies involved related with that were unknown by the vast majority of developers who preferred to develop games using Flash or even Java.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X and others.

Play online in English: http://ranisima.tuxfamily.org/ranisima_english/

Play online in English (mirror): http://www.dhtmlgames.com/ranisima/ranisima_english/

Play online in Spanish: http://ranisima.tuxfamily.org/ranisima_spanish/

Play online in Spanish (mirror): http://www.dhtmlgames.com/ranisima/ranisima_spanish/

Official web site: http://ranisima.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/ranisima/).

It can also be found on GitHub: https://github.com/jalbam/ranisima

La carta más alta – card game in PHP and HTML (December 2005)

“La carta más alta” is an open source card game made with PHP, HTML and a little bit of CSS. It was created on 19th December 2005 (approximately).

Screenshot

It is in Spanish language and will work in any web browser, even without CSS support.

The game is minimalist and it doesn’t use any image at all but only text created with pure HTML and tables. So you will be able to play it in a text-based browser too, such as Links and Lynx.

This cross-platform and cross-browser game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, QNX, BlackBerry Tablet OS, Android, iOS and others.

Play online: http://lcma.tuxfamily.org/lcma_spanish/

Play online (mirror): http://www.dhtmlgames.com/lcma/lcma_spanish/

Official web site: http://lcma.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/lcma/).

It can also be found on GitHub: https://github.com/jalbam/lcma

Yasmina’s Quest – adventure game engine in PHP and DHTML (November 2005)

“Yasmina’s Quest” is an open source adventure game engine that comes with one adventure game as example (in Spanish) totally written using PHP, HTML, CSS and JavaScript. It was created on 17th November 2005 (approximately).

Screenshot

The games created with this engine can be played either as a point-and-click adventure (using mouse, pointer or your finger) or as a text adventure (using keyboard or any other text input method) and they are totally cross-browser and cross-platform.

Although it uses JavaScript in order to improve user interface, it is not mandatory and it works with any web browser without JavaScript support. Similarly, CSS is an advantage but not actually necessary. Even images are not necessary!

The characteristics of this engine are unique, letting developers create adventures that work in all web browsers and taking advantage of JavaScript and CSS to improve the user experience only if it is available. You will be able to play the game even in text-based web browsers such as Links and Lynx.

So far, I don’t know any other engine that works in all web browsers which let users play the same adventure in both modes, point-and-click adventure and text adventure.

It has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, QNX, BlackBerry Tablet OS, Android, iOS and others.

This engine has been used by some other people to create their own adventure.

Play online: http://yquest.tuxfamily.org/yq_spanish/

Play online (mirror): http://www.dhtmlgames.com/yquest/yq_spanish/

Official web site: http://yquest.tuxfamily.org/ (mirror at http://www.dhtmlgames.com/yquest/).

It can also be found on GitHub: https://github.com/jalbam/yquest