Introduction

This is a webpage Gluttonous Snake game built on JavaScript.

Game link: https://patorjk.com/games/snake/
Code & file link: https://github.com/patorjk/JavaScript-Snake

Reason for choice:

All of our group members are very familiar with this Gluttonous Snake game, and we had fun with it, thus we reached a unanimous agreement on localizing this game;
Apart from the text shown in the interface, this game contains more hidden texts, which provides our group with a good opportunity to challenge ourselves in webpage game localization.

Our team localized this game into three locales: Chinese, French, and Korean, with 24Ways.

Workflow

Locate the to-localize texts
Extraction and concatenation (24ways)
Actual translation (3 locales)
Add language switcher
Formatting: fonts, text truncation, etc.

We used Jira (Kanban) to track our workflow.

Our Work Process

1. Location of texts

The to-localize texts basically are scattered in two files: index.html and snake.js. The difficulties lie in the following: 1. some codes are wrapped in the text; 2. there are variables(numbers, or to say, grades of this game) in the texts. So we used “%1$s” to represent the “highScore” variable here:

2. Extraction & Concatenation

We built an “en-US.json” file to store the to-localize texts in the snake.js file. To test whether the concatenation works, we added an “~” sign in the test round. For the texts embedded in the index.html file, we built three index files for our three locales, and translated them into index_zh-CN.html, index_fr.html, index_ko-KR.html files:

3. Translation

We used Phrase TMS to translate the to-localize texts in our en-US.json file. This reduce the time we spent on translation. And we only need to modify the auto-generated translation by MT, accept them, and download the files back to our project.

4. Add Language Selector

We added buttons to the toolbar at the top of the page. And here is the code:

function changeLanguage(lang) {
  document.documentElement.lang = lang;

  var newUrl;
  switch (lang) {
    case 'zh-CN':
      newUrl = 'index_zh-CN.html'; 
      break;
    case 'fr-FR':
      newUrl = 'index_fr-FR.html';
      break;
    case 'ko-KR':
      newUrl = 'index_ko-KR.html'; 
      break;
    default:
      newUrl = 'index.html'; 
  }
  window.location.href = newUrl;
}

I defined a function called changeLanguage() to enable the buttons to switch between four languages. And the code “window.location.href = newUrl;” is to make sure that when users click the button, they won’t open a new tab in the browser, but refresh the current page. This prevents opening too many pages in the browser.

5. Finalize

The screenshots are the localized game page of Chinese locale:

All the elements are properly localized, including the toolbar, the interface, the dropdown list, and those “start game”, “pause game”, and “end game” alerts. Moreover, they are all displayed in proper formats with no text truncation.

Modification 1:

I tried to make the language switcher a dropdown list to maintain consistency with the game toolbar. However, very soon, I realized that it’s not helpful for users who might not be speakers of the current language, because they would not be able to understand what “language” means in the current language. So I changed to a button list.

Modification 2:

I found the “end game” alert message in the original game too plain. And inspired by other games, I added four more options for the alert message. And they will display randomly with the default alert message every time the user loses. And, of course, they are concatenated and localized.

Reflection

This project was harder than we thought it might be. But doing this project guided us thoroughly through the localization process of a webpage game built on JavaScript, during which we met several problems and solved them by ourselves. And the project is even more than simply dealing with codes on the computer. We also realized the importance to have a clear-structured workflow and clarify the assignment of each group member. To conclude, this is a challenging but rewarding experience. And I believe every new localizer can improve their localization ability in multiple means by choosing a favorite website to localize.

Here is one funny problem I believe worth sharing: During one test run, we found that the texts in the index.html file were successfully localized, yet the texts in the .js file weren’t. And we realized later that this is because we opened the wrong file in a wrong way. From this experience, we learnt that one of the difficluty in localizing a website could lie in some very simple mistakes. So we must stay cautious when “undergoing a surgery” on the codes.

Web Game Localization: Gluttonous Snake

Introduction

Workflow