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(', ');
});
Artykuł: Uruchamiamy serwer Minecraft!!!

Uruchamiamy serwer Minecraft!!!

Artykuł: Mikrus kontra szkolny komputer!!!

Mikrus kontra szkolny komputer!!!

Artykuł: Plany zajęć w szkole dla dorosłych

Plany zajęć w szkole dla dorosłych

Artykuł: Mrągowianie dla powodzian

Mrągowianie dla powodzian

Artykuł: Tydzień Zakazanych Książek

Tydzień Zakazanych Książek

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły