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.

Overview

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.

Outline

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.
• Step 2: Write HTML and JavaScript code, this will be further divided into sub-steps which will be discussed later.

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.

Step 1: Setup the project folder

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 ”img“.

The directory structure for the template code looks like this:

.
├── css/
├── img/
|── js/
├── index.html
└── congrats.html

There are two HTML files: index.html and congrats.html.

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.

Different directories store different types of assets. JavaScript files are stored in the js directory. The img directory contains all the images. We recommend dividing it into subdirectories, one for each level. The directories are named level1, 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 "levelN" where N is the level number 1, 2, 3, … Similarly we can have a convention for the image file names like image1, image2, image3 etc.

You might also need to use some CSS for this project to style and place the elements in your web page appropriately.

Step 2: HTML and JavaScript code

HTML

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 id attribute set, and then we will be able to add different types of elements (images, blanks, options) in their respective containers using JavaScript.

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

If you want, you can include dummy images, blanks and letters directly in the HTML and then modify the attributes using JavaScript. The official solution creates the HTML elements dynamically, but there is more than one way to implement the project, so feel free to go the route you like best.

JavaScript

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.

JavaScript will be used as follows:

• Add elements dynamically to the game: We have left the HTML with empty containers and nothing else, so we’ll need to add elements like images, blanks and the letter options dynamically. This has one very important benefit that the game is contained in only one HTML page. New levels are generated dynamically using JavaScript on runtime; we don’t have to hard code the different levels. This also makes adding new levels very easy. Whenever a new level is to be loaded these elements should be generated dynamically:
• 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 click event.
• 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 2 hints 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_r currently, then on requesting a hint, any one of the alphabets "b", "t" and "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.

CSS

Take some time to style your game and make it beautiful. Some suggestions:

• Make the title font nice, maybe add a background color.
• Add 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.

Congratulations!

Play the game a few times! Make sure everything works as expected.

Show it to your friends and family!

Congratulations on completing the final project for the JavaScript course! This was quite a comprehensive project.

Solution

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.