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>
<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 RZDev: Belajar Programming!
Posts
0 comments:
Post a Comment