Membuat Game Matematika Sederhana Html & Jquery
membuat permainan matematika berbasis web - Nah, dikesempatan hari ini, gw akan membagikan cara menciptakan game matematika berbasis website. Game ini gw buat dengan sangat sederhana, dan cukup menantang untuk dimainkan buat temen yang populer hebat 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 klarifikasi dari gamenya. Memang cukup sederhana, tapi sangat menarik dan sanggup menjadi materi yang pas untuk kalian semua yang ingin berguru menciptakan website terutama dalam aspek client side.
Kurang lebih tampilan dari gamenya kayak gini nih...
Gw akan jelasin satu persatu file yang ada dalam game ini. Tapi bila kalian ingin pribadi download source codenya, silahkan didownload di simpulan artikel blog ini okehh.. ^_^
Cara Membuat Game Matematika Sederhana Berbasis Web
1. Jalankan XAMPP dan siapkan folder di htdocs. Misal kita namain foldernya "/mathgame"
2. Buat file index.html dan masukan arahan berikut ini
mathgame/index.html
mathgame/score-time.html
4. Buat folder dengan nama "asset" didalam folder "mathgame".
Silahkan masukan ke folder mathgame/asset.
Untuk download seluruh file nya, sanggup kalian klik link dibawah ini.
Download Game Matematika Berbasis Web
Password winrar: tezigerblog
Oke, sekian dulu artikel hari ini wacana cara menciptakan game sederhana dengan html dan javascript. Semoga bermanfaat! Terima kasih! Sumber https://teziger.blogspot.com/
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 klarifikasi dari gamenya. Memang cukup sederhana, tapi sangat menarik dan sanggup menjadi materi yang pas untuk kalian semua yang ingin berguru menciptakan 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 bila kalian ingin pribadi download source codenya, silahkan didownload di simpulan 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 arahan 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 menciptakan sistem dari web game nya. Buat file berjulukan script.js dan masukan arahan 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 yakni jquery dengan pelengkap design dari css bootstrap semoga 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 menjelma 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 === '*') { tanggapan = number1*number2; } else if (op2 === '+') { tanggapan = number1+number2; } else if (op2 === '/') { tanggapan = number1/number2; } else if (op2 === '-') { tanggapan = 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, sanggup kalian klik link dibawah ini.
Download Game Matematika Berbasis Web
Password winrar: tezigerblog
Oke, sekian dulu artikel hari ini wacana cara menciptakan game sederhana dengan html dan javascript. Semoga bermanfaat! Terima kasih! Sumber https://teziger.blogspot.com/