Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Aaron Lara
I'm a Java developer who drinks coffee and transforms it in code (Awesome, right?!). I have been working at genuitec as a developer since December, 2011. Programming really cool stuff :) ... Ah I'm a gamer, so if you want to play something in steam just let me know :D

The following tutorial shows you how to create a customized mobile Hangman game using MyEclipse 2015 CI 16. You will learn how to customize the hangman game with your own text, word list, and image. Then you will test the game in MyEclipse, build the mobile app, and try it on your phone. Imagine the fun you can have with this game. It could even be the perfect present for your girlfriend! 😉

Tip: Visit the MyEclipse Learning Center for more information on creating mobile apps.

Here is an example of how the game will look on your phone:

Example of Hangman game


Customize Your Hangman Game

I have included a sample MyEclipse project so you can follow along and create your own Hangman game. After you download this project and import it into MyEclipse, you can begin customizing the game.

Note: The source code’s variables are written in Spanish. I have not changed them to respect the original author’s code.

Download and Import the Sample Project

  1. Download the Hangman project.
  2. In MyEclipse, select File>Import…
  3. Select Existing Projects into Workspace.
  4. In the Select archive file field, browse for the downloaded project.
  5. Click Finish.

Create a Word List

You can create your own list of words. Make it funny or include significant words for your friends or coworkers, the list can be as big as you want. To customize the list, edit the array on line 37 in ahorcado.js:


Edit the Header

Include a title and message for your game by editing lines 25-27 in index.html:


Select a Hangman Image

Customize the game further by selecting a different image for the hangman. Simply override the file hangman/www/images/picture.png with the preferred image. Please note that the size of the picture must be small (this example is 50×50 pixels).


Test in MyEclipse

In MyEclipse you can use the Mobile Web Simulator to check out how your application will run on your phone. To preview the game, right-click the project and select PhoneGap>Preview Application in Mobile Web Simulator.

Use the Mobile Web Simulator to test your game


In the following dialog select your desired platform to launch, in this example we use android:

Test the game on the ios or android platform


The Hangman game appears in the Mobile Web Simulator for you to test. Awesome! Right? 😀

Experiment with the game before building your app

Play Hangman on Your Phone

Once you have tested your game and are happy with the results, you can build your mobile app and put it on your phone. For this example, we will build the app remotely.

  1. Create an account at
  2. Right-click on the project in MyEclipse and select PhoneGap>Build Phonegap Application.
    The following dialog displays:
  3. Click Configure… from Build type and set your credentials.
  4. Click Finish and wait a few minutes for the build to complete. The file is created in the hangman/bin folder.
  5. Copy the .apk file to your phone and install it.
    Note: In android, you have to enable the security option to install software from unknown sources.

More Customization

Looking for more ways to customize the game? Following is a list of resources you can change to really put your stamp on this game!

  • Winner image—Replace www/images/winner.jpg
  • Loser image—Replace www/images/loser.jpg
  • Winner text—ahorcado.js line 85
  • Loser text—ahorcado.js line 103
  • Background—ahorcado.css line 9
  • Hangman color—ahorcado.js line 223


Special thanks to Miguel Angel Alvarez for allowing me to use his code for the Hangman game he crafted in his tutorial at


Did You Have Fun?

We would love to see what you did with the game. Tweet screenshots of your implementation to @thecoderlife with the hashtag #myhangman.

Related Posts

2017 CI 11 – Sprucing up Your IDE 2017 is over, but our commitment to improving our products continues, as we bring to you our 2017 CI 11 release. It comes with key fixes and improvements in the TypeScript space, as well as the new two-way theme sharing in DevStyle, among others.NOTE: This release does not include MyEclipse, which will be released shortly.Angular & TypeScriptAd...
Happy Holidays – from Our Family to Yours! It’s that time of the year again - the time to enjoy a break from the everyday duties, accompanied by our loved ones! At Genuitec we would like to wish you a wonderful holiday season filled with great times and awesome food! We already got our party hats out (as you can see)! Our U.S. offices will be closed on December 25th and 26th, as well as Jan...
Introducing DevStyle – Rebooting EclipseR... Yesterday we released the first production version of DevStyle, a free add-on for Eclipse. DevStyle seeks to dramatically improve the Eclipse user experience for millions of developers with the introduction of modern developer ergonomics and the beautiful styling you’ve come to expect from products in 2017.Over the years, the Eclipse evolution has ...
Working with Java 9 in Eclipse Note: This blog was updated on October 11th, 2017 to reflect the release of Oxygen 1a which includes Java 9 support.The Java 9 GA release is just a few weeks old, and you can start developing with Java 9 in Eclipse, right now! All you need to do is download a suitable Oxygen 1a (4.7.1a) based distribution for both Java 9 and JUnit 5 support. Please...

Posted on Nov 3rd 2015