时间戳

首页 > 解决方案 > 用javascript制作rps游戏

javascript - 用javascript制作rps游戏

问题描述

我正在制作一个石头剪刀布游戏，但我似乎无法让任何代码完全正常工作，我得到了一些工作，但我卡在了所有其他部分。任何人都可以帮忙吗？我需要让开始游戏按钮在单击后淡出并显示选项，以及 ai 的图片在循环中显示包括 rock/paper/scissors.png 文件。我已经尝试了很长时间，但我似乎无法让它工作。

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>

标签： javascripthtml

解决方案

在const selection = SELECTIONS.find(selection => Selection.name === selectionName)你已经Selection大写。应该是selection.name。

未使用该startGame功能。您需要添加 document.getElementById('new-game-btn').addEventListener('click', startGame)

How to make fadeOut effect with pure JavaScript向您展示了如何使某些东西淡出。我在下面的代码片段中包含了一个如何完成此操作的示例。您慢慢更改不透明度，而不是立即将其更改为不显示。或者，您也可以使用 CSS 过渡获得淡入淡出效果。

为了让你的三个图像之间的图像循环，看看setInterval函数，它将每 x 毫秒执行一次。

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>

推荐阅读