如何在不同的场合在一个函数中传递两个参数？

axkjgtzd  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(287)

简介：
我想做一个石头剪刀的游戏。我需要在一个函数中保存2个播放器输入（优先）。所以当playerone点击“rock”和playertwo点击“paper”时，它也会保存下来。不同的变量，相同的函数。
“要求：”
无法使用库，必须是100%vanilla js。
我目前拥有的：

  1. function getPlayerOption(playerOne, playerTwo) {
  2.   console.log(playerOne);
  3.   console.log(playerTwo);
  4. }
  1. h1 {
  2.   text-align: center;
  3. }
  5. # player_turn {
  7.   color: rgb(255, 0, 0);
  8. }
  10. .container {
  11.   display: flex;
  12.   width: 100%;
  13.   flex-direction: row;
  14.   justify-content: space-around;
  15. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Rock, paper, scissors!</title>
  7.   <link rel="stylesheet" href="styles.css">
  8.   <script src="script.js"></script>
  9. </head>
  11. <body>
  12.   <h1>Player <span id="player_turn">1</span> pick an option!</h1>
  13.   <div class="container">
  14.     <div class="box">
  15.       <p onclick="getPlayerOption('rock')" id="rock">
  16.         Rock
  17.       </p>
  18.     </div>
  19.     <div class="box">
  20.       <p onclick="getPlayerOption('paper')" id="paper">
  21.         Paper
  22.       </p>
  23.     </div>
  24.     <div class="box">
  25.       <p onclick="getPlayerOption('scissors')" id="scissors">
  26.         Scissors
  27.       </p>
  28.     </div>
  29.   </div>
  30. </body>
  32. </html>

我想要的输出：第一次单击是“rock”，第二次单击是控制台中的一个“paper”输出将是：
安慰
->“岩石”
->“纸”
谢谢你的时间和努力。

JavaScriptHtml

2条答案

按热度按时间
wnvonmuf

wnvonmuf1#

您可以为游戏创建一个类，并将输入存储在成员变量中。

  1. class Game {
  2.   playerOne = null;
  3.   playerTwo = null;
  4.   getPlayerOption(input) {
  5.     if (this.playerOne) {
  6.       this.playerTwo = input;
  7.       this.print();
  8.       this.reset();
  9.     } else {
  10.       this.playerOne = input;
  11.     }
  12.   }
  13.   print() {
  14.     console.log(this.playerOne);
  15.     console.log(this.playerTwo);
  16.   }
  17.   reset() {
  18.     this.playerOne = null;
  19.     this.playerTwo = null;
  20.   }
  21. }
  23. const game = new Game();
  1. h1 {
  2.   text-align: center;
  3. }
  5. # player_turn {
  7.   color: rgb(255, 0, 0);
  8. }
  10. .container {
  11.   display: flex;
  12.   width: 100%;
  13.   flex-direction: row;
  14.   justify-content: space-around;
  15. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Rock, paper, scissors!</title>
  7.   <link rel="stylesheet" href="styles.css">
  8.   <script src="script.js"></script>
  9. </head>
  11. <body>
  12.   <h1>Player <span id="player_turn">1</span> pick an option!</h1>
  13.   <div class="container">
  14.     <div class="box">
  15.       <p onclick="game.getPlayerOption('rock')" id="rock">
  16.         Rock
  17.       </p>
  18.     </div>
  19.     <div class="box">
  20.       <p onclick="game.getPlayerOption('paper')" id="paper">
  21.         Paper
  22.       </p>
  23.     </div>
  24.     <div class="box">
  25.       <p onclick="game.getPlayerOption('scissors')" id="scissors">
  26.         Scissors
  27.       </p>
  28.     </div>
  29.   </div>
  30. </body>
  32. </html>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
kd3sttzy

kd3sttzy2#

将值存储到全局范围，有一个值将保留当前玩家的值，任何调用 getPlayerOption 将自动切换到下一个玩家。

  1. // Here are all values that are cast so far. Not in function, because it would be overwritten on each function call
  2. var values = {
  3.   player_1: [],
  4.   player_2: []
  5. };
  7. // Current playing player
  8. var currentPlayer = '1';
  10. function getPlayerOption(value) {
  11.   // Get type of player dynamically
  12.   playerType = 'player_' + currentPlayer;
  13.   console.log('Player ' + playerType + ' casts ' + value);
  15.   // Save value of current player
  16.   values[playerType].push(value);
  18.   // Switch to next player
  19.   currentPlayer = currentPlayer == '1' ? '2' : '1';
  21.   console.log('Moves so far', values);
  22. }
  1. h1 {
  2.   text-align: center;
  3. }
  5. # player_turn {
  7.   color: rgb(255, 0, 0);
  8. }
  10. .container {
  11.   display: flex;
  12.   width: 100%;
  13.   flex-direction: row;
  14.   justify-content: space-around;
  15. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Rock, paper, scissors!</title>
  7.   <link rel="stylesheet" href="styles.css">
  8.   <script src="script.js"></script>
  9. </head>
  11. <body>
  12.   <h1>Player <span id="player_turn">1</span> pick an option!</h1>
  13.   <div class="container">
  14.     <div class="box">
  15.       <p onclick="getPlayerOption('rock')" id="rock">
  16.         Rock
  17.       </p>
  18.     </div>
  19.     <div class="box">
  20.       <p onclick="getPlayerOption('paper')" id="paper">
  21.         Paper
  22.       </p>
  23.     </div>
  24.     <div class="box">
  25.       <p onclick="getPlayerOption('scissors')" id="scissors">
  26.         Scissors
  27.       </p>
  28.     </div>
  29.   </div>
  30. </body>
  32. </html>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com