Category Archives: Technology

The World Simplest English Dictionary

Dictionary is a must-have tool for learning and improving one’s vocabulary. Having a good dictionary can make a huge difference to one’s language learning experience. It is for this reason that the world simplest English dictionary is built.

English Dictionary

English Dictionary: The World Simplest English Dictionary

It is the world simplest dictionary that does not have all the unnecessary clutters and distractions that you will find on other online dictionary websites like Oxford and Cambridge. It has the simplest design that let users to focus on the most important things, which are the definitions of the word, and nothing else. Therefore, it does not have audio pronunciation and other supports.

It is a pure text dictionary (no images or pictures) and it allows anyone to have a quick and easy way to access to the meaning of a word.

Technical detail about the world simplest English dictionary

This dictionary is a single page web application (or commonly known as SPA). The application only has a single page and the users will only be dealing with the same page all the times and it will never be refreshed therefore making the user experience much more friendly just like dealing with a desktop application.

To achieve that effect, it is using Ajax to request and update the content together with URI anchoring to store the state of the app which also serves as its single execution path. The advantage of URI anchoring is that the users can copy the URL of the dictionary and send the meaning to others directly.

The core of the application is using the web scraper technology to leverage the wealth of information that is available freely on the internet to get its content, which is the definitions for the word that the user queried. Currently it is querying the content from 2 distinct sources. The web scraper serves as a web service (which is the engine behind the application) for the dictionary.

All queries will be cached on the server. Some the more users using the dictionary, the more caches there will be. Each query has a distinct cache. So the application is actually building its own vocabulary. This also means that the more caches it has, the less web scraping the application need to do, therefore, making the tool runs faster.

The caches are also used as autocomplete suggestions when the users type into the input textbox. The more users are using the tool, the more suggestions there will be.

So just use it.





Cocos2d-JS: Edward de Bono’s L Game

With recently acquired game development skills with Javascript, I tried to work on another simple project. This time, it is a simple board game which is called L game.

L game

The L game was invented by Edward de Bono, who is the author of the book Six Thinking Hats
and also the originator of the term Lateral Thinking.

Six Thinking Hats

The six-thinking-hats is a practical thinking tool for humans to direct their attention into certain areas and let their ideas flow without any premature judgement when exploring new ideas. It is a software for human mind. The six thinking hats come in six different colors where white is for the neutral and factual thinking, green is for the creative thinking, red is for the emotional thinking, black is for the negative and cautious thinking, yellow is for the positive thinking and blue is for the cool and organizing thinking.

Lateral Thinking: Creativity Step by Step (Perennial Library)

Lateral thinking was first coined by Edward de Bono in the 1960s. According to him, traditional and conventional thinking has always been criticizing somethings. People remove and reject what are wrong until they reach a point where nothing else can be removed and called it the truth. They reach a conclusion by criticizing and by using logic … which is excellent. But anything is logical by hindsight, said Edward de Bono. This critical thinking is vertical and dangerous if used alone. Based on the author, we need another mode of thinking, which is the lateral thinking, to complement the excellent vertical thinking.

L game is a two-player game played on a 4×4 board. There are only two types of pieces. The first type is the 2×3 L-shape piece and there are only two pieces of L on the board. It is also why the game is called L game. The second type is the 1×1 dot piece and there are also two pieces of dot on the board.

Each player takes turn to change his/her L position (either the red or the blue L) and the L must be in different position than the initial position. Then he/she can move the one of the dot to any empty square or skip by giving up the right to move the dot.

The goal is to block the opponent until there is no more move for the opponent where the game ends and a winner is determined.

The game is being described in detail in this book The 5-Day Course in Thinking.

The 5-Day Course in Thinking

This book allows readers to find out their own thinking style by solving a series of problems that require no special knowledge and no mathematics. Edward de Bono stressed that being right is not always important since an error can lead to the right decision. The L game can be found in the book as an exercise.

In Edward de Bono’s own words,

The intention was to produce the simplest possible game that could be played with a high degree of skill. An attempt (L game) was made to fulfil the following conditions:

  1. A minimum number of playing pieces, preferably one each.
  2. The smallest possible board.
  3. A game with very few rules, one that would be very simple to learn and play.
  4. A game that could be played with a high degree of skill.
  5. A game that would not be determinate. A determinate game such as nim or noughts and crosses, is one in which the starting player could always win if he knew the strategy. An indeterminate game is one which two perfect players would play for ever.

Motivation

The motivation behind developing this game is that there are not many people doing it. I can only find one web version, one Apple store version and one Google Play version. And that’s it. Probably the game is not that popular. Still, I decided to make my version of it.

Another reason is to practice new skills on simple project. This game is simple enough for this purpose. You can learn more about the game from the wikipedia.

