Estoy creando un juego de Javascript, donde me gustaría que un botón (clase = "construir") solo sea visible bajo ciertas condiciones, y la condición aumentaría cada vez que haga clic en el botón.

Para aumentar el número en 1, haga clic en el botón "reunir". Para que sea más eficaz, haga clic en el botón "construir" para aumentar automáticamente el número en 0,1 por segundo. Eso es lo que está sucediendo en el siguiente código.

Pero me gustaría que el botón "construir" solo sea visible después de que el número llegue a 10. El botón "construir" disminuiría el número actual en un 50% cuando uno haga clic en él para que se vuelva invisible después de hacer clic.

La segunda vez, el botón "construir" solo sería visible cuando el número llegara a 12. Haga clic en él, el número disminuye un 50%, el botón "construir" desaparece. La tercera vez que el botón se vuelve visible cuando el número llega a 14 (por lo que es +2 cada vez"), haga clic en él, el número disminuye un 50%, el botón "construir" desaparece y sigue y sigue.

¿Hay alguna forma de que esto funcione? ¡Gracias!

 let btn1 = document.querySelector(".btn1"); let btn2 = document.querySelector(".btn2"); let num = document.getElementById("num"); let increment = 0; function toGather(){ num.innerHTML++; } btn1.addEventListener("click",toGather) function toBuild() { increment+=.1 if (increment == .1){ setInterval(() => { num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10); }, 1000)} else num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10); } btn2.addEventListener("click",toBuild);

 <span id="num">0</span> <button class="btn1">Gather</button> <button class="btn2">Build</button>