Creating a Custom Mobile Hangman Game with MyEclipse

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:

var palabras = ['webclipse','myeclipse','sdc','genuitec','gapdebug','marketing'];

Edit the Header

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

<h1>Hangman</h1>
<h2>Let's play something at Genuitec</h2>
<h3>Enjoy</h3>

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 https://build.phonegap.com.
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 hangman.android-debug.apk 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

Credits

Special thanks to Miguel Angel Alvarez for allowing me to use his code for the Hangman game he crafted in his tutorial at http://www.desarrolloweb.com/articulos/juego-ahorcado-javascript-jquery-canvas.html.

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.