Papier, kamień, nożyce w JavaScript

Papier, kamień, nożyce to klasyczna gra, którą większość z nas zna lub znała w dzieciństwie. Jest to gra dla dwóch osób, w której każdy z graczy w jednym momencie pokazuje jedną z trzech form dłoni reprezentujących papier, kamień lub nożyce. Wygrywa ten, kto „pokonał” formę wybraną przez przeciwnika według zasad:

• Papier pokonuje kamień (papier owija kamień).
• Kamień pokonuje nożyce (kamień tępi nożyce).
• Nożyce pokonują papier (nożyce tną papier).

Jeśli obaj gracze wybiorą tę samą formę, gra kończy się remisem.

Piszemy program

Na początek stwórzmy interfejs

<h2>Papier, kamień, nożyce</h2>

<button onclick="rps('papier')">Papier</button>
<button onclick="rps('kamień')">Kamień</button>
<button onclick="rps('nożyce')">Nożyce</button>

<p id="rps_result">Wybierz swój ruch!</p>

Dodajemy trzy przyciski i w atrybucie podajemy zdarzenia onclick, które wywołają naszą metodę rps napisaną w JavaScript. Na końcu podajemy pole w którym docelowo umieścimy odpowiedź.

Kod w Java Script możemy umieścić w tym samym pliku, albo przenieść na zewnątrz.

function rps ( player) {

   const choices = ['papier', 'kamień', 'nożyce'];
   const computer = choices [ Math.floor ( Math.random() * 3 ) ];
   
   result = 'Komputer wybrał ' + computer + '. ';

    if ( player == computer ) {
        result += 'Remis!';

    } else {

        switch ( player ) {

            case 'papier':
                result += ( computer == 'kamień' ) ? 'Wygrałeś!' : 'Przegrałeś!';
                break;

            case 'kamień':
                result += ( computer == 'nożyce' ) ? 'Wygrałeś!' : 'Przegrałeś!';
                break;

            case 'nożyce':
                result += ( computer  == 'papier' ) ? 'Wygrałeś!' : 'Przegrałeś!';
                break;
        }
    }
    
    document.getElementById ('rps_result').textContent = result;  
}

W powyższym kodzie losujemy jeden z trzech elementów (papier, kamień, nożyce), a następnie sprawdzamy co wybrał użytkownik. Losowanie odbywa się z wykorzystanie funkcji Math.random(), która zwraca liczbę z przedziału od 0 do 1 (liczba zawsze będzie mniejsza od 1). Aby uzyskać liczbę z przedziału 0 – 2 mnożymy wynik losowania przez 3, a następnie zaokrąglamy ją w dół i zamieniamy na liczbę całkowitą za pomocą Math.floor(). Na końcu wypełniamy pole o id rps_result stosownym komunikatem z informacją o wygranej bądź przegranej.

Rezultat:

Próba przewidzenia wyboru użytkownika

Ludzie mają tendencję do powtarzania swoich wyborów. Skorzystajmy z tego i stwórzmy prosty algorytm, które będzie próbowało zgadnąć kolejne wskazanie użytkownika na podstawie tego co wcześniej kliknął. Nadal będziemy losować, ale zwiększymy prawdopodobieństwo w zależności od wcześniejszych wyborów. Przenieśmy tablicę choices przed funkcję, aby uczynić ją globalną.

var choices = ['papier', 'kamień', 'nożyce'];

W samej funkcji zmodyfikujmy element losowania, aby uwzględniał długość tablicy oraz dodawajmy wybór użytkownika do niej.

const computer = choices [ Math.floor ( Math.random() * choices.length ) ];

switch ( player ) {

  case 'papier': choices.push ('nożyce'); break;
  case 'kamień': choices.push ('papier'); break;
  case 'nożyce': choices.push ('kamień'); break;

}

Teraz każde losowanie będzie uwzględniało poprzednie wybory użytkownika co spowoduje, że im więcej razy wybierze on np. kamień, tym częściej algorytm wybierze papier itp.

Kod na GitHub – papier-kamien-nozyce

Podsumowanie

1. Aby podpiąć kod JavaScript po naciśnięciu przycisku możemy użyć zdarzenia onclick.
2. Do losowania liczb 0..1 (zawsze mniejszych od 1) w JavaScript można zastosować funkcję Math.random
3. Aby zamienić liczbę na całkowitą możemy użyć funkcji Math.floor, która dodatkowo zaokrągli liczbę w dół.