Thursday, 2 May 2019

Membuat Game Matematika Sederhana HTML & Jquery

membuat permainan matematika berbasis web - Nah, dikesempatan hari ini, gw akan membagikan cara membuat game matematika berbasis website. Game ini gw buat dengan sangat sederhana, dan cukup menantang untuk dimainkan buat 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. 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>

3. Buat file score-time.html untuk menampilkan hasil skor dan waktu tersisa pada game.

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

$(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('<li>'+number1+' '+op2+' '+number2+' = '+answersaya+' | <b class="text-'+dasuc+' mr-3">'+maka+'</b> answer : <b>'+jawaban+'</b></li>');
      $(".answer").val('');

      //Membuat Soal Kembali
      randomangka();
    });
  });
});

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.

Silahkan masukan ke folder mathgame/asset.

Untuk download seluruh file nya, bisa kalian klik link dibawah ini.

Download Game Matematika Berbasis Web

Oke, sekian dulu artikel hari ini tentang cara membuat game sederhana dengan html dan javascript. Semoga bermanfaat! Terima kasih!

0 komentar

Post a Comment

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!