Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of aaronlonin
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:

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

PhoneGapMenu
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:

launchsimulator
Test the game on the ios or android platform

 

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

Simulator
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:
    phonegapbuild
  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.

Related Posts

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...
Equifax Data Breach Advisory Many of you may have heard of the Equifax data breach, possibly affecting millions of consumers. Information accessed by hackers during the incident included Social Security numbers, personal details, driver’s license numbers, and even credit card numbers.Equifax has confirmed that the breach was made possible by a vulnerability in the Apache Strut...
SDC 2017 SR2 – Software Delivery Evolving Fu... Perhaps you're already a fan of the delicious combo offered by our Secure Delivery Center (SDC) -- you get the right software to your teams and manage a variety of actions (licenses, software updates, rollouts and standardization).  With our new version of SDC, we are bringing even more yummy features to the table!What is included in our 2017 SR2 r...

Posted on Nov 3rd 2015