Jadi, saya mencoba membuat game gunting kertas batu menggunakan beberapa kode javascript dan jQuery.

Saya mencoba mengikuti beberapa aturan tentang bagaimana permainan harus dimainkan:

  1. Buat loop yang memberi pengguna 3 pilihan terhadap pilihan komputer. Setiap kali, Anda akan meminta pengguna untuk memilih "batu", "kertas", atau "gunting" (bukan dengan mengetikkan kata, tetapi dengan "memilih" gambar).

  2. Komputer kemudian akan secara acak memilih batu, kertas, atau gunting. Sorot gambar batu, kertas, atau gunting untuk pilihan Anda, serta tampilkan gambar terpisah yang menunjukkan pilihan batu, kertas, atau gunting komputer.

Di akhir 3 putaran saya ingin menampilkan papan skor berapa banyak seri, menang, dan kalah untuk pengguna.

Inilah kode saya sejauh ini. Sejauh ini saya telah mencoba membuat pengguna mengklik kertas batu, atau gunting dan kemudian membandingkannya dengan hasil yang dihasilkan secara acak dari komputer. Masalah saya sekarang adalah tidak ada peringatan yang muncul di layar saya. Ini memberi tahu saya bahwa pernyataan if saya untuk membandingkan setiap pilihan tidak berfungsi dengan baik.

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

Terakhir, saya perlu menampilkan pilihan komputer dengan gambar yang sama, tetapi saya tidak yakin bagaimana hanya menampilkan satu per satu tergantung pada apa yang dipilih secara acak.

0
CChristiansen 15 Agustus 2017, 04:03

2 jawaban

Jawaban Terbaik

Inilah solusi saya, itu harus memenuhi kebutuhan Anda.

    <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>
0
The KNVB 15 Agustus 2017, 01:51

Untuk menampilkan pilihan komputer saja, hapus saja pernyataan berikut.

        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;
0
The KNVB 15 Agustus 2017, 03:01