Rock Paper Scissors : please help me test it


#1

i believe i have completed the rock paper scissors project correctly and am now trying to test it out

i wrote it into an html file
then i managed to create a “PLAY GAME” button and link it to a prompt
the problem is that i dont know how to link the prompt input to the rest of the game

<!DOCTYPE html>
<head>
	<title>testing</title>
</head>
</body>

<button onclick="playRps()">PLAY GAME</button>

<script>

function playRps() {
    var getUserChoice = prompt("choose Your weapon rock, paper or scissors?", ); {
	
    }
}

const getUserChoice = (userInput) => {
  userInput = userInput.toLowerCase();
  if (userInput === 'rock' || userInput === 'paper' || userInput === 'scissors') {
    return userInput;
  } else {
    console.log('Error!');
  }
}

const getComputerChoice = () => {
	switch (Math.floor(Math.random() * 3)) {
    case 0:
      return 'rock';
    case 1:
      return 'paper';
    case 2:
      return 'scissors';
 }
} 

const determineWinner = (userChoice, computerChoice) => {
  if (userChoice === computerChoice) {
    return 'The game was a tie.';
  } else if (userChoice === 'rock') {	
  	if (computerChoice === 'scissors') {
   return 'You have won!';
  } else {
    return 'The computer won.';
	}

if (userChoice === 'paper') {
  if (computerChoice === 'rock') {
    return 'You have won!';
  } else {
    return 'The computer won.';
  }
}

if (userChoice === 'scissors') {
  if (computerChoice ===  'paper') {
    return 'You have won!';
  } else {
    return 'The computer won.';
			}
		}	
	}
}
 
const playGame = () => {
  const userChoice = getUserChoice('rock', 'paper', 'scissors');
  const computerChoice = getComputerChoice();
  console.log('Your choice was: ' + userChoice);
  console.log('The computer is: ' + computerChoice);
  console.log(determineWinner(userChoice, computerChoice));
}


</script>
</body>


#2

You already had a playGame function, why did you add playRps? playGame has already all the connected pieces.

however, in playGame you call getUserChoice:

const userChoice = getUserChoice('rock', 'paper', 'scissors');

with 3 arguments, the function only has a single parameter.

add the prompt to playGame, pass the result of the prompt to getUserChoice to validate the user made a valid choice


#4

ok so i deleted the first function
i added the prompt to play game

the reason i have three arguments is because there are three different answers someone can type into the prompt window

i cant find a section of this website that teaches you how to use HTML buttons or prompt windows to pass input to a JavaScript function [if there is one what is it?]

i really dont know what i am doing but what i am attempting to do is this…
i want to have this game as a button on a website, not start right away
i want the user to press a “play game” button.
then have the prompt open.
then player can add either “rock” “paper” or "scissors"
and get a result

<!DOCTYPE html>
<head>
	<title>testing</title>
</head>
</body>

<button onclick="playGame()">PLAY GAME</button>

<script>

const getUserChoice = (userInput) => {
  userInput = userInput.toLowerCase();
  if (userInput === 'rock' || userInput === 'paper' || userInput === 'scissors') {
    return userInput;
  } else {
    console.log('Error!');
  }
}

const getComputerChoice = () => {
	switch (Math.floor(Math.random() * 3)) {
    case 0:
      return 'rock';
    case 1:
      return 'paper';
    case 2:
      return 'scissors';
 }
} 

const determineWinner = (userChoice, computerChoice) => {
  if (userChoice === computerChoice) {
    return 'The game was a tie.';
  } else if (userChoice === 'rock') {	
  	if (computerChoice === 'scissors') {
   return 'You have won!';
  } else {
    return 'The computer won.';
	}

if (userChoice === 'paper') {
  if (computerChoice === 'rock') {
    return 'You have won!';
  } else {
    return 'The computer won.';
  }
}

if (userChoice === 'scissors') {
  if (computerChoice ===  'paper') {
    return 'You have won!';
  } else {
    return 'The computer won.';
  		}
		}	
	}
}
 
const playGame = () => {
  prompt('choose your weapon rock paper or scissors?');
  const userChoice = getUserChoice('rock' || 'paper' || 'scissors');
  const computerChoice = getComputerChoice();
  console.log('Your choice was: ' + userChoice);
  console.log('The computer is: ' + computerChoice);
  console.log(determineWinner(userChoice, computerChoice));
}


playGame();

</script>
</body>


#5

you should store the result of the prompt in a variable:

choice = prompt('choose your weapon rock paper or scissors?');

then pass choice as argument to getUserChoice

getUserChoice is a confusing naming for the function, because it validates the userChoice, it doesn’t get the userChoice, so validateUserChoice might be a better name for the function. There should be one argument, given there is also one parameter (the amount of arguments should match the amount of parameters)

the jquery course teaches this (a javascript library which makes DOM manipulation easier), i believe its now part of the JS course

you need things like getElementById and textContent (or innerHTML). MDN has good documentation on this, you can just google: MDN getElementById for example.

Javascript has console, which offers method like log to log to the console

and then there is the window object which represents a window containing a DOM document, see window documentation:

https://developer.mozilla.org/en-US/docs/Web/API/Window

then you need to understand DOM:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

which can be overwhelming, then the console is easier to use at first


#6

oh awesome! im going to study all that before trying to throw it online
thanks!


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.