1. Number Guessing Game
The simplest game to being with is a game that allows users to input a number as a guess within a given range, this is followed by alerting the result when submit button is clicked. In order to implement the game, you need to know the basics of JS DOM which includes document selectors and properties associated with it.
In terms of HTML, you would need to know basic HTML page structure and Form <input> tag. Basic CSS styling can improve usability but is optional to learn.
- Creating Gussed number input box: Create a text input form with submit button in HTML in order to allow the user to input the guessed number.
- Selecting Gussed number value: Select user input entered on HTML input element using “document.getelementbyid()” when onclick() function of submit button is triggered.
- Generate the random number: Now we can produce the guessing number using Math.random() in-built JS functionality which provides a random number for a given range.
- Validating the result: To determine the boolean value of the result we compare user input to guessing numbers using the “==” JS operator.
- Displaying the result through JS alert: The result is notified to the user through in-built js alter to display a custom message based on the result
- Reset the Guess number input to default: The input has to reset previously entered after the result is displayed which can be achieved through the “element.value=default”
- Hangman: Letter based gussing game with hints using vanilla JS github.com/samruddhisomani/js-hangman
- Sudoku: Popular number based board puzzle github.com/pocketjoso/sudokuJS
- Tic Tac Toe: Popular Xs and Os puzzle between two players github.com/vasanthk/tic-tac-toe-js
Hangman is another guessing game but instead of a number, we allow phrases, words, or sentences. However, the odds of directly guessing are very low due to a large number of possible combinations. To address this, we need to have a hint section where hints related to the guess are provided. The complexity of the hint can vary like providing a few letters of a word to the meanings of the word.
- Creating HTML Structure: The first step involves creating multiple <div> for each letter along with a button for hint and reset.
- Adding CSS styles: Improving the usability of HTML structure through CSS styles by adding margin, padding, etc. Additionally using flex/grid to align the block of letters correctly.
- Handling letter block select: Function triggered “onclick()” of letter block should validate if the selected letter is a correct answer, then decrement “chances” if wrong or append to user solution if correct.
- Hint Functionality: Function to display more unsolved letters, provide a range for letter guess or multiple other ways to generate hints.
- Adding End condition: We need to add a function that checks if the game has ended when the user runs out of chances or has guessed all letter of word/phrases
- Freezing the game: Once the end condition is achieved all event listeners have to be detached to freeze the game and also “element.innerHTML” is used to display the result.
- Displaying the result: Display “Game over” or success message using “element.innerHTML”.
- Reset button option: Reset functionality allows users to play the game multiple time. The reset button’s “onclick()” function must clear existing data and generate a new guess.
The color guessing game uses functionality and concepts similar to number guessing games but it follows a different approach by providing options for guessing. In addition, we can further add easy and hard difficulty levels for color guessing.
- Creating HTML Boilerplate: The first step involves creating multiple <div> for each option along with a button reset and section to display RGB code.
- Adding CSS styles: We can use flex to align option squares in a single row and different sections of the app.
- Attaching Event listeners: Using event delegation to attach a single “onclick()” event to all option blocks. Further, we will add “onclick()” for the reset and difficulty button.
- Reset/Handling Guess color generation: Function triggered “onclick()” of reset/new color generation will 3 number using Math.random() between 0 to 255 to represent 3 digits of RGB colors.
- Generating options: We generate 2 or more random RGB values similar to the guess number and display them as options along with the block for guessed color.
- Handling option selection: If the wrong option selection block is hidden when clicked by element.style.display=”none” or game is ended the option is correct.
- Easy and hard functionality: The game can be made more difficult by introducing more options and decreasing the range of Math.random() for RGB code generation.
- Displaying the result: Display “Game over” If run out of chances or success message using “element.innerHTML” if Guess color is selected.
See code implementation from codepen.io/Brandonm415/pen/xaGpGb
4. Tic Tac Toe
- Creating HTML Blocks: The first step involves multiple creating block using the <div> tag, the number block depends on the dimension of the game like 3×3, 6×6, etc.
- Implementing CSS Grids: The simplest way to align these blocks is by adding “display: grid” to the parent container and specifying the layout through “grid-template-columns”.
- Attaching Event listeners: We can use event delegation to attach a single “onclick()” listener to all of the rows and columns.
- Appending X & O into block: The handler function must append Xs and Os alternatively on selected blocks by assigning “element.innerHTML” with the respective value.
- Validating the result: we need to create a function to validate at the step which checks if either of the players has won or declares draw if no empty block is left.
- Displaying the result: Once the end condition is achieved all event listeners have to be detached to freeze the game and also “element.innerHTML” to display the result.
- Reset button: Reset functionality allows users to play the game multiple time. The reset button’s “onclick()” function must empty all the blocks and add removed event listeners back.
5. Rock Paper Scissors
Rock paper scissors game implementation is similar to the number guessing game when the program has to play as an opponent. We can use in-built “Math.random()” to emulate the choice of opponent. Additionally, we would require a score counter which needs to be incremented at either end based on the result of validation.
- Creating Option blocks: The first step involves creating an HTML page with a three-option button using the <button> tag and other <div> blocks to show result.
- CSS styles for usability: Add styles such as margin, padding, etc improve user useability of the application.
- Attaching Event listeners: Add “onclick()” events for option select and reset the game.
- Handling Option Select: On option select, Math.random() is used to generate opponent option and then it is validated with user option to produce final the answer.
- Displaying the result: Once both options are validated based on rock paper scissor logic and displayed on the screen using element.innerHTML.
- Increment Scores: Increment the total_score variable displayed on the screen based on the result of validation.
- Reset button: The reset button’s “onclick()” function must empty all the blocks and reset the total score to 0.
6. Wheel Of Fortune