Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

JS: Losowanie

piątek,

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(', ');
});

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Quiz: Robert Lewandowski

Quiz: Robert Lewandowski

Artykuł: Bogumił Nowotny

Bogumił Nowotny

Artykuł: Stanisław Wyspiański

Stanisław Wyspiański

Artykuł: Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły