Faid's Blog™: Permainan Angka HTML Javascript

Ini adalah contoh aplikasi WEB permainan angka dengan logika yang lumayan banyak agar jawaban benar ditaruh di tombol berbeda, setiap jawaban dapat mengeluarkan angka yang mirip dengan jawaban yang sama dan tidak ada tombol jawaban yang berisi angka yang sama.
Penilaian dalam permainan ini adalah jika benar skor + 2 dan jika salah skor - 1.
0	+	0	=


WAKTU		SKOR
60		0
Source code:
<html>
	<head>
		<title>Permainan Angka</title>
		<style>
			td, input {
				width: 50px;
				text-align: center;
				font-family: courier;
				font-weight: bold;
				font-size: 30px;
			}
			
			input {
				width: 100%;
				height: 50px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table border='0' cellSpacing='4' cellPadding='0'>
			<tr>
				<td id='angka1'>0</td>
				<td id='simbol'>+</td>
				<td id='angka2'>0</td>
				<td>=</td>
			</tr>
			<tr>
				<td colSpan='2'>
					<input type='button' id='jawaban1' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
				<td colSpan='2'>
					<input type='button' id='jawaban2' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
			</tr>
			<tr>
				<td colSpan='2'>
					<input type='button' id='jawaban3' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
				<td colSpan='2'>
					<input type='button' id='jawaban4' value='0' disabled='true' onClick='cekJawaban(this.value);'/>
				</td>
			</tr>
			<tr>
				<td colSpan='2'>WAKTU</td>
				<td colSpan='2'>SKOR</td>
			</tr>
			<tr>
				<td colSpan='2' id='waktu'>60</td>
				<td colSpan='2' id='skor'>0</td>
			</tr>
			<tr>
				<td colSPan='2'><input type='button' id='mulaiBtn' style='font-size: 14px;' value='Mulai Baru' onClick='mulaiBaru();'/></td>
				<td colSpan='2'><input type='button' id='stopBtn' style='font-size: 14px;' value='Menyerah' onClick='hentikanPermainan();' disabled='true'/></td>
			</tr>
		</table>
	</body>
	<script>
		var sym = ["+", "-", ":", "x"];
		var dvd = [1, 212, 31, 412, 51, 6123, 71, 8124, 913]; //pembagian perlu angka khusus, arti isinya misal 9, bisa dibagi dengan 1, 3, dan 9, maka ditulis 913
		var hitMundurInterval, jawaban, rndSym, rndTmp;
		function mulaiBaru() { //mulai permainan
			clearInterval(hitMundurInterval);
			fungsiTombol("disabled", false); //enable semua tombol jawaban
			waktu.innerHTML = 60; //waktu dalam permainan, disini 60 detik
			skor.innerHTML = 0; //skor kembali ke 0 tiap mulai baru
			acakAngka(); //megacak angka
			mulaiBtn.disabled = true;
			stopBtn.disabled = false;
			hitMundurInterval = setInterval("hitungMundur();", 1000); //hitung mundur dengan kecepeatan 1000ms (1 detik)
		}
		function hitungMundur() { //hitung mundur
			if (waktu.innerHTML == "0") { //jika waktu habis
				hentikanPermainan();
				alert("Waktu habis!\nSkor: " + skor.innerHTML);
				mulaiBtn.disabled = false;
				stopBtn.disabled = true;
				return false;
			}
			waktu.innerHTML = parseInt(waktu.innerHTML) - 1; //kurangi 1 tiap detik
		}
		function hentikanPermainan() { //untuk tombol 'menyerah' atau saat waktu habis
			clearInterval(hitMundurInterval); //hentikan pewaktu
			fungsiTombol("disabled", true); //disable semua tombol jawaban
			mulaiBtn.disabled = false;
			stopBtn.disabled = true;
		}
		function acakAngka() {
			fungsiTombol("value", "?");
			angka1.innerHTML = Math.floor(Math.random() * 9);
			simbol.innerHTML = sym[Math.floor(Math.random() * 4)];
			angka2.innerHTML = Math.floor(Math.random() * 9);
			if (simbol.innerHTML == ":") { //jika pembagian
				rndTmp = dvd[Math.floor(Math.random() * 9)]; //ambil dari array dvd (divide)
				angka1.innerHTML = rndTmp.toString().substr(0, 1);
				angka2.innerHTML = rndTmp.toString().substr(Math.floor(Math.random() * rndTmp.toString().length), 1);
			}
			if (simbol.innerHTML == "-" && (parseInt(angka1.innerHTML) < parseInt(angka2.innerHTML))) { //jika minus (-) dan angka1 lebih kecil
				jawaban = parseInt(angka1.innerHTML);
				angka1.innerHTML = angka2.innerHTML;
				angka2.innerHTML = jawaban;
			}
			jawaban = hitungString(parseInt(angka1.innerHTML), simbol.innerHTML, parseInt(angka2.innerHTML));
			document.getElementById("jawaban" + (Math.floor(Math.random() * 3) + 1)).value = jawaban; //megacak tombol yang benar
			for (var i = 1; i <= 4; i++) {
				if (document.getElementById("jawaban" + i).value == "?") { //mengisi semua tombol jawaban
					if (i > jawaban) { //simbol + atau -, jika i > jawaban maka simbol +
						rndSym = "+";
					} else {
						rndSym = sym[Math.floor(Math.random() * 2)]; //simbol random antara - atau +
					}
					document.getElementById("jawaban" + i).value = hitungString(jawaban, rndSym, i);
				}
			}
		}
		function cekJawaban(elmVal) {
			if (parseInt(elmVal) == jawaban) {
				skor.innerHTML = parseInt(skor.innerHTML) + 2; //benar
			} else {
				skor.innerHTML = parseInt(skor.innerHTML) - 1; //salah
			}
			acakAngka(); //acak
		}
		function hitungString(nA, sY, nB) { //menghitung dari 3 sring (angka1, simbol, angka2)
			if  (sY == "+") {
				return nA + nB;
			} else if  (sY == "-") {
				return nA - nB;
			} else if  (sY == ":") {
				return nA / nB;
			} else {
				return nA * nB;
			}
		}
		function fungsiTombol(act, val) { //fungsi tombol, disabled atau value, dengan isi (val) = true / false / "string"
			jawaban1[act] = val;
			jawaban2[act] = val;
			jawaban3[act] = val;
			jawaban4[act] = val;
		}
	</script>
</html>
Faid's Blog™

My Blog Menu

Wednesday, April 1, 2015

Permainan Angka HTML Javascript

No comments:

Post a Comment
