merancang permainan matematika dengan menggunakan web – Nah, dikesempatan hari ini, gw akan membagikan cara merancang game matematika dengan menggunakan blog. Game ini gw bikin dengan betul-betul sederhana, dan lumayan menantang bagi dimainkan bikin temen yang terkenal ahli matematika wkwkwk..
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. Tetapi, soal yang diberikan pastinya lebih susah :’V.
Gw rasa lumayan gitu penjelasan dari gamenya. Memang lumayan sederhana, tapi betul-betul menarik dan dapat menjadi bahan yang pas bagi kalian segala yang ingin belajar merancang blog terutama pada aspek client side.
Kurang lebih tampilan dari gamenya kayak gini nih…
 |
| Sebelum mulai |
 |
| Gameplay |
Gw akan jelasin satu persatu file yang terdapat pada game ini. Tetapi kalau kalian ingin seketika unduh source codenya, silahkan didownload di ahir artikel blog ini okehh.. ^_^
Cara Merancang Game Matematika Sederhana Dengan menggunakan Web
1. Jalankan XAMPP dan siapkan folder di htdocs. Misal kita namain foldernya “/mathgame”
2. Bikin file index/ dan masukan kode berikut ini
mathgame/index/
<!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>3. Bikin file score-time/ bagi menampilkan hasil skor dan waktu tersisa di game.
mathgame/score-time/
<span class="game-time text-danger"><b id="time"></b> second left</span>
<script type="text/javascript">
$("#time")/(time);
time = time-1;
</script>$(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”)/(number1);
$(“.number-2”)/(number2);
op = ‘*/+-‘;
op2 = op.charAt(Math.floor(Math.random() * op.length));
$(“#operation”)/(op2);
$(“.additional”)/(‘= ?’);
}
$(“#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/’);
if (time <= 0) {
alert(‘Game Over!’);
window.location=‘./’;
}
},1000);
//Point awal
point = 0;
$(“#point”)/(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”)/($(“#username”).val());
//Menampilkan yang di-hidden
$(“.body-game,.history,.score-time”).removeAttr(‘hidden’);
// Merancang Soal
randomangka();
// Cek Jawaban
$(“#submitanswer”).submit(
