Wybierz stronę

[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>

O autorze

RafS

Moje główne zainteresowania to FIT: Fotografia Informatyka Technika

Zostaw odpowiedź

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest