In this final project you’ll make a clone of a popular android game called ”4pics1word”. The game is divided into levels and in each level, four pictures are shown which are related to a word. You, as the player, have to guess this word by looking at these pictures and fill it in the blanks provided. If your answer is correct, you proceed to the next level.
Here’s a small video recording of me playing the game:
Some things to note:
- When the game starts, the user can see the images, some blanks, and options (alphabets).
- User can click the alphabets to input the answer. Clicking on a filled blank removes the alphabet.
- User can also ask for hints. At most 2 hints are allowed for each level.
- If the answer is wrong, it gets highlighted in red. If it is correct, the game moves on to the next level.
You can also take a look at the finished project and play the game yourself here.
We have used some CSS libraries and some custom CSS to add styles to the page and make it look beautiful. Link to the code is also provided at the end of this tutorial.
Overall, the project will comprise of the following steps:
- Step 1: Setup the project folder: We will give you a template project structure. You can use the same or make something entirely different of your own.
If you get stuck, you can take a peek at our implementation of the project using the link provided at the end of this tutorial.
It is a good practice to create a project directory and directory structure for relatively bigger projects. We should have a clear structure of directories in mind and also the number of files and what these files will do. It is a good practice to separate different types of assets in different directories. For example, all the images should be placed inside a separate folder called, let’s say ”
The directory structure for the template code looks like this:
. ├── css/ ├── img/ |── js/ ├── index.html └── congrats.html
There are two HTML files:
index.html is the landing page and also the main game page.
congrats.html is the page the user sees after clearing all the levels. The latter is optional.
js directory. The
img directory contains all the images. We recommend dividing it into subdirectories, one for each level. The directories are named
level2 and so on for different levels. These folders contain the hint images for each level.
It is a good practice to have a convention for naming different files and folders. In this case, we have named the directories for images for each level as
N is the level number 1, 2, 3, … Similarly we can have a convention for the image file names like
You might also need to use some CSS for this project to style and place the elements in your web page appropriately.
The HTML is pretty straightforward in this project, since we’ll be adding most of the elements dynamically. You might want to make containers for different types of elements. For example, in this game, the page will show the hint images, blanks, letters/options to choose from and a hint button. We can make empty elements with
<h1>Four Pics One Word</h1> <div id="images"> </div> <div id="blanks"> </div> <div id="letters"> </div> <button id="hintbutton" onclick="getHint()">Get Hint</button>
That’s about it for the basic HTML structure that is definitely required.
It is better to make the script modular for a big project, i.e. divide the script into separate methods so that it becomes easier to read and debug. All of these functions should be called inside one main method.
- Images: Images can be added for the current level by adding all the images in the current level’s image directory.
- Blanks: Blanks are basically elements with underscores
"_"inside them. The number of blanks will be equal to the number of characters in the answer to the current level. The blanks should be clickable to remove an added letter from the current submission (try it in the link provided above).
- Options: There will be a list of alphabets at the bottom which include the characters of the answer for the current level and some other random alphabets. The player can click on any of the options to add letters to their answer. If an option has been clicked before, it cannot be clicked again.
- Listen to different events: A game is about user interaction. The only event that you need to listen to (in this game) is the
- Clicking on an available letter in the options should add the letter to the first empty blank.
- Clicking on a non-empty blank, so created, should undo this process, i.e., clicking on any blank that has a character in it (that was added by the player) should remove the character from the blanks and should re-enable the option that was clicked to add this character.
- Check player’s submission: The player should clear a level and move to the next one if the letters in the blanks match with the current level’s answer. Whenever the player adds a letter to the blanks, a function should be executed to check if the string in blanks is equal to the answer to the current level. If it is, the next level should be loaded.
- Provide Hints: There should be a button or something clickable that can be used to get hints for the current level.
- The player should be able to take at most
2hints per level.
- When a user requests for a hint, one of the alphabets should be placed at the correct position in the blanks, as it appears in the actual answer. For example, let’s say the answer to the current level is
"butter"and the blanks are filled as
_u_t_rcurrently, then on requesting a hint, any one of the alphabets
"e"can be placed in their correct positions.
- The letters added using a hint should not be clickable, i.e. the player should not be able to de-select these letter from the blanks.
Take some time to style your game and make it beautiful. Some suggestions:
- Make the title font nice, maybe add a background color.
hover-styling for each element that can be clicked — most importantly, this includes the options, hint button and filled blanks. This makes it easier for the user to understand what elements on the page can be clicked. For filled blanks, you’ll need different types of
hover-styling depending on whether or not removing the letter from the blank is allowed.
Play the game a few times! Make sure everything works as expected.
Show it to your friends and family!
I hope you were able to complete the project.
If you get stuck and need some help, you can take a look at the official implementation here. The code is commented and well-organized.