game-with-computer

My individual coding project.
Currently hosted on Netlify:
https://game-with-computer-1-100.netlify.app/

File structure

script.js - the main logic file
index.html - main html file - to play the game, open this file on browser window
style.css - main styling file
favicon.ico - icon to be displayed on browser tab
'eyes' folder - SVG files which create animation effect

About the game

Created by Ekaterina Tereshko as an individual project during the coding program, it has the following features:

Game over when:

user wins by guessing the randomly picked number from 1 to 20 (game one) or from 1 to 100 (game two)
user decides to start another game (of 2) without finishing the previous one

User side

pick one of the two games by typing a number in the input field
use alerts that will give you hints
continue guessing and using hints until you guess the number picked by computer

Logic side

For two games logic is similar and is described in two blocks, one for each of two games that the user can choose from.
All the constants and functions are named accordingly in both games with a difference in number 1 or 2 only in the end of the name.

The constants represent the following items (an example for game 1):
input1 - an input field where the user should enter the suggested number for the first game,
buttonGame1 - the button that the user should click in order to start the game or enter the next suggested number,
answer1 - a random number from 1 to 20 generated using Math.random

input2, buttonGame2, answer2 - similar constants for the second game accordingly, given that the numbers range in the second game is from 1 to 100.
The constants described above are defined when the page is loaded, so the random numbers for both games (constants answer1 and answer2) are defined before any game starts.

When the user clicks the buttonGame1, the playGame() function is called. The function receives the value of the constant input1 (the number currently entered by the user in the input field) and puts it into the constant userNumber1. Before checking if the number is guessed, the functions also checks if the number meets the range requirement (is not a NaN and also is not less than 1 and not higher than 20 for the first game or 100 for the second game). In case the requirement is not met, an alert appears and asks the user to enter another number.
After a suitable suggested number is received, the function is comparing the user's number to the answer1 constant. In case the value of userNumber1 is lower than the answer1 const, the alert 'My number is higher!' is shown. In case the value of userNumber1 is higher than the answer1 const, the alert 'My number is lower!' is shown. After each try the user enters another number and clicks the buttonGame1 or Enter key, which calls the playGame() function again. In case there is a match, the user wins and the game is over. The page needs to be reloaded in order to get new random numbers and play again.

Thanks for your time exploring my project!

EKATERINA TERESHKO [email protected]

katereshko / game-with-computer Goto Github PK