Development

Once again, I am using the open-source Cocos2d-JS game engine for this project.

It took me 3 days to complete the minimal-viable-product. 60 % of the time was used to understand the detail of the game’s dynamic like:

  • how to determine a valid move (it is not that obvious as I initially thought),
  • how to calculate all the valid moves,
  • how to allow player to undo steps,
  • how to write a simple AI (Artificial Intelligence) to play against human or even with AI itself,
  • etc.

There is no sound at all for this version to save the development time.

Final result

L Game

L Game

My version of L game is available on the web here.

It is also available on Google Play.

Get it on Google Play

Get it on Google Play

What I like about the game is the capability to allow the computer to play against the computer. It is really amazing to look at game played automatically by the robot. I admit I spent most of the time watching the computer playing the game on automation. It almost seems like it has a life of its own.

Demo

You can try the game below.

Thanks.

Rapid Mobile Game Development With Javascript

I have long been searching for a free framework or library to develop cross-platform mobile apps since May 2015. So far, I don’t get a satisfactory result. Most of the libraries, frameworks, tools or platforms (or whatever) out there are NOT FREE. Almost all of them require a hefty monthly subscription.

What I need is something free to play with. I stumbled upon Cocos2d-x when I was reading a magazine (Forbes China of year 2013 or 2012 bought by my sister) about a month ago. It is being using by a 30-something young guy, who is a self-made multi-millionaire and a game developer, to develop mobile games. He later even acquired the engine and maintained the open-source nature of the project.

This article caught my attention. According to that guy, Cocos2d-x engine is being used by roughly 70% of Asian mobile game developers. With such a huge adoption rate of the engine, I thought to myself that I could not go wrong by being part of its community, right? After all, it is open-source and free to use.

The really good thing with Cocos2d-x, other than being a cross-platform game engine (for Android, iOS, Web), is that it can also be used to develop mobile apps (you don’t have to limit yourself to game development). Not to mention that the number of resources you can get when you are stuck with certain technical issues with Cocos2d considering that it is one of the widely used game engine and its community is huge. It also supports multiple languages (C++, Javascript and Lua).

Investment on Cocos2d-x

Following that discovery, I started exploring the Cocos2d-x framework and invested times reading about it. I read 4 books and they are extremely easy to following and I am impressed.

Cocos2d-x Game Development Essentials

This book is the introduction to Cocos2d-x and in it you learn about the basic and crucial concepts used in the engine and how to setup your environment for development. After reading it, you will have all the necessary pieces (like adding menu, adding sound, using accelerometer, using physic engine, etc) to develop a full interactive mobile game. One thing to note is that this book uses C++ and Xcode (with Mac) or Eclipse along with the examples given. After all, this is a short book.

Building Android Games with Cocos2d-x

This book goes through on pretty much the same concepts from the previous book but with additional topics like JNI (Java Native Interface) and Admob. It is using C++ and Eclipse for demo on Windows. As indicated by the book title, it is written specifically for Android game developers. By the end of this book, you will have another game developed (avoid-obstacle-or-bomb kind of game). This is also a short book.

Cocos2d-x by Example: Beginner’s Guide – Second Edition

This book covers many different type of games with example code available to download. It is also targeted for C++ language and on Xcode on Mac. It briefly shows you what to install in order to run the games. If you are the kind of person who learn by examples, then this book is for you. Some of the game examples provided are Air Hockey, Sky Defense, Rocket Through, Victorian Rush Hour, Eskimo, MiniPool, Stone Age (this last one is using Lua scripting language).

Learning Cocos2d-JS Game Development

This is the book that meets my need because it is using Javascript language with Cocos2d-JS that allows me to do rapid game development on the web. All the previously mentioned books are using C++ as a development language (or Lua). I tried to compile several games in C++ and it takes painfully long time (30 minutes to 1 hour for first time compilation). That makes me looking for better alternative.

In this book, you will be introduced to yet more game examples like Concentration game, An Endless Runner, Sokoban, Shopping, Totem, Match3.

The good things of Cocos2d-JS, other than what I mentioned above like quick development-test-fix cycle, are its light weight framework and it can run on any platforms with web browser. The major drawback of using Javascript, however, is that it will have performance impact running computational heavy game or application compared to its native C++ counterpart. So, as long as your app or game is not computational heavy, Cocos2d-JS is a good choice.

Real Test of Coco2d-JS for game development

With all the newly gained knowledge, I had a crazy idea last week.

During the last 8 days, I had been experimenting with the new concept of rapid mobile game development with Javascript. I was expecting the project to be done in one day, but as many things in life go, the project got prolonged and finished only until 7 days later.

Game Logic

It all began with a simple game idea inspired by a game show.

