چگونه با جاوا اسکریپت بازی حدس عدد بسازیم؟

خوب عکس بالا شکل بازی ماست

وقتی حدس غلط می زنیم شکل بالا رو داریم

و وقتی هم درست حدس می زنیم این شکل رو داریم و امتیازات هم چه مثبت و چه منفی که بر اساس حدس درست و غلط داده میشه ثپت میشه

html

<div class=&quotconteaner&quot>
<h1>GUESS NUMBER</h1>
<label>Tell me your number, between 1 to 9</label> <br>
<div class=&quotsubcon&quot>
<span id=&quotnegetive&quot>-</span>
<input type=&quottext&quot id=&quotmynumber&quot placeholder=&quotenter your number&quot>
<span id=&quotpositive&quot>+</span> <br>
</div>
<div class=&quotseocnsubcon&quot>
<h3>click me to check your guess</h3> <br>
<button id=&quotsubmit&quot>click</button>
<button id=&quotretry&quot>↻</button>
</div>
</div>
<div id=&quottextcompar&quot style=&quottext-align:center;&quot>
</div>

css
.conteaner{
margin-left: auto;
margin-right: auto;
text-align: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
h1{
background-color: black;
color: antiquewhite;
}
label{
background-color: rgb(200, 215, 33);
line-height: 41px;
font-size: 27px;
box-shadow: 0px 2px 3px;
}
span{
color: rgb(0, 0, 0);
}
#negetive{
background-color: red;
padding: 23px;
border-radius: 50%;
}
#positive{
background-color: green;
padding: 23px;
border-radius: 50%;
}
button{
padding: 15px;
background-color: black;
border-radius: 31%;
box-shadow: 1px 1px 3px;
color: wheat;
}
input{
padding: 23px;
text-align: center;
font-size: larger;
}
.subcon,.seocnsubcon{
margin-top: 12px;
}
#textcompar{
font-size: 23px;
margin: 20px;
}
#numone{
background-color: aqua;
padding: 16px;
border-bottom: 7px solid red;
border-radius: 36%;
}
#numonesecond{
background-color: rgb(242, 255, 0);
padding: 16px;
border-bottom: 7px solid red;
border-radius: 36%;
}
#rote{
background-color: aqua;
padding: 16px;
border-bottom: 7px solid red;
border-radius: 36%;
}
#retry{
background-color: black;
color: balack;
font-size: 21px;
border-radius: 50%;
}

js
const submit=document.getElementById(&quotsubmit&quot)
let negetive_scover=1
let posiotive_scover=1
submit.addEventListener(&quotclick&quot,e=>{
const generatnumber=Math.floor(Math.random()*10)
const mynumber=document.getElementById(&quotmynumber&quot).value
const error=document.getElementById(&quotmynumber&quot)
error.value=&quot&quot
if( negetive_scover>7){
alert(&quotyou lose&quot)
}
if(mynumber>=0 && mynumber<=9){
if(generatnumber==mynumber){
document.getElementById(&quottextcompar&quot)=` your number is 
<span id=&quotrote&quot>${mynumber}</span> and mine is <span id=&quotrote&quot> 
${generatnumber} :)<span>`
const positive=document.getElementById(&quotpositive&quot)
positive=posiotive_scover
return posiotive_scover=posiotive_scover+1
console.log(mynumber);
}else if(generatnumber!=mynumber){
document.getElementById(&quottextcompar&quot)=` your number is 
<span id=&quotnumone&quot>${mynumber}</span> and mine is <span 
id=&quotnumonesecond&quot> ${generatnumber}:(</span>`
const negetive=document.getElementById(&quotnegetive&quot)
negetive=negetive_scover
return negetive_scover=negetive_scover+1
}
}else{
alert(&quotplease enter number between 1 to 9&quot)
}
const retry=document.getElementById(&quotretry&quot)
retry.addEventListener(&quotclick&quot,e=>{
const positive=document.getElementById(&quotpositive&quot)
const negetive=document.getElementById(&quotnegetive&quot)
const textcompar=document.getElementById(&quottextcompar&quot)
positive=&quot+&quot
negetive=&quot-&quot
textcompar=&quot&quot})

لینک دانلود فایل کد ها