Game Development Reference
In-Depth Information
To do this, we'll inject translations in the DOM on page load with JavaScript. Our convention to identify a
translation key is to have a
i18n-{key}
class on the DOM tag to replace the translation where
{key}
is the
key of the translation (the key should only contain alphanum and _ characters to be selected properly).
The example
Table 3-1 shows the English and French translations we used for the example.
Table 3-1.
Example Translations in English and French
Key
i18n['en'][key]
i18n['fr'][key]
hello_world
Hello world
Bonjour le monde
gamegoal_1
In SAME, your goal is to remove all
balls in the grid.
Dans SAME, l'objectif est de retirer toutes les
billes d'une grille
.
HTML code
<!doctype html>
<html>
<head></head>
<body>
<div><span class="i18n-hello_world"></span>. bla bla bla</div>
<div><span class="i18n-gamegoal_1"></span>. bla bla bla</div>
</body>
</html>
JavaScript i18n basic code
Listing 3-15 is a simple internationalizer code using jQuery or Zepto.
Listing 3-15.
Internationalizer Code
var Locale = { get: function(){ ... } };
var i18n = function() {
var lang, defaultLang = "en";
var dictionaries = {
"en": { "hello_world": "Hello world", "gamegoal_1": "In SAME, your goal is to
remove all balls in the grid." },
"fr": { "hello_world": "Bonjour le monde", "gamegoal_1": "Dans SAME, l'objectif
est de retirer toutes les billes d'une grille." }
};
var updateDOM = function() {
var dict = dictionaries[lang] || dictionaries[defaultLang];
for(var key in dict) $(".i18n-"+key).text(dict[key]);
}
return {
init: function() {
lang = Locale.get() || defaultLang;
