Skip to content

Latest commit

 

History

History

number-guessing-game

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
note
note
 
 
README.md
README.md
 
 
index.html
index.html
 
 
main.js
main.js
 
 
style.css
style.css
 
 

README.md

Title Type tags status DateStarted DateModified aliases
Number Guessing Game
A
JavaScript
2023-09-13
2023-12-05
Number Guessing Game

Number Guessing Game

A Number Guessing Game based on vanilla JS, HTML, CSS, to enhance developer's fundamental knowledge and skills in JS, HTML, CSS.

效果展示 Demo

202404081600747.png

核心功能 Core Functions & Components

  1. Guess a Random Number
    • User can enter and submit any number from 1-100 to match the random number generated behind the scene.
  2. Get Clue and Result
    • When the number was submitted, the user will get a message showing whether the guess is lower or higher or correct.
  3. Submit History
    • User can see previous incorrect guesses.
  4. Limited Chance
    • Each user can guess at most 10 times each round before getting the correct answer.
    • When out of chance, the user will receive a message showing the game is over and will not be able to continue the game.
  5. Replay Button
    • When game is over, the user can click a button to replay the game.

相关知识 Related Knowledge

  • [[HTML]]
    • [[HTML-Link]]
    • [[Input and label]]
    • [[Button]]
  • [[JavaScript]]
    • [[Value and Variables]]
    • [[Math]]
    • [[Operators]]
    • [[Conditionals]]
    • [[String]]
    • [[DOM]]

开发笔记 Project Notes

  1. Select needed elements
  2. Init the App Data
    • key: random number from 1-100
    • guessCount: 1
    • guess: ""
    • lastResult: ""
    • guessHistory: ""
  3. Implement Core Functions
    • Logic
      • ![[A-JS Number Guessing Game 2022-12-08 09.49.04.excalidraw]]
  4. Add Event Listeners (Call the Callback function)

提升方向 Aspects to Improve

项目资源 Inspirations & Reference