The game idea is really simple, the participants need to answer correctly a simple math question by completing the plus or minus sign in the question under 10 seconds else they will get punished.

An example of the question: 5 ? 6 ? 4 = 7.

There are 4 permutations of possible answers:

  1. minus, minus
  2. minus, plus
  3. plus, minus
  4. plus, plus

All these permutations will give different results. To go through all the permutations is very costly in term of time.

I watched the show many years ago and I even played along with the show. Over time, I developed a strategy to come up with the correct answer every time by avoiding to go through all the permutations. But it still requires substantial mental energy to do the math.

The strategy is to find out which numbers to subtract and therefore reducing the number of permutations.

The formula of my strategy is as follow:

  1. sum up all the numbers on the left hand side and
  2. subtract the sum with the number on the right hand side and
  3. divide the result by two. The final output is the number to be subtracted.

Example:

  1. 5 + 6 + 4 = 15
  2. 15 – 7 = 8
  3. 8 / 2 = 4

So you know you have to subtract 4 out of the sum. The correct answer to the question is plus, minus.

Hook factor

I liked the game idea at first thought and it got my attention because it is simple and has the hook factor.

Hooked: How to Build Habit-Forming Products

As proposed by the hook model, there are four stages to get people hooked. The first is the trigger (internal and external). When the user is bored, he/she need to play game.

The second stage is action. The game is easy to play and requires only two types of input from user which is the plus and minus.

The third stage is the variable reward which I can integrate easily into the game.

The fourth stage is the investment from the user where he/she spends a lot of time into the game to get detailed statistics of each game play.

The cycle is repeated.

Hook Model

Hook Model

Another main reason I liked the game idea so much was that it is purely a mathematical game. I could easily generate as much questions as possible programmatically. This would reduce my workload to design and hand-code every game level manually as what we normally see on other mobile games like Angry Birds.

Playing the game has an educational purpose too for kids to learn maths. That’s why I created 2 different sets of games, one with only positive numbers while the other with only negative numbers since small kids don’t have the concept of negative numbers yet (see the screenshot of the game at the bottom of this post or go directly to Google Play).

Game’s name

The game need a name. I got inspiration from a popular and influential book.

Thinking, Fast and Slow

According to Daniel Kahneman, there are two systems running in human mind which he called them System 1 and System 2 respectively. The first system is used for fast and instinctive thinking but is subjected to biases and errors in thinking. The second system is used for serious and slow rational thinking. It requires more effort and sometime even painful for the person to use the second system.

It is never an intuitive task for human to perform mathematical operations. And the game that I am going to develop involve basic maths, therefore I decided to call it System 2.

Rapid Game Development

Ok, with the game logic clearly defined, it was time to start the development work.

Cocos2d-JS Workflow

Cocos2d-JS Workflow

By following the Cocos2d-JS workflow, the main game logic was done on the first day, and deployed to the temporary web here for testing (step 3 from the workflow for cross-platform games above) and I started playing the game and making minor fixes and improvement progressively.

The following is the summary of what was going on:

  • one day coding (coding main game logic and refactoring)
  • one day coding (making the game statistics)
  • one day image (searching and editting game images and icons) + sound
  • one day testing (finding bugs and fixing bugs, doing minor improvement)
  • one day debugging on Android (debugging issues from porting Cocos2d-JS to Android, this was a surprise for me where the code run on web but not on Android)
  • one day Admob integration
  • one day publishing (writing article for blog and play store)
  • one day for buffer (anything in between)

Of course, the above is only a rough summary, many things could run in parallel like editing images while building the project for Android.

I had pretty little information and resources on how to debug on Android and Admob integration with Cocos2d-JS, that’s why it took me so long. Also, each compilation takes time. The books that I read does not cover those topics.

I also want to thank some of my friends that helped to test and provide feedback to the games.

The end result

Here are the screenshots of the game in action.

Game Menu

Game Menu

Game Instruction

Game Instruction

Game Statistics

Game Statistics

Easy Game

Easy Game

Game Over

Game Over

Game Statistics Full

Game Statistics Full

Normal Game

Normal Game

Hard Game

Hard Game

As you can see, the game only supports landscape mode. This is because by reducing one degree of freedom, I could save a lot of development time.

You can download the game from Google Play. I only support Play Store right now since the entrance price is lower with $ 25 for lifetime subscription while for Apple Store, it requires $ 99 annual subscription to publish apps.

Get it on Google Play

Get it on Google Play

Conclusion

Using Javascript to develop game is really convenient and fast. You have faster feedback loop for fixing bugs and for making incremental improvements.

For that purpose, Cocos2d-JS is a good choice. It is really a wonderful game engine for any new person who would like to develop games (independent of whether the games are targeted for web or for mobile).

Demo

You can try the game below.

Thanks.