Home » , » Membuat Dice Roller dengan Javascript

Membuat Dice Roller dengan Javascript

Posted by REZKYCPP on Friday, December 1, 2017

Berikut script javascriptnya, semoga dapat membantu, jika ada yang kurang paham bisa tanyakan langsung ke saya atau kotak komentar dibawah ini.
<!DOCTYPE html>
<html>
<head>
    <title>Random Number Generator</title>
    <style type="text/css">
        ul { margin: 10px; }
        li {display: inline; margin-right: 10px; }
    </style>

    <script type="text/javascript">
        //variables used to interact with the img elements
        var die1image;
        var die2image;
        //register button listener and get the img elements
        function start(){

            var button = document.getElementById("rollButton");
          
            button.addEventListener("click", rollDice);
          
            die1image = document.getElementById("die1");
            die2image = document.getElementById("die2");
        }

        //roll the dice
        function rollDice (){
var gambar1 = getNum();
var gambar2 = getNum();          
            setImage(die1image,gambar1);
            setImage(die2image,gambar2);
var total = parseInt(gambar1) + parseInt(gambar2);
      
            if (total<5){
        document.getElementById("total").innerHTML = "Total : " + total + ", maaf anda kalah.";
            //window.alert("Total : " + total + ", maaf anda kalah.");
        }else{
            document.getElementById("total").innerHTML = "Total : " + total + ", selamat anda menang.";
        }
}

    function getNum(){
return Math.floor(1 + Math.random() * 6 );
}
        //set image source
        function setImage(dieImg,nomer){
            //var dieValue = Math.floor(1 + Math.random() * 6 );
            dieImg.setAttribute ("src", "image/" + nomer + ".jpg");
            dieImg.setAttribute ("alt", "die image with " + nomer + " spots");
    }

        window.addEventListener("load", start, false);
    </script>
</head>
<body>
    <form>
        <input type="button" id="rollButton" value="Roll Dice">
    </form>
    <ul>
        <li>
            <img id="die1" src="image/1.png" alt="blank png" width="50px" height="50px">
            <img id="die2" src="image/1.png" alt="blank png" width="50px" height="50px">
        </li>
    </ul>
    <p id="total">Total : 0, tekan tombol untuk memulai</p>
</body>
</html>

Thanks for reading & sharing REZKYCPP

Previous
« Prev Post

0 comments:

Post a Comment

Search