piątek, 2020-11-13

JS: Losowanie

Zaprezentowany mechanizm losowania liczb nawiązuje do popularnej w Polsce gry liczbowej polegającej na wytypowaniu wylosowanych sześciu liczb z zakresu od 1 do 49.

Kod HTML

<div id="gra">
	<button type="button">Losuj</button>
	<p></p>
</div>

Naiwne losowanie

Być może w pierwszym podejściu do rozwiązania problemu do głowy przyjdzie pomysł wykonania najzwyczajniejszego sześciokrotnego losowania liczb z zadanego zakresu. Metoda ta ma bardzo poważną wadę i działa tylko czasami, w rzeczywistej grze liczby nie mogą się powtarzać.

document.querySelector('#gra button').addEventListener('click', function() {
  var szostka = [], i;
  for(i=0; i<6; i++) szostka[i] = Math.floor(Math.random() * 49) + 1;
  document.querySelector('#lt-a p').innerHTML = szostka.join(', ');
});

Rozwiązanie

W rozwiązaniu problem podzielono na dwa zadania do wykonania.

1. Wygenerowanie zbioru liczb.
2. Pobieranie i usuwanie kolejnych wymaganych liczb ze zbioru.

Po usunięciu liczby ze zbioru nie można wylosować jej ponownie i problem powtórzeń nie wystąpi.

Generowanie zbioru liczb z zadanego zakresu

Generowanie kolejnych liczb z zadanego zakresu zrealizowano przy pomocy tablicy i dodawania elementów w pętli for. Oczywiście przy każdym wykonaniu zbiór liczb będzie taki sam.

document.querySelector('#gra button').addEventListener('click', function() {
  var liczby = [], i;
  for(i=0; i<49; i++) liczby[i] = i + 1;
  document.querySelector('#lt-b p').innerHTML = liczby.join(', ');
});

Losowanie liczb

Większa część rozwiązania dotycząca losowania została objaśniona w materiale „Prosta gra”. Za pomocą instrukcji „Math.floor(Math.random() * liczby.length” wykorzystując generator liczb pseudolosowych, wybierana jest liczba odpowiadająca indeksowi tablicy przechowującej zakres liczb podlegających losowaniu. Metoda splice() usuwa ustalony element ze zbioru i zwraca go do tablicy oznaczonej identyfikatorem szostka. Operacja zostaje przeprowadzona sześciokrotnie w celu uzyskania sześciu wylosowanych liczb.

document.querySelector('#gra button').addEventListener('click', function() {
  var liczby = [], szostka = [], i;
  for(i=0; i<49; i++) liczby[i] = i + 1;
  for(i=0;i<6;i++) szostka[i] = liczby.splice(Math.floor(Math.random() * liczby.length),1)[0];  	
  document.querySelector('#lt-c p').innerHTML = szostka.join(', ');
});

Ostateczna wersja skryptu

Wyniki działania skryptu są zadowalające, wylosowanych zostaje sześć unikalnych liczb. Ich kolejność jest losowa, dlatego warto je posortować. Fabrycznie dostępna metoda sort() wartości liczbowe traktuje alfabetycznie (np. 102 znajdzie się przed 2), jednak umożliwia zdefiniowanie własnej funkcji dokonującej porównania.

document.querySelector('#lt-d button').addEventListener('click', function() {
  var liczby = [], szostka = [], i;
  for(i=0; i<49; i++) liczby[i] = i + 1;
  for(i=0;i<6;i++) szostka[i] = liczby.splice(Math.floor(Math.random() * liczby.length),1)[0];  	
  document.querySelector('#lt-d p').innerHTML = szostka.sort(function(a,b){return a > b ? 1 : b > a ? -1 : 0}).join(', ');
});