Making a rps game in javascript

Question

I'm making a rock paper scissors game but I cant seem to get any of the code working fully, I get some things working and I get stuck on all the other parts. Can anyone help? I need to get the start game button to fade after clicking and the options to appear, as well as a the ai's pictures to be on a loop showing the including rock/paper/scissors.png files. I have been trying for some significant amount of time and I cant seem to get it working.

const selectionButtons = document.querySelectorAll('[data-selection]')
const SELECTIONS = [{
    name: 'rock',
    beats: 'scissors'
  },
  {
    name: 'paper',
    beats: 'rock',
  },
  {
    name: 'scissors',
    beats: 'paper',
  }
]


function startGame() {
  var x = document.getElementById('new-game-btn')
  if (x.style.display === 'none') {
    x.style.display = 'block'
  } else {
    x.style.display = 'none'
  }
}


selectionButtons.forEach(selectionButton => {
  selectionButton.addEventListener('click', e => {
    const selectionName = selectionButton.dataset.selection
    const selection = SELECTIONS.find(selection => Selection.name === selectionName)
    makeSelection(selection)
  })
})

function makeSelection(selection) {
  const computerSelection = randomselection()
  const yourWinner = isWinner(selection, computerSelection)
  const computerWinner = isWinner(computerSelection, selection)
  console.log(computerSelection)
}

function isWinner(selection, opponentSelection) {
  return selection.beats === opponentSelection.name
}

function randomselection() {
  const randomIndex = Math.floor(Math.random() * SELECTIONS.length)
  return SELECTIONS[randomIndex]
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="hero is-primary">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          Rock Paper Scissors
        </h1>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="play-zone-container">
        <div id="play-zone-user" class="play-zone">
          <img src="images/paper.png">
          <h2 class="play-zone-title">Friendly user (<span id="play-zone-user-counter">0</span>)
          </h2>
        </div>
        <div id="play-zone-ai" class="play-zone">
          <img src="images/rock.png">
          <h2 class="play-zone-title">Evil AI (<span id="play-zone-ai-counter">0</span>)</h2>
        </div>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="selection">
        <button data-selection="rock" class="selection">Rock</button>
        <button data-selection="paper" class="selection">Paper</button>
        <button data-selection="scissors" class="selection">Scissors</button>
      </div>

      <div class="new-game-container">
        <button id="new-game-btn" class="button is-primary">Start new game</button>
      </div>
      <div class="game-message-container hide">
        <p id="user-won-message" class="game-message hide">You won, well done.</p>
        <p id="ai-won-message" class="game-message hide">Our genius AI won, it will probably rule the world.
        </p>
        <p id="draw-message" class="game-message">It's a draw, try again.</p>
      </div>
    </div>
  </section>

  <script src="script.js"></script>
</body>

</html>

Hi. Welcome to Stack Overflow! Could you please edit your post to add some more information about what you've tried already? Check [this page about asking good questions](https://stackoverflow.com/help/how-to-ask) out. — Pedro Fracassi, Jun 27 '20 at 14:38

hostingutilities.com · Answer 1 · 2020-06-27T15:04:43.380

In const selection = SELECTIONS.find(selection => Selection.name === selectionName) You have Selection capitalized. Should be selection.name.

The startGame function isn't being used. You need to add document.getElementById('new-game-btn').addEventListener('click', startGame)

How to make fadeOut effect with pure JavaScript shows you how to make something fade out. I've included an example of how this could be done in the code snippet below. You slowly change the opacity instead of immediately changing it to display none. Alternatively you can also get a fade effect with CSS transitions.

To make the image loop between your three images, take a look at the setInterval function which will do something every x milliseconds.

const selectionButtons = document.querySelectorAll('[data-selection]')
const SELECTIONS = [{
    name: 'rock',
    beats: 'scissors'
  },
  {
    name: 'paper',
    beats: 'rock',
  },
  {
    name: 'scissors',
    beats: 'paper',
  }
]


function startGame() {
  var x = document.getElementById('new-game-btn')
  if (x.style.display === 'none') {
    x.style.display = 'block'
  } else {
    x.style.display = 'none'
  }
}

function fade(id){
var fadeEffect = setInterval(function () {
    var s = document.getElementById(id).style;
    if (!s.opacity) {
        s.opacity = 1;
    }
    if (s.opacity > 0) {
        s.opacity -= 0.1;
    } else {
        clearInterval(fadeEffect);
    }
}, 200);
};
document.getElementById('new-game-btn').addEventListener('click', ()=>fade('new-game-btn'))

selectionButtons.forEach(selectionButton => {
  selectionButton.addEventListener('click', e => {
    const selectionName = selectionButton.dataset.selection
    const selection = SELECTIONS.find(selection => selection.name === selectionName)
    makeSelection(selection)
  })
})

function makeSelection(selection) {
  const computerSelection = randomselection()
  const yourWinner = isWinner(selection, computerSelection)
  const computerWinner = isWinner(computerSelection, selection)
  console.log(computerSelection)
}

function isWinner(selection, opponentSelection) {
  return selection.beats === opponentSelection.name
}

function randomselection() {
  const randomIndex = Math.floor(Math.random() * SELECTIONS.length)
  return SELECTIONS[randomIndex]
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="hero is-primary">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          Rock Paper Scissors
        </h1>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="play-zone-container">
        <div id="play-zone-user" class="play-zone">
          <img src="images/paper.png">
          <h2 class="play-zone-title">Friendly user (<span id="play-zone-user-counter">0</span>)
          </h2>
        </div>
        <div id="play-zone-ai" class="play-zone">
          <img src="images/rock.png">
          <h2 class="play-zone-title">Evil AI (<span id="play-zone-ai-counter">0</span>)</h2>
        </div>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="selection">
        <button data-selection="rock" class="selection">Rock</button>
        <button data-selection="paper" class="selection">Paper</button>
        <button data-selection="scissors" class="selection">Scissors</button>
      </div>

      <div class="new-game-container">
        <button id="new-game-btn" class="button is-primary">Start new game</button>
      </div>
      <div class="game-message-container hide">
        <p id="user-won-message" class="game-message hide">You won, well done.</p>
        <p id="ai-won-message" class="game-message hide">Our genius AI won, it will probably rule the world.
        </p>
        <p id="draw-message" class="game-message">It's a draw, try again.</p>
      </div>
    </div>
  </section>

  <script src="script.js"></script>
</body>

</html>

Making a rps game in javascript

1 Answers1