I'm learning front end and this project for a rock paper game is killing me, I'm not getting any errors and the logic seems correct to me but I'm not getting any output. I think my buttons are wrong and maybe I'm but I honestly have no clue id really appreciate it if somebody could help me out I have been stuck on this for hours.
<script>
const score=document.querySelector("score");
const buttons=document.querySelectorAll("buttons");
const computer=document.querySelector("computer");
const player=document.querySelector("player");
const rock=document.getElementById("rock");
const paper=document.getElementById("paper");
const scisscors=document.getElementById("scisscors");
function computerplayer(){
let computer=Math.floor(Math.random() * 3);
let random=['rock',"paper",'sisscors']
if(computer>3){
return 'rock'
}
if(computer<2){
return 'paper'
}
else{
return 'sisscors'
}
}
function game(choice,computer){
if(choice=='rock'&& computer=='sisscors'){
pscore++
score();
console.log( 'u win');
}
if(choice== 'rock'&& computer==="rock"){
console.log("it be a tie")
}
if(choice=="rock"&& computer=="paper"){
cscore++
score();
console.log("u lose");
}
if(choice== 'sisscors'&& computer=='rock'){
console.log( "u lost")
cscore++
score();
}
if(choice=='sisscors'&& computer=='paper'){
console.log('you win')
pscore++
score();
}
if(choice=='paper'&& computer=='rock'){
console.log("you win")
pscore++
score();
}
if(choice=='paper'&& computer=='sisscors'){
console.log("lost")
cscore++
score();
}
}
function score(){
if(pscore==3){
console.log("end game win")
}
if(cscore==3){
console.log("end game loser")
}
}
buttons.addEventListener('click', function(){
game('rock')
})
buttons.addEventListener('click', function(){
game('paper')
})
buttons.addEventListener('click', function(){
game('sisscors')
})
</script>
Thanks
First of all this code won't return 3 or greater number
let computer = Math.floor(Math.random() * 3);
then computerplayer() will only return 'paper' and 'sisscors' and you should change computerplayer() function.
Next you should change your buttons event listennr to these:
rock.addEventListener('click', function () {
game('rock', computerplayer())
})
paper.addEventListener('click', function () {
game('paper', computerplayer())
})
rock.addEventListener('click', function () {
game('sisscors', computerplayer())
})
Since you have to change many more things, then I mentioned a complete code here:
<script>
window.addEventListener('load', () => {
let pscore = 0;
let cscore = 0;
const result = document.querySelector(".result");
const player = document.querySelector(".pscore");
const computer = document.querySelector(".cscore");
const rock = document.getElementById("rock");
const paper = document.getElementById("paper");
const scissors = document.getElementById("scissors");
rock.addEventListener('click', function () {
game('rock', computerplayer())
})
paper.addEventListener('click', function () {
game('paper', computerplayer())
})
scissors.addEventListener('click', function () {
game('scissors', computerplayer())
})
function computerplayer() {
let random = Math.floor(Math.random() * 3);
if (random == 0)
return 'rock'
else if (random == 1)
return 'paper'
else if (random == 2)
return 'scissors'
}
function game(choice, computerAction) {
if (choice == 'rock' && computerAction == 'scissors') {
pscore++
score();
console.log('u win');
} else if (choice == 'rock' && computerAction === "rock") {
console.log("it be a tie")
} else if (choice == "rock" && computerAction == "paper") {
cscore++
score();
console.log("u lose");
} else if (choice == 'scissors' && computerAction == 'rock') {
console.log("u lost")
cscore++
score();
} else if (choice == 'scissors' && computerAction == 'paper') {
console.log('you win')
pscore++
score();
} else if (choice == 'scissors' && computerAction === "scissors") {
console.log("it be a tie")
} else if (choice == 'paper' && computerAction == 'rock') {
console.log("you win")
pscore++
score();
} else if (choice == 'paper' && computerAction == 'scissors') {
console.log("lost")
cscore++
score();
} else if (choice == 'paper' && computerAction === "paper") {
console.log("it be a tie")
}
function score() {
console.log(pscore, cscore)
player.innerHTML = pscore;
computer.innerHTML = cscore;
if (pscore == 3) {
console.log("end game win")
result.innerHTML = 'You won.';
} else if (cscore == 3) {
console.log("end game loser")
result.innerHTML = 'Computer won.';
}
if (pscore == 3 || cscore == 3) {
rock.style.display = 'none';
paper.style.display = 'none';
scissors.style.display = 'none';
}
}
}
});
</script>
<body>
Computer:<span class="cscore"></span>
<br />
Player: <span class="pscore"></span><br />
<br />
<input type="button" id="rock" value="Rock" />
<input type="button" id="paper" value="Paper" />
<input type="button" id="scissors" value="scissors" />
<span class="result"></span>
</body>
Related
// Score //
let computerScore = 0
let playerScore = 0
function playRound() {
//My "choice"//
let Answer = prompt(`Do you choose Rock,Paper or Scissors ?`).toLowerCase();
console.log(Answer);
function computerPlay() {
computerPlay = Math.floor(Math.random() * 3)
if(computerPlay === 0) {
console.log("rock");
} else if (computerPlay === 1) {
console.log("paper");
} else if (computerPlay === 2){
console.log("scissors");
}
}
computerPlay()
//The conditions for the game//
if(Answer == "rock" && computerPlay === 0){
return ("Draw");
}
else if(Answer == "rock" && computerPlay === 1 ){
computerScore += 1
return("You lost");
}
else if(Answer == "rock" && computerPlay === 2){
playerScore += 1
return("You won");
}
if(Answer == "paper" && computerPlay === 0 ) {
playerScore += 1
return("You Won!");
}
else if(Answer == "paper" && computerPlay === 1) {
return("Draw");
}
else if (Answer == "paper" && computerPlay === 2) {
computerScore += 1
return("You Lost!");
}
if(Answer == "scissors" && computerPlay === 0) {
computerScore += 1
return("You Lost!")
}
else if(Answer == "scissors" && computerPlay === 1) {
playerScore += 1
return("You Won!");
}
else if(Answer == "scissors" && computerPlay === 2) {
return("Draw!");
}
}
//so this fucnction doesn't work...| How can I make it work??
V//
function winnerCheck() {
if (computerScore === 5){
console.log("Player won!")
}
else if (playerScore === 5) {
console.log("Computer won!");
}
}
winnerCheck()
playRound()
I built a very basic rock paper scissors game but it seems that somehow the game is not correctly capturing the userSelection or outputing the correct result...
I've spent hours researching and adjusting various aspects of my code but can't figure it out - I'm too green I guess.
I don't want a totally different version of how to do this -I'd like to fix this version and understand why it doesn't work currently :)
https://codepen.io/anna_whiskey/pen/XWRjQXV
const gameInputs = ['rock', 'paper', 'scissors'];
let computerSel;
let round1Answer;
let userSelection;
function game() {
function humanPlay() {
document.getElementById("btn1").addEventListener("click", () => {
userSelection = "rock";
})
document.getElementById("btn2").addEventListener("click", () => {
userSelection = "paper";
})
document.getElementById("btn3").addEventListener("click", () => {
userSelection = "scissors";
})
}
function computerPlay() {
computerSel = Math.floor(Math.random() * gameInputs.length);
round1Answer = (gameInputs[computerSel]);
console.log((gameInputs[computerSel]));
humanPlay();
}
computerPlay();
document.getElementById("outcome").textContent = `You: ${userSelection} Computer: ${round1Answer}`
function playRound(round1Answer, userSelection) {
if (userSelection === 'rock' && round1Answer === 'scissors') {
alert('You WIN!');
} else if (userSelection === 'rock' && round1Answer === 'rock') {
alert('It/s a tie!');
} else if (userSelection === 'paper' && round1Answer === 'rock') {
alert('You WIN!');
} else if (userSelection === 'paper' && round1Answer === 'paper') {
alert('It/s a tie!');
} else if (userSelection === 'scissors' && round1Answer === 'paper') {
alert('You WIN!');
} else if (userSelection === 'scissors' && round1Answer === 'scissors') {
alert('It/s a tie!');
} else {
alert('You LOSE!');
}
}
playRound(round1Answer, userSelection);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<title>Rock Paper Scissors</title>
<body>
<div class="bg"></div>
<button id="btn1" onclick="game()">Rock</button>
<button id="btn2" onclick="game()">Paper</button>
<button id="btn3" onclick="game()">Scissors</button>
<div id="outcome"></div>
<link rel="stylesheet" href="rps.css">
<script type="text/javascript" src="rpsv2.js"></script>
</body>
</html>
you should try adding event listeners for human inputs
const gameInputs = ['rock', 'paper', 'scissors'];
let computerSel;
let round1Answer;
let userSelection;
function game() {
function humanPlay() {
document.getElementById("btn1").addEventListener("click", () => {
userSelection = "rock";
console.log(`User Selection: ${userSelection}`)
})
document.getElementById("btn2").addEventListener("click", () => {
userSelection = "paper";
console.log(`User Selection: ${userSelection}`)
})
document.getElementById("btn3").addEventListener("click", () => {
userSelection = "scissor";
console.log(`User Selection: ${userSelection}`)
})
}
function computerPlay() {
computerSel = Math.floor(Math.random() * 3);
round1Answer = (gameInputs[computerSel]);
// console.log(`Round ans is ${round1Answer}`)
}
function playRound(round1Answer, userSelection) {
if (userSelection == 'rock' && round1Answer == 'scissors') {
alert('You WIN!');
}
else if (userSelection == 'paper' && round1Answer == 'rock') {
alert('You WIN!');
}
else if (userSelection == 'scissors' && round1Answer == 'paper') {
alert('You WIN!');
}
else if (userSelection == 'rock' && round1Answer == 'rock') {
alert('It/s a tie!');
}
else if (userSelection == 'paper' && round1Answer == 'paper') {
alert('It/s a tie!');
}
else if (userSelection == 'scissors' && round1Answer == 'scissors') {
alert('It/s a tie!');
}
else {
alert('You LOSE!');
}
}
humanPlay();
computerPlay();
playRound(round1Answer, userSelection);
}
using this i managed to log rock paper and scissor
You can simple do the task by the following script
JS
const gameInputs = ['rock', 'paper', 'scissors'];
let computerSel;
let round1Answer;
let userSelection;
function game (humanChoosed) {
userSelection = gameInputs[humanChoosed];
function computerPlay() {
computerSel = Math.floor(Math.random() * gameInputs.length);
round1Answer = (gameInputs[computerSel]);
}
computerPlay();
document.querySelector('h1').textContent = `Human: ${userSelection} Computer: ${round1Answer}`;
function playRound (round1Answer, userSelection) {
if (userSelection === 'rock' && round1Answer === 'scissors') {
alert ('You WIN!');
} else if (userSelection === 'rock' && round1Answer === 'rock') {
alert ('It/s a tie!');
} else if (userSelection === 'paper' && round1Answer === 'rock') {
alert ('You WIN!');
} else if (userSelection === 'paper' && round1Answer === 'paper') {
alert ('It/s a tie!');
} else if (userSelection === 'scissors' && round1Answer === 'paper') {
alert ('You WIN!');
} else if (userSelection === 'scissors' && round1Answer === 'scissors') {
alert ('It/s a tie!');
} else {
alert ('You LOSE!');
}
}
playRound (round1Answer, userSelection);
}
HTML
<body>
<div class="bg"></div>
<button id="btn1" onclick="game(0)">Rock</button>
<button id="btn2" onclick="game(1)">Paper</button>
<button id="btn3" onclick="game(2)">Scissors</button>
<h1>Hello</h1>
<link rel="stylesheet" href="rps.css">
<script type="text/javascript" src="rps.js"></script>
</body>
So i've been trying to learn to code and have been using codeAcademy as as resource. I'm currently doing a Rock, Paper, Scissors exercise and my code runs fine but my last console.log(determineWinner(userChoice, computerChoice));" throws an undefined into the console. Any help would be appreciated.
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 (getUserChoice === getComputerChoice) {
return 'the game was a tie';
}
}
if (getUserChoice === 'rock') {
if (getComputerChoice === 'paper') {
return 'computer won!';
} else {
return 'you won!';
}
}
if (getUserChoice === 'paper') {
if (getComputerChoice === 'scissors') {
return 'computer won!';
} else {
return 'you won!';
}
}
if (getUserChoice === 'scissors') {
if (getComputerChoice === 'rock') {
return 'computer won!';
} else {
return 'you won!';
}
}
const playGame = () => {
const userChoice = getUserChoice('rock');
const computerChoice = getComputerChoice();
console.log(`You threw: ${userChoice}`);
console.log(`The computer threw: ${computerChoice}`);
console.log(determineWinner(userChoice, computerChoice));
};
playGame();
Ignoring a small syntax mistake in the code you posted here, the problem with the non-working code is that in the function determineWinner, you've two variables named userChoice and computerChoice. But, wrongly, you are using getUserChoice and getComputerChoice.
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';
}
if (userChoice === 'rock') {
if (computerChoice === 'paper') {
return 'computer won!';
} else {
return 'you won!';
}
}
if (userChoice === 'paper') {
if (computerChoice === 'scissors') {
return 'computer won!';
} else {
return 'you won!';
}
}
if (userChoice === 'scissors') {
if (computerChoice === 'rock') {
return 'computer won!';
} else {
return 'you won!';
}
}
}
const playGame = () => {
const userChoice = getUserChoice('rock');
const computerChoice = getComputerChoice();
console.log(`You threw: ${userChoice}`);
console.log(`The computer threw: ${computerChoice}`);
console.log(determineWinner(userChoice, computerChoice));
};
playGame();
Added buttons to my rock paper scissors game, I was having trouble making the alert show up after the userChoice variable changes, so I used eventListeners for that and the winner stopped showing up with the alert, why is this happening? Is there a better way to do this?
I'm a beginner any help is appreciated.
<!DOCTYPE html>
<html>
<body>
</body>
<script>
function compPlay (){} //picks a random nb and makes it rock paper...
let userChoice;
function userPlay (){
btnRock.addEventListener("click", ()=>{
userChoice="rock";
return userChoice;
});
btnPaper.addEventListener("click", ()=>{
userChoice="paper";
return userChoice;
});
btnScissors.addEventListener("click", ()=>{
userChoice="scissors";
return userChoice;
});
}
function theGame (compPlay,userPlay) {
if (compPlay===userPlay) {
alert("its tied");
} else if (compPlay === "rock" && userPlay === "scissors") {
alert("you lose!");
} else if (compPlay === "scissors" && userPlay === "paper") {
alert("you lose");
} else if (compPlay=== "paper" && userPlay === "rock"){
alert("you lose");
} else if (compPlay === "scissors" && userPlay === "rock") {
alert("you win!");
} else if (compPlay === "paper" && userPlay === "scissors") {
alert("you win");
} else if (compPlay=== "rock" && userPlay === "paper"){
alert("you win");
}
}
theGame(compPlay(),userPlay());
</script>
</html>
The function call will happen during the load of the script.At that time, the compPlay function will return a value whereas the userPlay function will create the elements. Thereafter when the button click is happening, the function will not even be called.
Edit:For your info..This is one way to do it
<!DOCTYPE html>
<html>
<body>
</body>
<script>
function compPlay (){
let comChoice= Math.random();
console.log(comChoice);
if (comChoice<=0.33){
comChoice= "rock";
} else if (comChoice<=0.66){
comChoice= "scissors";
} else {
comChoice= "paper";
}
userPlay(comChoice);
}
let userChoice;
function userPlay (comChoice){//Function for user's click comparison with computer's option
let btnRock = document.createElement("button");
let tRock = document.createTextNode("Rock");
btnRock.appendChild(tRock);
document.body.appendChild(btnRock);
btnRock.addEventListener("click", ()=>{
userChoice="rock";
theGame(comChoice,userChoice);//Main function call to decide the winner
});
let btnPaper = document.createElement("button");
let tPaper = document.createTextNode("Paper");
btnPaper.appendChild(tPaper);
document.body.appendChild(btnPaper);
btnPaper.addEventListener("click", ()=>{
userChoice="paper";
theGame(comChoice,userChoice);
});
let btnScissors = document.createElement("button");
let tScissors = document.createTextNode("Scissors");
btnScissors.appendChild(tScissors);
document.body.appendChild(btnScissors);
btnScissors.addEventListener("click", ()=>{
userChoice="scissors";
theGame(comChoice,userChoice);
});
}
function theGame (compPlay,userPlay) {
if (compPlay===userPlay) {
alert("its tied");
} else if (compPlay === "rock" && userPlay === "scissors") {
alert("you lose!");
} else if (compPlay === "scissors" && userPlay === "paper") {
alert("you lose");
} else if (compPlay=== "paper" && userPlay === "rock"){
alert("you lose");
} else if (compPlay === "scissors" && userPlay === "rock") {
alert("you win!");
} else if (compPlay === "paper" && userPlay === "scissors") {
alert("you win");
} else if (compPlay=== "rock" && userPlay === "paper"){
alert("you win");
}
}
compPlay();//Basic initialising function call
</script>
</html>
You could call the game function when you click on a button
btnScissors.addEventListener("click", ()=>{
userChoice="scissors";
theGame(comChoice,userChoice);
});
EDIT:
I forgot to said that in order to work to you should change your comChoice to a Global variable.Thanks #Krisna Prashatt
Hy there. I am new to javascript and i want to make a simple game of rock, papper scissors but after running the code i get the 2 prompted messages and the 'TypeError: playerOneChoice is not a function'. what did I do wrong ?
thanks very much.
function getPlayerOneChoice(){
var playerOneInput = prompt('Mihai what do you pick ?');
playerOneInput = playerOneInput.toLowerCase();
if(playerOneInput === 'rock' || playerOneInput === 'paper' || playerOneInput === 'scissors'){
return playerOneInput;
} else {
console.log('Invalid Choice !!!');
}
}
function getPlayerTwoChoice(){
var playerTwoInput = prompt('Flavia what do you pick ?');
playerTwoInput = playerTwoInput.toLowerCase();
if(playerTwoInput === 'rock' || playerTwoInput === 'paper' || playerTwoInput === 'scissors'){
return playerTwoInput;
} else {
console.log('Invalid pick !!');
}
}
function determineWinner(playerOneChoice, playerTwoChoice) {
if(playerOneChoice = playerTwoChoice) {
console.log('Tie');
}
if(playerOneChoice === 'rock'){
if(playerTwoChoice === 'scissors'){
return 'Mihai you won !';
} else {
return 'Flavia you won';
}
}
if(playerOneChoice === 'scissors'){
if(playerTwoChoice === 'paper'){
return 'Mihai you won!!!';
} else{
return 'Flavia you won!!!';
}
}
if(playerOneChoice === 'paper'){
if(playerTwoChoice === 'rock'){
return 'Mihai you won';
} else {
return 'Flavia you won';
}
}
}
function playGame() {
var playerOneChoice = getPlayerOneChoice();
var playerTwoChoice = getPlayerTwoChoice();
console.log('Mihai\'s pick : ' + playerOneChoice());
console.log('Flavia\'s pick : ' + playerTwoChoice());
console.log(determineWinner());
}
playGame();
There are 3 errors in your code
1. console.log('Mihai\'s pick : ' + playerOneChoice());
You are calling the function playerOneChoice which does not exist. You actually want to call the variable playerOneChoice. Remove the parenthesis.
2. console.log(determineWinner());
You are calling the method without parameter but you need both choice. Call it like determineWinner(playerOneChoice,playerTwoChoice)
3. if (playerOneChoice === playerTwoChoice)
You are assignin playerTwoChoice to playerOneChoice instead of comparing them. Use ===
function getPlayerOneChoice() {
var playerOneInput = prompt('Mihai what do you pick ?');
playerOneInput = playerOneInput.toLowerCase();
if (playerOneInput === 'rock' || playerOneInput === 'paper' || playerOneInput === 'scissors') {
return playerOneInput;
} else {
console.log('Invalid Choice !!!');
}
}
function getPlayerTwoChoice() {
var playerTwoInput = prompt('Flavia what do you pick ?');
playerTwoInput = playerTwoInput.toLowerCase();
if (playerTwoInput === 'rock' || playerTwoInput === 'paper' || playerTwoInput === 'scissors') {
return playerTwoInput;
} else {
console.log('Invalid pick !!');
}
}
function determineWinner(playerOneChoice, playerTwoChoice) {
if (playerOneChoice === playerTwoChoice) {
console.log('Tie');
}
if (playerOneChoice === 'rock') {
if (playerTwoChoice === 'scissors') {
return 'Mihai you won !';
} else {
return 'Flavia you won';
}
}
if (playerOneChoice === 'scissors') {
if (playerTwoChoice === 'paper') {
return 'Mihai you won!!!';
} else {
return 'Flavia you won!!!';
}
}
if (playerOneChoice === 'paper') {
if (playerTwoChoice === 'rock') {
return 'Mihai you won';
} else {
return 'Flavia you won';
}
}
}
function playGame() {
var playerOneChoice = getPlayerOneChoice();
var playerTwoChoice = getPlayerTwoChoice();
console.log('Mihai\'s pick : ' + playerOneChoice);
console.log('Flavia\'s pick : ' + playerTwoChoice);
console.log(determineWinner(playerOneChoice,playerTwoChoice));
}
playGame();
Remove () from playerOneChoice() and playerTwoChoice()
It must be so:
console.log('Mihai\'s pick : ' + playerOneChoice);
console.log('Flavia\'s pick : ' + playerTwoChoice);