Membuat Game Balap Sederhana Menggunakan jQuery Part2

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 www.dumetschool.com/blog/membuat-game-balap-sederhana-menggunakan-jquery-part3. Selamat mencoba.

5 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat