学生试图找出岩石纸剪刀蜥蜴Spock的javaScript代码

时间：2016-11-08 04:18:07

标签： javascript loops

您好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;
 }

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

<!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>

3 个答案:

答案 0 :(得分：1)

仅仅因为（不是真正的答案）

＆＃13;
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我的代码中发现了一些错误：

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

    3. 以下是具有上述更正的代码的工作模型

    ＆＃13;
    ＆＃13; 
    $(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";
    }
  }

  
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

我可以阅读你的代码而且你只有一个错误..在这一行document.getElementById(".roundScore").innerHTML = compareRound; }你说的是把我的元素拿走了......如果它是，那我就是你了必须更改（＆＃34; .roundScore＆＃34;）for（＆＃34;＃roundScore＆＃34;）..如果您想要的元素是引用类名，您可以更改document.getElementById(".roundScore") document.getElementByClassName（＆＃34; roundScore＆＃34）

..我希望能帮助你

相关问题
最新问题