Question

所以，我试图用一些javascript和jQuery代码创建一个石头剪刀游戏。

我试图遵循游戏应如何发挥作用的规则：

创建一个循环，为用户提供针对计算机选择的3个选择。每次，您都会提示用户选择“摇滚”，“纸张”或“剪刀”（不是通过输入单词，而是通过＆＃34;选择＆＃34;图像）。
< / LI>
然后，计算机将随机选择摇滚，纸张或剪刀。根据您的选择突出显示岩石，纸张或剪刀的图片，并显示单独的图像，显示计算机选择的岩石，纸张或剪刀。

在3轮结束时，我想显示一个记分牌，显示用户有多少关系，胜利和失败。

到目前为止，这是我的代码。到目前为止，我已经尝试让用户点击摇滚纸或剪刀，然后将其与计算机中随机生成的结果进行比较。我现在的问题是我的屏幕上没有弹出警报。这告诉我用于比较每个选项的if语句不能正常工作。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type = "text/javascript">
$(function() {

for (i=0; i < 3; i++)
{


    var computerChoice = null;
    var userChoice = null;



    $('#rock').click(function(){
        userChoice = "rock";
    });
    $('#paper').click(function(){
        userChoice = "paper";
    });
    $('#scissors').click(function(){
        userChoice = "scissors";
    });


    function newComputerChoice ()
    {
        computerChoice = Math.floor(Math.random() * 3) + 1;
        //take the random number from computerChoice above and assign it rock paper or scissors.
        if (computerChoice == 1)
            {
                computerChoice = "rock";
            }
        else if (computerChoice == 2)
            {
                computerChoice = "paper";
            }
        else 
            {
                computerChoice = "scissors";
            }

    }

    if (userChoice == computerChoice){
        alert ("Tie!");
    } else if (userChoice == "rock" && computerChoice == "scissors"){
        alert ("You win!");
    } else if (userChoice == "paper" && computerChoice == "rock"){
        alert ("You win!");
    } else if (userChoice == "scissors" && computerChoice == "paper"){
        alert ("You win!");
    } else if (computerChoice == "rock" && userChoice == "scissors"){
        alert ("Sorry, you lose.")
    } else if (computerChoice == "paper" && userChoice == "rock"){
        alert ("Sorry, you lose.")
    } else if (computerChoice == "scissors" && userChoice == "paper"){
        alert ("Sorry, you lose.")
    }


}  

}
</script>

</head>
<body>
<h1>Make your choice:</h1>

<img src="rock.jpg" name="rock" id = "rock"/>
<img src="paper.jpg" name="paper" id = "paper"/>
<img src="scissors.jpg" name="scissors" id = "scissors"/>

<h1>Computer Chose:</h1>



</body>
</html>

最后，我需要使用相同的图像显示计算机选择，但我不确定如何一次只显示一个，具体取决于随机选择的内容。

Answer 1

这是我的解决方案，它应该满足您的需求。

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <h1>Make your choice:</h1>

    <img src="rock.jpg" name="rock" id = "rock"/>
    <img src="paper.jpg" name="paper" id = "paper"/>
    <img src="scissors.jpg" name="scissors" id = "scissors"/>

    <h1>Computer Chose:</h1>
    <script language=javascript>
        var userChoice = null;
        var computerChoice = null;
        $(document).ready(
            function ()
            {
                 $('#rock').click(function(){
                    userChoice = "rock";
                    newComputerChoice();
                    computResult();
                });
                $('#paper').click(function(){
                    userChoice = "paper";
                    newComputerChoice ();
                    computResult();
                });
                $('#scissors').click(function(){
                    userChoice = "scissors";
                    newComputerChoice ();
                    computResult();
                });
            }
        );

        function newComputerChoice ()
        {
            computerChoice = Math.floor(Math.random() * 3) + 1;
            //take the random number from computerChoice above and assign it rock paper or scissors.
            if (computerChoice == 1)
                {
                    computerChoice = "rock";
                }
            else if (computerChoice == 2)
                {
                    computerChoice = "paper";
                }
            else 
                {
                    computerChoice = "scissors";
                }

        }
        function computResult()
        {
            var result; 
            if (userChoice == computerChoice){
                result="Tie!";
            } else if (userChoice == "rock" && computerChoice == "scissors"){
                result="You win!";
            } else if (userChoice == "paper" && computerChoice == "rock"){
                result="You win!";
            } else if (userChoice == "scissors" && computerChoice == "paper"){
                result="You win!";
            } else if (computerChoice == "rock" && userChoice == "scissors"){
                result="Sorry, you lose.";
            } else if (computerChoice == "paper" && userChoice == "rock"){
                result="Sorry, you lose.";
            } else if (computerChoice == "scissors" && userChoice == "paper"){
                result="Sorry, you lose.";
            }
            var table=document.getElementById("result");
            var row=table.insertRow(table.rows.length);
            var cell=row.insertCell(row.cells.length);
            var img=document.createElement("img");
            img.src=document.getElementById(computerChoice).src;
            $(cell).append(img);
            cell=row.insertCell(row.cells.length);
            img=document.createElement("img");
            img.src=document.getElementById(userChoice).src;
            $(cell).append(img);
            cell=row.insertCell(row.cells.length);
            cell.innerHTML=result;
        }



    </script>
    <table id="result">
        <tr>
            <td>Computer Choice</td>
            <td>Your Choice</td>
            <td>Result</td>
        </tr>   
    </table>
    </body>
    </html>

Answer 2

要仅显示计算机选项，只需删除以下语句。

        cell=row.insertCell(row.cells.length);
        img=document.createElement("img");
        img.src=document.getElementById(userChoice).src;
        $(cell).append(img);
        cell=row.insertCell(row.cells.length);
        cell.innerHTML=result;

带图片的JavaScript / jQuery摇滚，纸张或剪刀游戏

2 个答案: