[JS] Rzuty kostką
Dziś stworzymy aplikację, która zbada ile razy w 100 rzutach kostką wypadną poszczególne liczby. Dodatkowo wszystkie rzuty mają zostać zapisane w tablicy.
Jak symulować rzut kostką do gry?
Rzucając zwykłą kostką do gry, otrzymamy liczby całkowite z zakresu od 1 do 6.
Jak wylosować liczbę za pomocą JavaScript?
W JavaScript funkcja random obiektu Math, umożliwia nam wylosowanie liczby rzeczywistej z zakresu [0;1). Oznacza to, że wylosować możemy np.: 0, 0.5, 0.1203, 0.912, 0.999 ale nigdy nie wylosujemy liczby 1 i większej niż 1.
W jaki sposób wylosować liczby całkowite z zakresu od 1 do 6?
Jeżeli wylosowaną liczbę pomnożysz przez 6, otrzymasz zakres [0;6). Wyobraź sobie oś liczbową, zaznacz na niej nasz zakres i pomyśl, co trzeba zrobić, aby zakres zaczynał się od 1? Tak, wystarczy przesunąć zakres o jeden w prawo. Zrobimy to dodając do naszej liczby 1, otrzymujemy zakres [1,7). Niestety wciąż nie otrzymujemy liczb całkowitych, a także możemy wylosować liczbę większą od 6(ale jednocześnie mniejszą od 7). Aby otrzymywać liczby całkowite wykorzystamy zaokrąglanie. Mamy do dyspozycji 3 rodzaje zaokrąglania:
Math.ceil();
Math.floor();
Math.round();Pierwsza z nich zaokrągla do góry, tzn. mając liczby:
- 0.4, 0.7, 1.2, 6.5
otrzymamy odpowiednio:
- 1, 1, 2, 7
Druga metoda zaokrągla w dół, czyli dla naszych przykładowych liczb otrzymamy:
- 0, 0, 1, 6
Trzecia metoda zaokrągla klasycznie wg normalnych reguł matematycznych, zatem otrzymamy:
- 0, 1, 1, 7
Która z tych metod przyda się nam do aplikacji?
Sposób na wylosowanie liczby z zakresu od 1 do 6
rzut = Math.floor(Math.random() * 6 + 1);Jak rzucić kostką 100 razy przy użyciu JavaScript?
Wystarczy użyć pętli, która wykona się 100 razy, a w niej umieścimy nasz rzut kostką. Aby rzuty zapisywały się, stworzymy tablicę, do której będziemy zapisywać kolejne rzuty.
100 rzutów kostką
var rzut = [];
for (var i = 0; i < 100; i++) {
rzut[i] = Math.floor(Math.random() * 6 + 1);
}
alert(rzut.join());Aplikacja
Skoro potrafimy już zasymulować 100 rzutów kostką, napiszmy całą aplikację, która policzy ile razy wypadnie dana liczba. W tym celu, na początku deklarujemy zmienne:
- tablicę do przechowywania rzutów
- tablicę w której będziemy zliczać ile razy wypadnie dana liczba
- napis za pomocą którego poinformujemy użytkownika o wynikach naszego eksperymentu.
var rzut = [];
var stat = [0, 0, 0, 0, 0, 0];
var napis = "";Teraz rozpoczniemy pętle, tak jak przy wcześniej rzucając 100 razy kostką.
for (var i = 0; i < 100; i++) {
rzut[i] = Math.floor(Math.random() * 6 + 1);Zanim zakończymy działanie pętli zastanówmy się jak zapisywać do tablicy stat ile razy wypadła dana liczba. Moglibyśmy użyć instrukcji warunkowej, która sprawdzałaby czy wypadła 1, jeśli tak, to zwiększamy o jeden wartość w tablicy stat odpowiadającej jedynce(w moim przypadku będzie to pierwsza pozycja z indeksem 0).
if(rzut[i]==1) stat[i]++;I tak dalej, sprawdzając wszystkie możliwości. Warto jednak by było zastosować w tym celu inną instrukcję, taką która ze swojej definicji zastępuje wiele instrukcji if. Skorzystamy z instrukcji switch, która w zależności od przypadku(case) będzie zachowywała się nieco inaczej. Pamiętaj, że po każdym przypadku musisz użyć instrukcji break.
switch (rzut[i]) {
case 1:
stat[0]++;
break;
case 2:
stat[1]++;
break;
case 3:
stat[2]++;
break;
case 4:
stat[3]++;
break;
case 5:
stat[4]++;
break;
case 6:
stat[5]++;
break;
}Czy można udoskonalić nasz kod?
Oczywiście, że tak, możemy całkowicie wyeliminować sprawdzanie czy to za pomocą if, czy switch i wykorzystać następujący kod…
stat[rzut[i] - 1] += 1;Co robi ten kod?
Przeanalizuj dokładnie swój skrypt, a na pewno samodzielnie odpowiesz na to pytanie.
Wyświetlanie
Teraz pozostało stworzyć napis za pomocą, którego przekażesz informację użytkownikowi i go wyświetlić. Poniżej przykładowy efekt działania naszego skryptu.
<p id="ekranik"></p>
<script>
var rzut = [];
var stat = [0, 0, 0, 0, 0, 0];
var napis = "";
for (var i = 0; i < 100; i++) {
rzut[i] = Math.floor(Math.random() * 6 + 1);
stat[rzut[i] - 1] += 1;
}
napis = "W 100 rzutach wypadło: <br>" + stat[0] + " jedynek, <br>" + stat[1] + " dwójek, <br>" + stat[2] + " trójek, <br>" + stat[3] + " czwórek, <br>" + stat[4] + " piątek, <br>" + stat[5] + " szóstek.<br>";
document.getElementById("ekranik").innerHTML = napis;
</script>
![[JS]Malowanie Pokoju](https://i0.wp.com/rafalskowron.pl/wp-content/uploads/2018/02/malowanie1.jpg?resize=440%2C253&ssl=1)
![[JS] Średnia kolumn tablicy](https://rafalskowron.pl/wp-content/themes/Extra/images/post-format-thumb-text.svg)
![[JS] Średnia kolumn tablicy](https://secure.gravatar.com/avatar/cfe2fd897b82be50743fccd201b74274?s=40&d=mm&r=g){kind=small}