Kelas saya lebih seru karena siswa main tebak tebakan angka dengan komputer, yang menang dapat poin dan yang kalah harus menyebutkan nama nama perangkat komputer beserta fungsinya.
Yuk buat juga, simpan file dengan nama tebak_angka.html
berikut kodenya :
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card">
<a href="index.php?act=<?php echo base64_encode("games"); ?>" class="btn btn-danger btn-block">Tutup Game</a>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input {
padding: 10px;
margin: 10px;
font-size: 1.2em;
}
button {
padding: 10px 15px;
font-size: 1.2em;
background-color: #61dafb;
border: none;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #21a1f1;
}
#message {
margin-top: 20px;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<audio id="correctSound" src="pages/media/correct.mp3"></audio>
<audio id="wrongSound" src="pages/media/wrong.mp3"></audio>
<audio id="bgMusic" src="pages/media/background.mp3" loop autoplay></audio>
<br>
<br>
<h1>Tebak Angka (1-100)</h1>
<p>Coba tebak angka yang saya pikirkan!</p>
<input type="number" id="guess" min="1" max="100" placeholder="Masukkan angka">
<button onclick="checkGuess()">Tebak</button>
<p id="message"></p>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
function checkGuess() {
let userGuess = document.getElementById("guess").value;
let message = document.getElementById("message");
if (userGuess == randomNumber) {
message.innerHTML = "🎉 Selamat! Kamu menebak dengan benar!";
message.style.color = "green";
document.getElementById("correctSound").play();
} else if (userGuess > randomNumber) {
message.innerHTML = "🔻 Terlalu tinggi! Coba lagi.";
message.style.color = "red";
document.getElementById("wrongSound").play();
} else {
message.innerHTML = "🔺 Terlalu rendah! Coba lagi.";
message.style.color = "red";
document.getElementById("wrongSound").play();
}
}
</script>
</body>
</div>
</div>
</div>
</div>
0 komentar: