That’s about it for the basic HTML structure that is definitely required. 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. For example, in this game, the page will show the hint images, blanks, letters/options to choose from and a hint button. You might want to make containers for different types of elements. The HTML is pretty straightforward in this project, since we’ll be adding most of the elements dynamically. You might also need to use some CSS for this project to style and place the elements in your web page appropriately. 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. It is a good practice to have a convention for naming different files and folders. These folders contain the hint images for each level. The directories are named level1, level2 and so on for different levels. We recommend dividing it into subdirectories, one for each level. The img directory contains all the images. JavaScript files are stored in the js directory. The latter is optional.ĭifferent directories store different types of assets. congrats.html is the page the user sees after clearing all the levels. Index.html is the landing page and also the main game page. There are two HTML files: index.html and congrats.html. The directory structure for the template code looks like this: For example, all the images should be placed inside a separate folder called, let’s say ” img“. It is a good practice to separate different types of assets in different directories. 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 create a project directory and directory structure for relatively bigger projects. 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 2: Write HTML and JavaScript code, this will be further divided into sub-steps which will be discussed later.You can use the same or make something entirely different of your own. Step 1: Setup the project folder: We will give you a template project structure.Overall, the project will comprise of the following steps: Link to the code is also provided at the end of this tutorial. We have used some CSS libraries and some custom CSS to add styles to the page and make it look beautiful. You can also take a look at the finished project and play the game yourself here. If it is correct, the game moves on to the next level. If the answer is wrong, it gets highlighted in red.At most 2 hints are allowed for each level. Clicking on a filled blank removes the alphabet. User can click the alphabets to input the answer.When the game starts, the user can see the images, some blanks, and options (alphabets).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |