JS - Prośba o sprawdzenie zadania stworzenia prostej gry w papier nożyce kamień,

Question

Witam,

Chciałbym prosić o sprawdzenie mojego kodu, który napisałem do zadania otrzymanego w kursie, który aktualnie przerabiam.

Dodam ze celowo użyłem podstawowych składni funkcji.

Jestem na wczesnym etapie nauki i to właśnie funkcje przerabiam teraz.

Będę wdzięczny za wszelkie sugestie (poza tymi aby skrócić funkcje - na tym etapie taka forma jest dla mnie bardziej czytelna )

Pozdrawiam i życzę wszystkim wesołych świat! :)

treść zadania (w moim kodzie nazwy zmiennych i funkcji różnią się od tych w zadaniu):

1. Start a new Git repo for your project.
2. Create a blank HTML document with a script tag (Hint: it is best practice to link an external .js file). This game is going to be played completely from the console, so don’t worry about putting anything else in there.
3. Your game is going to play against the computer, so begin with a function called computerPlay that will randomly return either ‘Rock’, ‘Paper’ or ‘Scissors’. We’ll use this function in the game to make the computer’s play. Tip: use the console to make sure this is returning the expected output before moving to the next step!
4. Write a function that plays a single round of Rock Paper Scissors. The function should take two parameters - the playerSelection and computerSelection - and then return a string that declares the winner of the round like so: "You Lose! Paper beats Rock"
   1. Make your function’s playerSelection parameter case-insensitive (so users can input rock, ROCK, RocK or any other variation).

5. Important note: you want to return the results of this function call, not console.log() them. To test this function console.log the results:

   function playRound(playerSelection, computerSelection) {
     // your code here!
   }
   
   const playerSelection = "rock";
   const computerSelection = computerPlay();
   console.log(playRound(playerSelection, computerSelection));
   

6. Write a NEW function called game(). Use the previous function inside of this one to play a 5 round game that keeps score and reports a winner or loser at the end.
   1. You have not officially learned how to “loop” over code to repeat function calls… if you already know about loops from somewhere else (or if you feel like doing some more learning) feel free to use them. If not, don’t worry! Just call your playRound function 5 times in a row. Loops are covered in the next lesson.
   2. At this point you should be using console.log() to display the results of each round and the winner at the end.
   3. Use prompt() to get input from the user. Read the docs here if you need to.
   4. Feel free to re-work your previous functions if you need to. Specifically, you might want to change the return value to something more useful.
   5. Feel free to create more “helper” functions if you think it would be useful.

Moj kod:

<script>

// pojemnik na odpowiedz gracza
let playerChoice = "";
// tablica z ktorej losuje komputer
const shape = ["ROCK", "PAPER", "SCISSORS"];
// losowanie komputera
function computerPlay() {
    let computerSay = Math.floor((Math.random()) * shape.length);
    return computerSay;
}
// pojemnik na wynik komputera
let computerChoice = "";
// funkcja wybrania zwyciescy rund
function compare(playerChoice, computerChoice) {
    if (playerChoice === "PAPER" && computerChoice === "ROCK") {
        alert ("You are the winner!");
        return "win";
    } else if(playerChoice === "ROCK" && computerChoice === "SCISSORS") {
        alert("You are the winner");
        return "win";
    } else if (playerChoice === "SCISSORS" && computerChoice === "PAPER") {
        alert("You are the winner");
        return "win";
    } else if (playerChoice === computerChoice) {
        alert("draw");
        return "draw";
    }else {
        alert("you lost");
        return "loose";
    }
}
// tablica zbierajaca wyniki rund
let wyniki = []; 
// pojemnik na ostateczny wynik z 5 rund
let wynikOstateczny = null;
// funkcja przeprowadzajaca gre
function gra() {
    for (let i = 0; i < 5; i++) {
        playerChoice = (prompt("Choice your sign (Rock, Paper, Scissors)")).toUpperCase();
        computerChoice = shape[computerPlay()];
        console.log("computer say: " + computerChoice);
        console.log("player say: " + playerChoice);
        wyniki.push(compare(playerChoice, computerChoice));
        console.log(wyniki);
    }
    winnerCheck();
}
// funkcja sprawdzajaca ostatecznego zwyciesce z 5 rund
function winnerCheck() {
    for (let j = 0; j < wyniki.length; j++) {
        if (wyniki[j] === "win") {
            wynikOstateczny = +1;
        } else if (wyniki[j] === "draw") {
            wynikOstateczny = +0;
        } else {
            wynikOstateczny = -1;
        }
    }
    if (wynikOstateczny > 0) {
        alert("WYGRALES!!!!");
    } else if (wynikOstateczny === 0) {
        alert("REMIS!!!!!");
    } else {
        alert("PRZEGRALES!!!!");
    }
}

</script>

Z góry dziękuje za poświęcony czas.

Answer 1

Moim zdaniem pisanie ciągle w prompt - "ROCK", "PAPER", "SCISSORS" będzie męczące dla gracza, lepiej użyć indeksów z tablicy shape

 

przykład 1

const shape = ['Rock', 'Paper', 'Scissors'],
      shape_prompt = `[1] ${shape[0]}  [2] ${shape[1]}  [3] ${shape[2]}`;

async function demo() {
  while (true) {
    // "zatrzymanie" na 0.5 sekundy wykonywanie kodu
    await pause(500); 
    
    const player_choice = prompt('Choice your sign: ' + shape_prompt + '  [Enter] Exit');

    if (!player_choice || player_choice === null) break;
    if (player_choice.trim() && inRange(parseInt(player_choice), 1, 3))
      console.log('player say: ' + shape[player_choice - 1]);
  }
  
  console.log('player say: Exit');
}

const inRange = (x, min, max) => { return x >= min && x <= max; };
const pause = (m) => { return new Promise(resolve => setTimeout(() => { resolve(); }, m)) };

demo();

w powyższym przykładzie cyfry (znaki) inne niż 1, 2, 3 są ignorowane a kliknięcie w przycisk OK lub naciśnięcie Enter gdy nic nie jest wpisane w pole prompt kończy pętle while.

przykład 2

const shape = ['Rock', 'Paper', 'Scissors'],
      shape_prompt = `[1] ${shape[0]}  [2] ${shape[1]}  [3] ${shape[2]}`,
      results = [];

for (let i = 0; i < 5; i++) {
  console.info(i + 1);
  const player_choice = parseInt(prompt('Choice your sign: ' + shape_prompt)) - 1,
        computer_choice = Math.floor((Math.random()) * shape.length);

  console.log('player say: ' + shape[player_choice]);
  console.log('computer say: ' + shape[computer_choice]);

  if (player_choice == computer_choice) {
    results.push('draw');
    console.log('Drawn');
  } else if ((player_choice == 0 && computer_choice == 2) ||
             (player_choice == 1 && computer_choice == 0) || 
             (player_choice == 2 && computer_choice == 1)) {
    results.push('win');
    console.log("You are the winner!");
  } else {
    results.push('loose');
    console.log("You lost!");    
  }  
}

console.log(results);

 

można po prostu pominąć taki zapis (po co "dodawać zero"  ) 

else if (wyniki[j] === "draw") {
    wynikOstateczny = +0;


na np.:

for (let j = 0; j < wyniki.length; j++)
  if (wyniki[j] === "win")
    wynikOstateczny += 1;
  else if (wyniki[j] === "loose")
    wynikOstateczny -= 1;

 

przykład

const wyniki = ['win', 'win', 'draw', 'loose', 'win'];
let wynikOstateczny = 0;

for (let j = 0; j < wyniki.length; j++)
  if (wyniki[j] === "win")
    wynikOstateczny += 1;
  else if (wyniki[j] === "loose")
    wynikOstateczny -= 1;

console.log(wynikOstateczny);

 

ewentualnie "użycie zero" przy takim zapisie

const wyniki = ['win', 'win', 'draw', 'loose', 'win'];
let wynikOstateczny = 0;

for (let j = 0; j < wyniki.length; j++)
  wynikOstateczny += (wyniki[j] === "win") ? 1 : (wyniki[j] === "loose") ? -1 : 0;

console.log(wynikOstateczny);


lub


const wyniki = ['win', 'win', 'draw', 'loose', 'win'];
let wynikOstateczny = 0;
 
for (let wynik of wyniki)
  wynikOstateczny += (wynik === "win") ? 1 : (wynik === "loose") ? -1 : 0;
 
console.log(wynikOstateczny);

 

 

P.S. Create a pause inside a while loop in Javascript

Comments

Cześć, bardzo dziękuje za odpowiedz. Zadanie dokładnie określa w jaki sposób gra ma pozyskiwać dane od gracza:

"Use prompt() to get input from the user. Read the docs here if you need to."

"Make your function’s playerSelection parameter case-insensitive (so users can input rock, ROCK, RocK or any other variation)."

Wiec pod takim kontem tworzyłem kod.

Nie chciałem zmieniać za dużo ponieważ to zadanie będzie wykorzystane w późniejszym etapie nauki do zbudowania interfejsu wokół niego.

Nie znam jeszcze funkcji asynchronicznych.

Bardziej chodziło mi o ocenę mojego pomysłu na konstrukcje kodu i uwagi odnosnie zapisu oraz wykorzystania posiadanej skromnej wiedzy. Czy to co stworzyłem jest akceptowalne i wpisuje się w ramy powierzonego mi zadania?

Masz racje z dodawaniem zera nie wiem czemu nie pomyślałem o tym ;D

zmieniłem pętle :

function winnerCheck() {
    for (let j = 0; j < wyniki.length; j++) {
        if (wyniki[j] === "win") {
            wynikOstateczny = +1;
        } else if (wyniki[j] === "loose") {
            wynikOstateczny = -1;
        }
    }
    if (wynikOstateczny > 0) {
        alert("WYGRALES!!!!");
    } else if (wynikOstateczny === 0) {
        alert("REMIS!!!!!");
    } else {
        alert("PRZEGRALES!!!!");
    }
}

Jeszcze raz dzięki za poświęcony czas ;)