学生试图找出javaScript代码的石头剪刀布蜥蜴史波克

Student trying to figure out javaScript Code for Rocks Paper Scissors Lizard Spock

本文关键字:代码 石头剪刀布 蜥蜴 史波克 javaScript      更新时间:2023-09-26

嗨stackoverflow社区-我正试图得到其他人对我的编码结构的想法。我是新手,只是想更好地理解javaScript是如何工作的。

对于这段代码,我有一些麻烦,试图在浏览器上指出赢家。我得到我的选择,电脑的选择,但不告诉谁是赢家。任何帮助都非常感谢!

 $(document).ready(function() {
     var choice = ''; //displays what the user picks 
     var computer = ''; //displays what the computer picks
     var computerPick = ''; //
     //user pick
     $('.userCards').click(function() {
         choice = $(this).attr("id");
         computer = computerChoice();
         $('.userSelect').text(choice);
         $('.compSelect').text(computer);
     });
     $("#clear").click(function() {
         window.location.reload();
     }); //button refreshes screen
 });
 var compare = '';
 var roundScore = '';
 var whoWins = '';
 var compare1 = '';
 var choice1 = '';
 var choice2 = '';
 function computerChoice() {
     computerPick = Math.random();
     if (computerPick < 0.2) {
         computerPick = "rock";
     } else if (computerPick <= 0.4) {
         computerPick = "paper";
     } else if (computerPick <= 0.6) {
         computerPick = "scissors";
     } else if (computerPick <= 0.8) {
         computerPick = "lizard";
     } else {
         computerPick = "spock";
     }
     return computerPick;
     console.log(computerPick);
 } // end of choice function
 function compareRound() {
     if (choice1 === choice2) {
         return "The result is a tie!";
     }
     if (choice1 === "rock") {
         if (choice2 === "scissors") {
             return "rock wins";
         } else {
             return "paper wins";
         }
     } else if (choice1 === "paper") {
         if (choice2 === "rock") {
             return "paper wins";
         } else {
             return "scissors wins";
         }
     } else if (choice1 === "scissors") {
         if (choice2 === "rock") {
             return "rock wins";
         } else {
             return "scissors win";
         }
     } else if (choice1 === "lizard") {
         if (choice2 === "paper") {
             return "lizard wins";
         } else {
             return "rock win";
         }
     } else if (choice1 === "spock") {
         if (choice2 === "scissors") {
             return "spock wins";
         } else {
             return "lizard win";
         }
     }
     document.getElementById(".roundScore").innerHTML = compareRound;
 }

+++++++++++++++ 下面的HTML代码 ++++++++++

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rock - Paper - Scissors - Lizard - Spock</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/scripts-3.10.0.js"></script>
    <script src="js/script.js"></script>
    <noscript>Please turn on JavaScript to utilize this site</noscript>
</head>

<body>
    <div class="container">
        <header>
            <h1>* Welcome to RPSLS *</h1>
            <h3>- rock | paper | scissors | lizard | spock - </h3>
        </header>
        <hr>
        <div id = "cardSection" class = "userbox">
    <nav>
        <input id="rock" class="userCards" type="image" src="img/WEB/rockUser.jpg" alt="Submit">
        <input id="paper" class="userCards" type="image" src="img/WEB/paperUser.jpg" alt="Submit">
        <input id="scissors" class="userCards" type="image" src="img/WEB/scissorsUser.jpg" alt="Submit">
        <input id="lizard" class="userCards" type="image" src="img/WEB/lizardUser.jpg" alt="Submit">
        <input id="spock" class="userCards" type="image" src="img/WEB/spockUser.jpg" alt="Submit">        
    </nav>&nbsp; &nbsp;
        </div> 
        <div id="score">
            <p class="userS">
            <label>User Choice: <span class="userSelect"></span></label>
            <span id="userScore"></span>
            </p>
            <br>
            <p class="compS">
            <label>Computer Choice: <span class="compSelect"></span></label>
            <span id="computerScore"></span>
            </p>
            <br>
            <hr>
            <br>
            <p class="gameResult">
            <label>This Rounds Winner: <span class="roundScore"></span></label>
            <span id="gameResult"></span>
            </p>
            <br>
            <p class="totalResult">
            <label>The Game Winner:<span class="whoWins"></span></label>]
            </p>
        </div>
        <button id="clear">Start Over</button>
    </div>
