We Keep Coding

How To Optimize Game Increment Function In Rock, Paper, and Scissors Javascript Game To Not Label A Winner In a Tie Game Situation?

I am a newbie programmer, making a rock, paper, scissors game. I have the game "working", however, I am unable to isolate why some tie games actually credit either the player or computer as the winner and vice versa, some games that are not a tie, has an alert pop up signifying the game is tied. The code:
/*variable statements follow*/
const choices = ["rock", "paper", "scissors"];
const resultOutput = document.getElementById('result-output');
let roundsPlayed = 0;
/**
* This Array from statement within the function sets event listener to the button class control array
* which listens for the user and computer choices which are fed to the getresult function
*/
function arrayMethod() {
const resultDisplay = document.getElementById('result');
const possibleChoices = document.getElementsByClassName('control');
let computerChoice = document.getElementById('computer-choice').innerText;
Array.from(possibleChoices).forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id;
resultDisplay.innerHTML = userChoice;
compChoice = generateComputerChoice();
gameImages(userChoice, computerChoice);
getResult();
}));
}
/**
* This adds an event listener for the reset button
*/
document.getElementById("resetScore").addEventListener("click", resetScore);
/**
* This function generates a random number for the computer and displays
* the output to the innerHTML
*/
function generateComputerChoice() {
let randomNumber = Math.floor(Math.random() * 3);
let computerChoiceDisplay = document.getElementById('computer-choice');
computerChoiceDisplay.innerHTML = choices[randomNumber];
}
/**
* Provides the logic to determin what to do in the event that either
* the user or computer wins, as well as what to do in the even of a draw.
*/
function getResult () {
computerChoice = document.getElementById('computer-choice').innerText;
userChoice = document.getElementById('result').innerText;
if (computerChoice === userChoice) {
result = "It's a draw!";
resultOutput.innerHTML = result;
completeRound();
}
else if (computerChoice === 'rock' && userChoice === 'paper') {
result = "You Win!";
resultOutput.innerHTML = result;
incrementUserScore();
}
else if (computerChoice === 'rock' && userChoice === 'scissors') {
result = "You lost!";
resultOutput.innerHTML = result;
incrementComputerScore();
}
else if (computerChoice === 'paper' && userChoice === 'scissors') {
result = "You Win!";
resultOutput.innerHTML = result;
incrementUserScore();
}
else if (computerChoice === 'paper' && userChoice === 'rock') {
result = "You lost!";
resultOutput.innerHTML = result;
incrementComputerScore();
}
else if (computerChoice === 'scissors' && userChoice === 'rock') {
result = "You win!";
resultOutput.innerHTML = result;
incrementUserScore();
}
else if (computerChoice === 'scissors' && userChoice === 'paper') {
result = "You lost!";
resultOutput.innerHTML = result;
incrementComputerScore();
}
resultOutput.innerHTML = result;
toggleBackgroundColor();
}
/**
* This function allows for the dynamic change of images based on user or
* computer choices.
*/
function gameImages(playerChoice, computerChoice) {
playerChoice = document.getElementById("result").innerHTML;
computerChoice = document.getElementById("computer-choice").innerHTML;
const playerImage = document.getElementById('player-image');
const computerImage = document.getElementById('computer-image');
playerImage.src = `assets/images/${playerChoice}.jpg`;
playerImage.alt = choices [userChoice];
computerImage.src = `assets/images/${computerChoice}.jpg`;
computerImage.alt = choices[computerChoice];
}
/**
* Gets the user score from the DOM and increments it by 1
*/
function incrementUserScore() {
let oldScore = parseInt(document.getElementById("userScore").innerText);
document.getElementById("userScore").innerText = ++oldScore;
completeRound();
}
/**
* Gets the computer score from the DOM and increments it by 1
*/
function incrementComputerScore() {
let oldScore = parseInt(document.getElementById("compScore").innerText);
document.getElementById("compScore").innerText = ++oldScore;
completeRound();
}
/**
* This function provides the logic used to reset the user and
* computer score back to zero, upon the user request.
*/
function resetScore() {
document.getElementById("userScore").innerText = 0;
document.getElementById("compScore").innerText = 0;
roundsPlayed = 0;
}
/**
* This function is to limit the amount of playable paper, rock, and scissors game to best out of 9
*/
function limitGameToBestOutOfNine () {
let score = parseInt(document.getElementById("userScore").innerText);
let mistakes = parseInt(document.getElementById("compScore").innerText);
if (score > mistakes) {
alert('Player has won the game!');
} else if (mistakes > score) {
alert('Computer has won the game!');
} else {
alert('It\'s a tie!');
}
}
/***
* This function limits the amount of games to below 10 and decides the winner
* who receives the most wins out of 9 games
*/
function completeRound() {
let userScore = parseInt(document.getElementById("userScore").innerText);
let computerScore = parseInt(document.getElementById("compScore").innerText);
roundsPlayed++
console.log(roundsPlayed);
if (roundsPlayed > 9) {
limitGameToBestOutOfNine();
resetScore();
}
}
/***
* This function toggles the background color of the .player .computer class
* based on the winner of the current game. The winner color is green and the loser color is red
*/
function toggleBackgroundColor() {
const player = document.getElementById('player');
const computer = document.getElementById('computer');
const winner = resultOutput.innerHTML.toLowerCase();
if (winner.includes('you win')) {
player.style.backgroundColor = "#00FF00";
computer.style.backgroundColor = "#FF0000";
}
else if (winner.includes('you lost')) {
player.style.backgroundColor = "#FF0000";
computer.style.backgroundColor = "#00FF00";
}
else {
player.style.backgroundColor = "#00FF00";
computer.style.backgroundColor = "#00FF00";
}
}
document.onload = arrayMethod();
Any advice would be greatly appreciated. Thank you!
I am unable to isolate why some tie games actually credit either the player or computer as the winner and vice versa, some games that are not a tie, has an alert pop up signifying the game is tied. I have tried to console log certain aspects of the game output, but am having a hard time finding why the game behaves like this periodically.

