How to store and update score in the game?-CodePudding

How can I create a function and make it work so that it stores the win case every time user or computer wins?

How can I create a function and make it work so that it stores the win case every time user or computer wins?How can I create a function and make it work so that it stores the win case every time user or computer wins?

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Rock Paper Scissors Tutorial</title>
</head>
<body>
    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <br>
    <br>
    <input type="button" value="Reload Page" onClick="document.location.reload(true)">
    <br>
    <br>
    <div >
        <div>
          You
          <span >0</span>
        </div>
        <div data-final-column>
          Computer
          <span >0</span>
   </div>
    <script src="main.js"></script>
</body>
</html>

--------------------
js

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const computerScoreSpan = document.querySelector('[data-computer-score]')
const yourScoreSpan = document.querySelector('[data-your-score]')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))
// ------
// function incrementScore(scoreSpan) {
//     if (yourWinner) incrementScore(yourScoreSpan)
//     if (computerWinner) incrementScore(computerScoreSpan)
//     scoreSpan.innerText = parseInt(scoreSpan.innerText)   1
//   }

// --------
function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3)   1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
  resultDisplay.innerHTML = result
}

CodePudding user response：

Well for starters your code is really inefficient and messy, and I wouldn't definitely recommend re-starting. But if you want to keep the code you already have, to make the score counter you don't need a function, just add to the score based of the result in the result function.

Here's the updated HTML code

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Rock Paper Scissors Tutorial</title>
</head>
<body>
    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <br>
    <br>
    <input type="button" value="Reload Page" onClick="document.location.reload(true)">
    <br>
    <br>
        <div id="ys">
          You: 0
        </div>
        <div id="cs">
          Computer: 0
                </div>
    <script src="main.js"></script>
</body>
</html>

and your javascript code

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const cs_t = document.getElementById("cs");
const ps_t = document.getElementById("ys");
let userChoice
let computerChoice
let result

var cs = 0;
var ps = 0;

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))
// ------


// --------
function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3)   1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
    if(result == 'you win!'){
        ps  = 1
    }
    else if(result == 'you lose!'){
        console.log("ok2")
        cs  = 1
    }
    else{
        cs  = 1
        ps  = 1
    }
    
    cs_t.innerHTML = ("Computer: "   cs);
    ps_t.innerHTML = ("You: "   ps);
  resultDisplay.innerHTML = result
}

also you do not need to put span tags in everything, it's a really bad way of doing it.

CodePudding user response：

from what I understand you want to save the winner of the game somewhere so you can check it later right?

Well, maybe you can use localStorage;

With that, all you gotta do is take the result and store them on localStorage, like this:

localStorage.setItem('result', result);

and for get the result from localStorage, you can save it on a variable:

const checkResult = localStorage.getItem('result') || null

in that way if do not have any results on localStorage, checkResult will return null;