</body>

只是因为(不是真正的答案)

var rules =
    { rock:    { scissors: 'blunts',  lizard: 'crushes'     }
    , paper:   { rock: 'covers',      spock: 'disproves'    }
    , scissors:{ paper: 'cuts',       lizard: 'decapitates' }
    , lizard:  { spock: 'poisons',    paper: 'eats'         }
    , spock:   { scissors: 'smashes', rock: 'vaporizes'     }
    };
var actors = Object.keys(rules);
var iterations = 3;
function test() {
    for(var i = 0; i < iterations; i++) {
        var a = b = actors[Math.floor(Math.random() * actors.length)];
        while (b == a) b = actors[Math.floor(Math.random() * actors.length)];
        var winner = rules[a][b]? a : b;
        var loser = winner == a? b : a;
        console.log(winner+" "+rules[winner][loser]+" "+loser);
    }
}
document.addEventListener("DOMContentLoaded", test, false);

我在你的代码中发现了一些错误:

  1. 您正在使用document.getElementById,然后选择看起来可能像类的东西。你已经在使用jQuery了,所以你不需要使用普通的JS
  2. 我没有看到compareRound被调用的地方,点击按钮。我在下面添加了这样一个函数。

下面是经过上述修改的代码的工作模型

$(document).ready(function() {
  var choice = ''; //displays what the user picks 
  var computer = ''; //displays what the computer picks
  var computerPick = ''; //
  //user pick
  $('.userCards').click(function() {
    choice = $(this).attr("id");
    computer = computerChoice();
    $('.userSelect').text(choice);
    $('.compSelect').text(computer);
     $(".roundScore").text(compareRound(choice,computer ));
  });
});
var compare = '';
var roundScore = '';
var whoWins = '';
var compare1 = '';
var choice1 = ''
var choice2 = '';
function computerChoice() {
    computerPick = Math.random();
    if (computerPick < 0.2) {
      computerPick = "rock";
    } else if (computerPick <= 0.4) {
      computerPick = "paper";
    } else if (computerPick <= 0.6) {
      computerPick = "scissors";
    } else if (computerPick <= 0.8) {
      computerPick = "lizard";
    } else {
      computerPick = "spock";
    }
    return computerPick;
    console.log(computerPick);
  } // end of choice function
function compareRound(choice1, choice2) {
  if (choice1 === choice2) {
    return "The result is a tie!";
  }
  if (choice1 === "rock") {
    if (choice2 === "scissors") {
      return "rock wins";
    } else {
      return "paper wins";
    }
  } else if (choice1 === "paper") {
    if (choice2 === "rock") {
      return "paper wins";
    } else {
      return "scissors wins";
    }
  } else if (choice1 === "scissors") {
    if (choice2 === "rock") {
      return "rock wins";
    } else {
      return "scissors win";
    }
  } else if (choice1 === "lizard") {
    if (choice2 === "paper") {
      return "lizard wins";
    } else {
      return "rock win";
    }
  } else if (choice1 === "spock") {
    if (choice2 === "scissors") {
      return "spock wins";
    } else {
      return "lizard win";
    }
  }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="userCards"  id="rock">Rock</button>
<button class="userCards"id="paper">Paper</button>
<button class="userCards" id="lizard">Lizard</button>
<button class="userCards" id="spock">Spock</button>
<span class="userSelect"></span>
<span class="compSelect"></span>
<span class="roundScore"></span>

我可以读你的代码,你只有一个错误…在这行document.getElementById(".roundScore").innerHTML = compareRound; },你说取一个I'd元素…如果它是一个I,你必须改变(".roundScore")为("#roundScore")…如果您想要获取的元素是可以更改document.getElementById(".roundScore")的类名的引用document.getElementByClassName (roundScore)

. .我希望能帮到你