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. š