Membuat Game Balap Sederhana Menggunakan jQuery Part2

05/09/2019    Shelli Ripati    40     Website

Pada pembahasan sebelumnya kita sudah membuat tampilan untuk Membuat Game Balap Sederhana Menggunakan Jquery di Part1. Pada artikel kali ini di cara Membuat Game Balap Sederhana Menggunakan Jquery Part2 kita akan membuat tampilan game over dengan menggunakan modal bootstrap dan beberapa fungsi untuk menjalankan gamenya.

Langkah pertama teman-teman tambahkan struktur html modal di file yang sudah dibuat sebelumnya dan letakan paling bawah div. dan berikut scriptnya.

<div class="modal" id="restart_div" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h1>Game Over !</h1>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary small_text" id="restart">Ok</button>
          </div>
        </div>
      </div>
    </div>

Jika sudah teman-teman buat file baru dengan nama script.js lalu teman-teman buat variable baru untuk menampung semua selector yang dibutuhkan agar lebih mudah dalam pemanggilannya. Dan beberapa variable untuk menghitung lebar dan tinggi yang dibutuhkan.

$(function() {

    var anim_id;

    //saving dom objects to variables
    var container = $('#container');
    var car = $('#car');
    var car_1 = $('#car_1');
    var car_2 = $('#car_2');
    var car_3 = $('#car_3');
    var line_1 = $('#line_1');
    var line_2 = $('#line_2');
    var line_3 = $('#line_3');
    var restart_div = $('#restart_div');
    var restart_btn = $('#restart');
    var score = $('#score');
    var high_score = localStorage.getItem('high_score');
    $('#high_score').text(high_score);

    //saving some initial setup
    var container_left = parseInt(container.css('left'));
    var container_width = parseInt(container.width());
    var container_height = parseInt(container.height());
    var car_width = parseInt(car.width());
    var car_height = parseInt(car.height());

    //some other declarations
    var game_over = false;

    var score_counter = 1;

    var speed = 2;
    var line_speed = 5;

    var move_right = false;
    var move_left = false;
    var move_up = false;
    var move_down = false;

});

Jika sudah semua maka varibel yang sudah kita buat akan kita gunakan untuk membuat fungsi atau event keyup dan keydown untuk menjalankan dan memindahkan posisi mobil yang sudah kita buat sebelumnya di part1. Dan kita buat fungsi repeat yang berisi mobil sedang berjalan begitupun fungsi ketika game over.

Demikian artikel tentang cara Membuat Game Balap Sederhana Menggunakan Jquery Part2. Untuk selanjutnya akan saya bahas pada artikel Membuat Game Balap Sederhana Menggunakan Jquery Part3. Selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More