Yesterday I really wanted to make a multi-lingual so I decided to make a game in which you have to go through all of the books of the Bible as fast as you can. I still need to do some work on the game to make it more user-friendly, but the following (which can also be accessed here) is what I came up with:
As of when I wrote this post the game supported 9 languages including English, Spanish, Vietnamese, Korean, and Haitian Creole. I chose the languages based on those in which I could find the names of all 66 Bible books. In fact, in all cases except for Vietnamese I used the Online Watchtower Library on jw.org in order to get the bible book names, using this JavaScript code in the web console:
$('.book .name').map(function() {
return $(this).text();
});
As far as translating the rest of the words in the game, since I kept the amount of text to a minimum I simply used good ol’ Google Translate.
Since I wrote the server-side in PHP I ended up using $_SERVER['HTTP_ACCEPT_LANGUAGE']
to auto-detect the language if it wasn’t set:
$lang_code = valueOf($_REQUEST['lang'], preg_replace("/\W.*/", "", $_SERVER['HTTP_ACCEPT_LANGUAGE']));
Finally, I spent way more time than I wanted to on the rounded CSS3 buttons:
.round-button {
font-size: 64px;
line-height: 3em;
height: 3em;
width: 3em;
border-radius: 3em;
background: #000;
color: #FFF;
display: inline-block;
text-align: center;
font-family: fontello;
transition: 0.5s cubic-bezier(0.5,0.5,0.5,0.5) all;
cursor: pointer;
box-shadow: 0 0 0.25em #000;
z-index: 1;
position: relative;
border: 0.05em solid #000;
padding: 0.45em;
margin: 0.5em;
box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.5) inset, 0 0 0 #000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.round-button .text {
font-size: 0;
position: absolute;
line-height: 1em;
margin-top: -2em;
display: block;
width: 6em;
text-align: center;
text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
transition: 0.5s ease all;
}
.round-button:hover {
box-shadow: 0 0 0 0 #000 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
background: #FFF!important;
z-index: 2;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
color: #000;
padding: 0;
border-width: 0.5em;
}
.round-button:hover .text {
font-size: 0.5em;
text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
}
.round-button:active {
box-shadow: 0 0 1em 0.1em #777 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
transition: 0.1s ease box-shadow;
}
As you will see in the game, each rounded button is actually individually colored. For example, the following is for the facebook button:
.round-button.facebook {
background: #3b5998;
border-color: #3b5998;
}
.round-button.facebook:hover {
color: #3b5998;
}
All-in-all I am happy with how this game turned out but I would like to add a few improvements. Try the Bible Book Master game out yourself and let me know what you think. š