chanronnie / number-guessing-game

Build a number guessing game with HTML, CSS and JavaScript inspired by the "Squid Game" theme.

Number Guessing Game

About this project

The goal of this project is to create a simple (yet deadly 💀) interactive number guessing game that runs in the browser using HTML, CSS, and JavaScript. Inspired by the thrilling theme of "Squid Game", players need to guess a number between 1 and 20, with only a limited number of chances to get it right. The game features various setups for winning and losing, hint functionality, and responsive design.

Rules

• The player is asked to guess a number between 1 and 20.
• The player has 10 chances to guess the number correctly.
• Each incorrect guess results in a loss of 1 chance.
• Using a hint will cost 2 additional chances.
• If the player guesses correctly, the game switches to a "winner" setup.
• If the player runs out of chances, the game switches to a "game over" setup.

Features

• CSS Flexbox is used to arrange HTML elements.
• Different game setups are implemented using CSS classes and JavaScript for winning or losing scenarios.
• Media queries are included for responsive design.
• DOM manipulation with JavaScript adds functionality to buttons and manages game logic.
• A modal window is provided to display hints if the player chooses to use them.

Technologies

Screenshots

Below are previews of the different game setups.
For a higher-resolution view, you can access the full PDF here.