Secara garis besar, game ini akan meminta pemain memasukan usernamenya, terus pilih level. Level terdiri atas 3 opsi. Yaitu easy, medium, dan hard. Akan terdapat waktu disetiap permainan. Nah, semakin sulit level yang dipilih, semakin banyak waktu yang didapet. Tapi, soal yang diberikan tentunya lebih susah :'V.
Gw rasa cukup gitu penjelasan dari gamenya. Memang cukup sederhana, tapi sangat menarik dan bisa menjadi bahan yang pas untuk kalian semua yang ingin belajar membuat website terutama dalam aspek client side.
Kurang lebih tampilan dari gamenya kayak gini nih...
 |
| Sebelum mulai |
 |
| Gameplay |
Gw akan jelasin satu persatu file yang ada dalam game ini. Tapi kalau kalian ingin langsung download source codenya, silahkan didownload di akhir artikel blog ini okehh.. ^_^
Cara Membuat Game Matematika Sederhana Berbasis Web
1. Jalankan XAMPP dan siapkan folder di htdocs. Misal kita namain foldernya "/mathgame"
Baca: Pengertian, Fungsi, Dan Cara Menggunakan XAMPP
2. Buat file index.html dan masukan kode berikut ini
mathgame/index.html
<!DOCTYPE html>
<html>
<head>
<title>Math Mini Game</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="assets/jquery-3.3.1.min.js"></script>
<script src="assets/script.js" charset="utf-8"></script>
</head>
<body>
<div id="head">
<div class="container">
<div class="head-title">
<h3 class="page-header mt-4">Math Game</h3>
<p>Please input form below and press <b>play</b> button to play the game.</p>
</div>
<div class="head-component mt-5">
<form id="form" onsubmit="return false" method="post">
<div class="form-row">
<div class="form-group col-md-3">
<label for="username">Username</label>
<input type="text" required autocomplete="off" name="username" id="username" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="level">Level</label>
<select id="level" required class="form-control">
<option value="">--Select Level--</option>
<option value="1">Easy</option>
<option value="2">Normal</option>
<option value="3">Hard</option>
</select>
</div>
</div>
<input type="submit" id="play" class="btn btn-danger" value="Play Game">
</div>
</div>
</form>
</div>
<div id="body" class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-6 pr-5">
<div class="body-title">
<h4 id="usernamectn"></h4>
<div class="sub-title score-time" hidden>Point: <span class="game-time text-success"><b id="point"></b></span> | <span id="score-time"></span></div>
</div>
<div class="body-game mt-3 bg-secondary px-3 py-3 text-light" hidden>
<span>The Quiz</span>
<div class="game-quiz">
<h2>
<span class="number-1"> </span>
<span class="quiz-type"> <b id="operation"></b> </span>
<span class="number-2"> </span>
<span class="additional"></span>
</h2>
</div>
<div class="game-control mt-3">
<form class="form-vertical" onsubmit="return false" id="submitanswer">
<input autofocus class="answer form-control col-4 float-left" type="number" name="answer" placeholder="Your answer">
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
<div class="card col-md-6 pl-5 py-3 history" hidden>
<h4>History</h4>
<ul class="history-math">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>mathgame/score-time.html
<span class="game-time text-danger"><b id="time"></b> second left</span>
<script type="text/javascript">
$("#time").html(time);
time = time-1;
</script>4. Buat folder dengan nama "asset" didalam folder "mathgame".
5. Dalam folder asset, kita akan membuat sistem dari web game nya. Buat file bernama script.js dan masukan kode script berikut ini.
mathgame/assets/script.js
Sekarang kita akan copy-paste dan masukan script aset dari jquery js dan bootstrap css. Karena bahasa javascript yang kita gunakan adalah jquery dengan tambahan design dari css bootstrap supaya game nya keliatan lebih ganteng.$(document).ready(function(){
//Function MembuatRandom Angka
function randomangka(){
number1 = 1+Math.floor(Math.random() * (max-min));
number2 = 1+Math.floor(Math.random() * (max-min));
$(".number-1").html(number1);
$(".number-2").html(number2);
op = '*/+-';
op2 = op.charAt(Math.floor(Math.random() * op.length));
$("#operation").html(op2);
$(".additional").html('= ?');
}
$("#level").change(function(){ //Pilih Level
val = $("#level").val();
if (val === '1') {
max = '10';
min = '1';
time = '30';
}
else if (val === '2') {
max = '100';
min = '10';
time = '60';
}
else if (val === '3') {
max = '1000';
min = '100';
time = '90';
}
});
$("#form").submit(function(){ //Siap Main
// Waktu Dan Skor
setInterval(function(){
$("#score-time").load('score-time.html');
if (time <= 0) {
alert('Game Over!');
window.location='./';
}
},1000);
//Point awal
point = 0;
$("#point").html(point);
//Mematikan Input Username Dan Level
$("#username, #level").attr("disabled","1");
//Mengubah tombol play menjadi disable dan berubah menjadi kata Enjoy the game!
$("#play").attr('disabled','1').val('Enjoy the game!');
//Print username
$("#usernamectn").html($("#username").val());
//Menampilkan yang di-hidden
$(".body-game,.history,.score-time").removeAttr('hidden');
// Membuat Soal
randomangka();
// Cek Jawaban
$("#submitanswer").submit(function(){
if (op2 === '*') {
jawaban = number1*number2;
}
else if (op2 === '+') {
jawaban = number1+number2;
}
else if (op2 === '/') {
jawaban = number1/number2;
}
else if (op2 === '-') {
jawaban = number1-number2;
}
answersaya = $(".answer").val();
if (answersaya == jawaban) { //Jika Benar
maka = 'Correct';
dasuc = 'success';
point = point+1;
}
else{ // Jika Salah
maka = 'Wrong';
dasuc = 'danger';
point = point-1;
}
$('#point').html(point);
$(".history-math").append('
'+number1+' '+op2+' '+number2+' = '+answersaya+' | '+maka+' answer : '+jawaban+'
');
$(".answer").val('');
//Membuat Soal Kembali
randomangka();
});
});
});Silahkan masukan ke folder mathgame/asset.
Untuk download seluruh file nya, bisa kalian klik link dibawah ini.
Download Game Matematika Berbasis Web
Password winrar: tezigerblog
Oke, sekian dulu artikel hari ini tentang cara membuat game sederhana dengan html dan javascript. Semoga bermanfaat! Terima kasih!
No comments:
Post a Comment
Komentar yang bermutu Insyaallah akan mendapatkan berkah