What is wrong with my JavaScript assignment

I am practicing the rock-paper-scissors assignment.
When I call playRound function manually it returns normal (e.g tie true false tie tie).
But when I call playRound function with iteration through game function it returns (true true true true) or (false false false false false) or (tie tie tie tie tie), instead of something like (false tie false true tie). I used the if-else clause and now I used switch yet still the same output. please how will I solve the issue?
function getComputerPlay() {
let selectAny = ["paper", "rock", "scissors"];
let randomReturn = Math.floor(Math.random() * selectAny.length);
return selectAny[randomReturn];
}
function getUserSelect(choice) {
let userSelect = choice.toLowerCase();
if (userSelect === "rock" || userSelect === "paper" || userSelect === "scissors") return userSelect;
return "Not valid";
}
function playRound(playSelection, computerSelection) {
if (playSelection === computerSelection) return "Tie!.";
if (playSelection === "paper") {
if (computerSelection === "rock") {
return true;
}
else {
return false;
}
}
if (playSelection === "rock") {
if (computerSelection === "scissors") {
return true;
}
else {
return false;
}
}
if (playSelection === "scissors") {
if (computerSelection === "rock")
return false;
} else {
return true;
}
}
function game(playSelection, computerSelection) {
let win = 0;
let lost = 0;
let tie = 0;
for (let i = 0; i < 5; i++) {
let playRoundReturn = playRound(playSelection, computerSelection);
switch (playRoundReturn) {
case true:
win++;
break;
case false:
lost++;
break;
default:
tie++;
break;
}
}
console.log(win, lost, tie);
return "You won " + win + "times, lost " + lost + "times and draw " + tie + "time";
}
let playSelection = getUserSelect("rock");
let computerSelection = getComputerPlay();
let play = game(playSelection, computerSelection); //called playRound with iteration through game()
//let pl = playRound(playSelection, computerSelection); //called playRound manually
console.log(play);

This is because the playSelection is always 'rock', and the computerSelection only runs the random gen once, so will always be the same value for all 5 rounds.
Move the random generator into the for loop, e.g.
let playRoundReturn = playRound(playSelection, getComputerPlay());

Rock Paper Scissors game with JavaScript

I have recently got into coding with JavaScript and decided to make a game, to test my knowledge. Nothing happens when I press on the objects supposed to start the game, and when I send information through the console, (most of the time) nothing happens.
const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result")
let computer;
let computer_pick;
let result;
//Player choice
rock.onclick = play('rock');
paper.onclick = play('paper');
scissor.onclick = play('scissor');
function play(userinput) {
computer_pick = Math.floor(Math.random() * 3);
console.log(computer_pick);
if (computer_pick === 0) {
computer = 'rock'
} else if (computer_pick === 1) {
computer = 'paper';
} else if (computer_pick === 2) {
computer = 'scissor';
} else { console.log('error') };
console.log(computer);
//
if (computer == userinput) { //tie
result = 'tie';
} else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
console.log(win);
result = 'win';
} else if (computer == 'rock' && userinput == 'scissor' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == 'paper') {
console.log(loss);
result = 'lost';
}
//output
document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.;
}

Are you waiting until the DOM is loaded?
Where are you inject this file to DOM? in head tag or body tag!
If you inject this code in head tag you need to wait until the DOM become loaded
something like this:
window.onload = function() {
// Your script
}

There are some errors in your code:
rock.onclick is not correct - rock.addEventlistener('click', function(e) {}) is correct
console.log(win) (or loss) is not correct - you try to console.log() a variable that doesn't exist - to output a string in console.log() you should put it in quotes console.log('win')
document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.; is not correct - you should use backticks for string interpolation
You didn't define rock as you did paper and scissor
This is not an coding error, but a simple logic problem: you have three result ALTERNATIVES: tie, win, lost. If it's not a tie and user hasn't win (won), then user lost. You don't need the last else if, only else
The same is true for the computer_pick variable - there's no room for error (the random value can only be 0, 1 or 2), so you don't need the else for error. And if computer_pick is not 0 or 1, then it has to be 2 (no need for the else if, only for else).
const rock = document.getElementById('rock');
const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result");
let computer;
let computer_pick;
let result;
//Player choice
rock.addEventListener('click', function(e) {
play('rock')
})
paper.addEventListener('click', function(e) {
play('paper')
})
scissor.addEventListener('click', function(e) {
play('scissor')
})
function play(userinput) {
computer_pick = Math.floor(Math.random() * 3);
console.log('computer_pick:', computer_pick);
if (computer_pick === 0) {
computer = 'rock'
} else if (computer_pick === 1) {
computer = 'paper';
} else {
computer = 'scissor';
}
console.log('computer:', computer);
//
if (computer == userinput) { //tie
result = 'tie';
} else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
console.log('win');
result = 'win';
} else {
console.log('lost');
result = 'lost';
}
//output
document.getElementById('result').innerHTML = `You ${result}! The computer threw ${computer}.`;
}
<div id="rock">ROCK</div><br />
<div id="paper">PAPER</div><br />
<div id="scissor">SCISSORS</div><br />
<div>RESULT: <span id="result"></span></div>
And you could go a bit further by thinking through the logic:
// you can use a query selector with a class
const btns = document.querySelectorAll('.btn')
// gameRulesObj to define what beats what
const gameRulesObj = {
"rock": "paper",
"paper": "scissor",
"scissor": "rock"
}
btns.forEach(e => {
e.addEventListener('click', function(e) {
appendToDOMElement('result', play(this.getAttribute('id'), computerPick(gameRulesObj), gameRulesObj))
})
})
// this function decides if player wins, loses or ties
function play(userinput, computer, obj) {
let result;
if (computer === userinput) {
result = 'tie';
} else if (obj[computer] === userinput) {
result = 'win';
} else {
result = 'lost';
}
return {
result,
computer
};
}
// this function controls what the computer picks
const computerPick = (obj) => {
return Object.keys(obj)[Math.floor(Math.random() * Object.keys(obj).length)]
}
// this function adds the result to the DOM
const appendToDOMElement = (container, {
result,
computer
}) => {
document.getElementById(container).textContent = `You ${result}! The computer threw ${computer}.`
}
<div id="rock" class="btn">ROCK</div><br />
<div id="paper" class="btn">PAPER</div><br />
<div id="scissor" class="btn">SCISSORS</div><br />
<div>RESULT: <span id="result"></span></div>
The second snippet above gives a bit of a structure to the code:
every function has one and only one purpose (they can be described with one line of comment); this means that it's easier to change parts of your app
a lot of variables are eliminated, so you don't have to keep track of them
one variable added (gameRulesObj), so you can define your base rules in one place; the functions now work with any number and set of rules
I know that this structure may be overkill for a simple game like this, but it's good for practicing :)

