编写石头，剪刀，剪刀布游戏

Question

I am making a little rock paper scissors game, and I thought I planned everything out perfectly, but for some reason nothing happens when you try to play. 我正在做一个石头剪刀布游戏，我认为我的计划很完美，但是由于某些原因，当您尝试玩游戏时什么也没发生。

Basically, there are three images, a rock, a piece of paper, and some scissors, and you click one. 基本上，有三个图像，一块岩石，一张纸和一些剪刀，然后单击一个。 Using the code I typed, the computer generates a random value and that value is converted to either rock, paper, or scissors. 使用我输入的代码，计算机将生成一个随机值，并将该值转换为石头，纸张或剪刀。 When the player clicks on an image, it sets the players choice to rock, paper, or scissors as well. 当玩家单击图像时，也会将玩家的选择设置为石头，纸或剪刀。 Then javascript runs some if else statements to compare the two choices, and decides the winner. 然后，javascript将运行一些if else语句来比较这两个选择，并确定获胜者。

Code: 码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rock Paper Scissors</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
    font-family: Roboto, Arial; 
}

.choose img {
    width: 150px;
    margin: 20px;   
}
</style>
</head>

<body>

<div class="choose" align="center">
    <h2 id="question">Rock, paper, or scissors?"</h2>
    <img src="http://img2.wikia.nocookie.net/__cb20141120133208/epicrapbattlesofhistory/images/4/4b/A_Rock!.gif" id="rock"><img src="http://www.clipartpal.com/_thumbs/pd/education/paper_sheet.png" id="paper"><img src="http://www2.fiskars.com/var/fiskars_amer/storage/images/frontpage2/sewing-quilting/products/scissors-and-sharpeners/the-original-orange-handled-scissors-8/16933-6-eng-US/The-Original-Orange-Handled-Scissors-8_product_main.png" id="scissors">
</div>

<script>

    var computerChoice = math.random();
    var userChoice = null;

    //Change randomly generated number to rock, paper, or scissors
    if (computerChoice < .33) {
        computerChoice == "rock";
    } else if (computerChoice < .66) {
        computerChoice == "paper";
    } else {
        computerChoice == "scissors";   
    };

    //Set userChoice variable to rock, paper, or scissors
    function convertUserChoice() {
        $('#rock').click(function() {
            userChoice == "rock";
        });
        $('#paper').click(function() {
            userChoice == "paper";
        });
        $('#scissors').click(function() {
            userChoice == "scissors";
        });
    };

    //Compare computerChoice with userChoice, decide who wins
    if (userChoice == computerChoice) {
        alert ("Tie!");
    } else if (userChoice == "rock") {
        if (computerChoice == "scissors") {
            alert ("You win!");
        } else {
            alert ("You lose.");
        };
    } else if (userChoice == "paper") {
        if (computerChoice == "rock") {
            alert ("You win!");
        } else {
            alert ("You lose.");
        };
    } else if (userChoice == "scissors") {
        if (computerChoice == "paper") {
            alert ("You win!");
        } else {
            alert ("You lose");
        };
    };

</script>
</body>
</html>

Here is a link to the actual html page: https://747d6108ac1130fc3601936220515b351efca1a4.googledrive.com/host/0B4rWYiw5-JZtfjJpT2M0WUNRRGtWQ250RElDc2QxRUc2aEdzajFERWkzVUVTd0pkNlY3LXc/RPS.html 以下是指向实际html页面的链接： https : //747d6108ac1130fc3601936220515b351efca1a4.googledrive.com/host/0B4rWYiw5-JZtfjJpT2M0WUNRRGtWQ250RElDc2QxRUc2aEdzajFERWkzVUVTd0pkNRP

I think the problem is that the js code labeled "Compare computerChoice with userChoice, decide who wins" isn't running when the user clicks the image. 我认为问题在于，当用户单击图像时，标有“比较computerChoice与userChoice，决定谁获胜”的js代码没有运行。 If so, how could I make it do so? 如果是这样，我怎么做呢？

Answer 1

There are some problems in your code: 您的代码中存在一些问题：

Your click handlers are not attached to the DOM elements because you haven't called convertUserChoice() . 您的点击处理程序未附加到DOM元素上，因为您尚未调用convertUserChoice() 。 Just remove the function and it will be working. 只需删除该功能，它将起作用。
Use = instead of == . 使用=代替== 。 Asignment is needed and not comparison. 需要分配，而不是比较。
You need to create functions for computerChoice and checkChoise so you can call them when needed. 您需要为computerChoice和checkChoise创建函数，以便可以在需要时调用它们。
Of course, as mentioned in the comments Math upercase is required. 当然，如注释中所述， Math大写是必需的。

Please find your code in this jsFiddle and below. 请在下面的jsFiddle中找到您的代码。

Update 更新

You could improve your winning check by using a object for the check. 您可以通过使用支票对象来改善中奖支票。 The object stores each winning situation for the user. 对象为用户存储每个获胜情况。 eg if the user chooses rock then winningCombinations['rock'] will return the value scissors and that's a winning situation if computerChoice is scissors the comparison will return true and the string win will be the result. 例如，如果用户选择了rock，那么winningCombinations['rock']将返回值scissors ，如果computerChoice是剪刀，则这是一种获胜情况，比较将返回true，并且字符串win将成为结果。 (See updated code below.) （请参见下面的更新代码。）

That's easier than your if/else conditions. 这比您的if / else条件容易。

  var computerChoice = null, userChoice = null; var newComputerChoice = function () { computerChoice = Math.random(); //Change randomly generated number to rock, paper, or scissors if (computerChoice < .33) { computerChoice = "rock"; } else if (computerChoice < .66) { computerChoice = "paper"; } else { computerChoice = "scissors"; }; console.log('pc choice: ', computerChoice); }; //Set userChoice variable to rock, paper, or scissors //function convertUserChoice() { $('.choose>img').click(function () { var id = $(this).attr('id'); userChoice = id.substring(0, id.length); //#rock --> remove # console.log('user choice: ', userChoice); newComputerChoice(); checkChoice(); }); var checkChoice = function () { var message = function(msgType) { var msgTypes = ['win', 'lose'], index = msgTypes.indexOf(msgType), format = ( index != -1 ) ? 'You %1$s!': 'Tie!'; alert(sprintf(format, msgTypes[index])); }; var winningCombinations = { // userchoice: computerchoice rock: 'scissors', // you win paper: 'rock', // you win scissors: 'paper' // you win }; var result; //Compare computerChoice with userChoice, decide who wins if (userChoice == computerChoice) { message('tie'); } else { result = ( winningCombinations[userChoice] == computerChoice ) ? 'win': 'lose'; message(result); } };

 body { font-family: Roboto, Arial; } .choose img { width: 150px; margin: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="choose" align="center"> <h2 id="question">Rock, paper, or scissors?"</h2> <img src="http://img2.wikia.nocookie.net/__cb20141120133208/epicrapbattlesofhistory/images/4/4b/A_Rock!.gif" id="rock"> <img src="http://www.clipartpal.com/_thumbs/pd/education/paper_sheet.png" id="paper"> <img src="http://www2.fiskars.com/var/fiskars_amer/storage/images/frontpage2/sewing-quilting/products/scissors-and-sharpeners/the-original-orange-handled-scissors-8/16933-6-eng-US/The-Original-Orange-Handled-Scissors-8_product_main.png" id="scissors"> </div>

编写石头，剪刀，剪刀布游戏

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-13 21:54:40

编写石头，剪刀，剪刀布游戏

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-13 21:54:40

解决方案1
1 已采纳 2015-03-13 21:54:40