Juego del 1 al 100

Tenemos 100 botones con los números del 1 al 100 y hay que pulsarlos correlativamente:

https://www.microsiervos.com/archivo/juegos-y-diversion/del-1-al-100-juego-numeros.html

¿Seríamos capaz de hacer algo parecido?

Modificaciones:

1.- Que la cantidad de botones la pueda elegir el usuario mediante un input
Cantidad:[___] [Empezar]

2.- Que para crear el array desordenado tengamos una función que lo haga function arrayDesordenado(cantidad)-> [4,2,6,1,3,5]

3.- Que para crear el botón tengamos otra función crearBoton(texto)–> Nos devuelva el botón con el texto que le pasemos

<div id="contenedor" class="container ">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

document.getElementById('empezar').addEventListener('click', empezar)

let numeroAPulsar
const maximo = 30

function empezar () {
  numeroAPulsar = 1
  const tablero = document.getElementById('tablero')
  tablero.innerHTML = ''
  // Creo un array de números del 1 al 20
  // Y luego lo desordeno
  const numeros = []
  for (let i = 0; i < maximo; i++) {
    numeros.push(i + 1)
  }
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  for (let i = 0; i < maximo; i++) {
  // Crear un botón
    const boton = document.createElement('button')
    boton.innerHTML = numeros[i]
    boton.className = 'btn btn-success m-1'
    boton.addEventListener('click', pulsado)
    tablero.appendChild(boton)
  }
}

function pulsado () {
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
    this.disabled = 'true'
    this.className = 'btn m-1'
    this.style.color = 'red'
    numeroAPulsar++
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}

Mejorándolo un poco y comentando:

	<div id="contenedor" class="container ">
		<label for="cantidad">Introduzca la cantidad de botones</label>
		<input id="cantidad" type="number">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

document.getElementById('empezar').addEventListener('click', empezar)

let numeroAPulsar
let maximo = 30

function empezar () {
  // El máximo nos lo pone el usuario en el input cantidad
  maximo = parseFloat(document.getElementById('cantidad').value)
  // Primero hay que pulsar el 1. Como aquí comenzamos empezamos por el principio
  numeroAPulsar = 1
  // Me guardo el tablero para no tener que estar repitiendo el documeng.getElementById
  const tablero = document.getElementById('tablero')
  // Vacío el tablero porque estoy empezando
  tablero.innerHTML = ''
  // LLamo a la función arrayDesordenado para obtener un array desordenado
  // ¿Cuántos elementos? Los que me ha dado el usuario y que los he guardado en maximo
  const numeros = arrayDesordenado(maximo)
  // Añado tantos botones como me haya dicho el usuario (maximo)
  for (let i = 0; i < maximo; i++) {
  // Crear un botón llamando a la función y le paso el texto que quiero que tenga
  // En este caso el elemento del array para que los botones salgan desordenados
    const boton = crearBoton(numeros[i])
    // Y lo añado al tablero
    tablero.appendChild(boton)
  }
}

function crearBoton (texto) {
  // Creo el elemento
  const boton = document.createElement('button')
  // Le pongo como texto lo que me pasen como parámetro
  boton.innerHTML = texto
  // Le añado una clase para hacer bonito
  boton.className = 'btn btn-success m-1'
  // Capturo el evento click para que cuando pulsen el botón comprobemos
  // SI el usuario va bien o ha perdido
  boton.addEventListener('click', pulsado)
  // Devuelvo el botón
  return boton
}

function arrayDesordenado (cantidad) {
  // Creo un array de números del 1 a cantidad
  const numeros = []
  for (let i = 0; i < cantidad; i++) {
    numeros.push(i + 1)
  }
  // Desordeno el array
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  // Devuelvo el array
  return numeros
}

function pulsado () {
  // Miro cual es el número que me han pulsado (el texto del botón)
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
  // Si el número pulsado es el que se tenía que pulsar
    // Deshabilito el botón
    this.disabled = 'true'
    // Le cambio la clase
    this.className = 'btn m-1'
    // Le pongo color rojo
    this.style.color = 'red'
    // El número a pulsar es uno más
    numeroAPulsar++
    // SI ya hemos pulsado todos los números el usuario ha ganado
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    // Si el número no es el que se tenía que pulsar el usuario ha perdido
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}