try < button onClick=play('rock')> and so on
and you need " " for the line document.getElementById('result').innerHTML = " "

Testing if the user input value is in a given array (JavaScript)

I just created a five rounds rock-paper-scissors game using vanilla JavaScript. The program runs just fine so far except for the fact every time I start the game for the very first time it will take any user input as invalid no matter what and won't count that round.
This is my code:
// Global variables
let playerWins = 0;
let computerWins = 0;
let array = [];
let validInput = 0;
let newRound = "";
// This function generates a computer selection
const computerPlay = () => {
array = ["rock", "paper", "scissors"]
return array[Math.floor(Math.random() * array.length)];
}
// This function stores player selection
const playerSelection = (selection) => {
selection = prompt("Enter: 'Rock', 'Paper' or 'Scissors'").toLowerCase();
validInput = array.indexOf(selection);
console.log(validInput);
// This loop will validate user input is correct
while (validInput === -1) {
alert("Invalid input, try again");
selection = prompt("Enter 'Rock', 'Paper' or 'Scissors'").toLowerCase();
validInput = array.includes(selection);
}
return selection;
}
// This function plays a single round of Rock-Paper-Scissors
const playRound = (playerSelection, computerPlay) => {
// If both players select the same item
if (playerSelection === computerPlay) {
return alert("It's a tie!");
}
// If player selects "Rock"
if (playerSelection === "rock") {
if (computerPlay === "scissors") {
playerWins += 1;
return alert("Rock crushes scissors: YOU WIN!!!");
} else {
computerWins += 1;
return alert("Paper covers rock: YOU LOOSE!!!");
}
}
// If player selects "Paper"
if (playerSelection === "paper") {
if (computerPlay === "rock") {
playerWins += 1;
return alert("Paper covers rock: YOU WIN!!!");
} else {
computerWins += 1;
return alert("Scissors cuts paper: YOU LOOSE!!!");
}
}
// If player selects "Scissors"
if (playerSelection === "scissors") {
if (computerPlay === "rock") {
computerWins += 1;
return alert("Rock crushes scissors: YOU LOOSE!!!");
} else {
playerWins += 1;
return alert("Scissors cuts paper: YOU WIN!!!");
}
}
}
// This function keeps score and reports a winner or loser at the end
const trackWins = (pw, cw) => {
alert("COMPUTER WINS: " + cw + "\nPLAYER WINS: " + pw)
if (pw > cw) {
alert("YOU WIN THIS ROUND, CONGRAX!!!")
} else if (cw > pw) {
alert("YOU LOOSE THIS ROUND, SO BEST LUCK FOR THE NEXT TIME :_(")
} else {
alert("IT'S A TIE")
}
}
// This function creates a 5 round game
const game = () => {
for (let i = 0; i < 5; i++) {
playRound(playerSelection(), computerPlay());
}
trackWins(playerWins, computerWins);
}
do {
game();
newRound = prompt("Do yo want to play another round? Type 'y' to continue or any other key to exit").toLowerCase();
} while (newRound === "y");
alert("It was a good game, bye for now!")
I will appreciate any ideas to fix this problem or improve my script, thank you in advance!

Your posted code can be simplified to better reflect question - say, you have an array, and a variable that stores user input. How do you test if the input value is in the array?
var arr=['Rock','Paper','Scissors'];
var inp='Rock'; //user input
You could use a while loop, but there's a much faster way:
var options={'rock':0,'paper':1,'scissors':2}
var inp='Rock'; //user input
var ninp=inp.toLowerCase().trim(); //normalize input
var pick=(options[ninp]);
if (pick==null) // invalid selection
if (pick==0) //rock
if (pick==1) //paper
if (pick==2) //scissors
The code can be further cleaned up with a switch:
switch (pick){
case 0: ... break; //rock
case 1: ... break; //paper
case 2: ... break; //scissors
default: //invalid
}

JavaScript invalid input condition

I am new to JavaScript.Other day I made a game of Rock Paper Scissor.The game works fine but I wanted to know that can you put up a condition that if the User chooses to input invalid choice an alert box appears and says invalid input something like that!
Here is my code!
var userchoice=prompt("Wanna play Rock, Paper and Scissors?");{
if (userchoice!="paper") {
alert("Invalid ID");
}
else if (userchoice!="scissors") {
alert("Invalid ID");
}
else (userchoice!="rock") {
alert("Invalid ID");
}
}
var computerchoice=Math.random();{
if(computerchoice<0.34){
console.log(computerchoice="paper");
}
else if (computerchoice<=0.67) {
console.log(computerchoice="rock");
}
else{
console.log(computerchoice="scissors");
}
};
var compare=function(choice1,choice2){
if (choice1===choice2){
console.log("The game was a tie!");
}
else if (choice1==="rock") {
if (choice2==="scissors") {
console.log("rock wins!");
}
else{
console.log("paper wins!")
}
}
else if(choice1==="paper"){
if (choice2==="rock") {
console.log("paper wins!");
}
else{
console.log("scissors wins!");
}
}
else if (choice1==="scissors") {
if (choice2==="paper") {
console.log("scissors wins!")
}
else {
console.log("rock wins!");
}
}
};
compare(userchoice,computerchoice);
console.log("User: "+userchoice);
console.log("Computer: "+computerchoice);
//End of Game

Here is some compacted code to figure out if any of the choices are invalid. It alerts if there was an invalid choice, but you should change that to a more appropriate behavior.
var VALID_CHOICES = ['rock', 'paper', 'scissors']
var choice1 = 'rock', choice2 = 'something invalid'
var invalidChoice = false
;[choice1, choice2].forEach(function(choice) {
if (VALID_CHOICES.indexOf(choice) === -1) invalidChoice = true
})
if (invalidChoice) alert('Picked an invalid choice')

You can have a function like this, that will prompt, but also will check if the choice is valid.
function ask(q) {
var choice = prompt(q);
if (choice != 'scissors' && choice != 'rock' && choice != 'paper') {
alert('Invalid input. Only "scissors", "rock" or "paper" are allowed.');
return false;
} else {
return choice;
}
}
console.log('the choice is:',ask("Wanna play Rock, Paper and Scissors?"));
The if checks if the choice is not "scissors" or "rock" or"paper", if is invalid it will alert, and return false.
But if the choice is valid it will return choice.

You can keep compare the way you defined it.
trim() removes white spaces before and after user answer
toLowerCase() converts uppercase letters to lowercase
var promptUser = function(text){
var userAnswer = prompt(text);
var cleanAnswer = userAnswer.trim().toLowerCase();
if(['paper', 'scissors', 'rock'].indexOf(cleanAnswer) === -1) {
alert('Invalid choice: ' + cleanAnswer);
}
return cleanAnswer;
}
var computerPlays = function() {
var computerchoice = Math.random();
if(computerchoice<0.34){
computerchoice="paper";
} else if (computerchoice<=0.67) {
computerchoice="rock";
} else {
computerchoice="scissors";
}
return computerchoice;
};
var userChoice = promptUser("Wanna play Rock, Paper and Scissors?");
var computerChoice = computerPlays();
console.log('user picks:', userChoice);
console.log('computer picks:', computerChoice)
compare(userChoice,computerChoice);

You could use Array.prototype.indexOf(). Try the demo below:
function newGame(msg) {
var allowed = ["rock","paper","scissors"],
user = allowed.indexOf(prompt((msg||'Feeling lucky?') + ' Choose "rock", "paper" or "scissors":').trim().toLowerCase()),
comp = Math.floor(Math.random()*3);
if(user < 0) return newGame("Invalid ID!");
console.log("You chose "+ allowed[user] +". Computer chose "+ allowed[comp] +".");
if(user == comp)
console.log('The game was a tie!');
else if([1,-2].indexOf(comp-user) > -1)
console.log('Computer wins with ' + allowed[comp] + '!');
else
console.log('You win with ' + allowed[user] + '!');
}
<button onclick="newGame()">New game</button>