Membuat Game Balap Sederhana Menggunakan jQuery Part1

Hallo teman-temann Dumet School. Pada kesempatan kali ini saya akan Membuat Game Balap Sederhana Menggunakan Jquery. Langkah pertama untuk membuat game ini teman-teman buat terlebih dahulu tampilannya dengan menggunakan html dan css. Dan berikut ini scriptnya.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Membuat Game Balap Sederhana Menggunakan Jquery</title>
    <link href="style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <p>Note : Tekan Tombol Panah Kiri, Kanan, Atas atau Bawah</p>
                <div class="row">
                    <div class="col-6">
                        <div class="alert alert-primary" role="alert">
                            Score: <span id="score">0</span>
                            High Score: <span id="high_score">0</span>
                        </div>
                    </div>
                    <div class="col-6" id="container">
                        <div id="line_1" class="line"></div>
                        <div id="line_2" class="line"></div>
                        <div id="line_3" class="line"></div>
                        <div id="car" class="car">
                            <div class="f_glass"></div>
                            <div class="b_glass"></div>
                            <div class="f_light_l"></div>
                            <div class="f_light_r"></div>
                            <div class="f_tyre_l"></div>
                            <div class="f_tyre_r"></div>
                            <div class="b_tyre_l"></div>
                            <div class="b_tyre_r"></div>
                        </div>
                        <div id="car_1" class="car">
                            <div class="f_glass"></div>
                            <div class="b_glass"></div>
                            <div class="f_light_l"></div>
                            <div class="f_light_r"></div>
                            <div class="f_tyre_l"></div>
                            <div class="f_tyre_r"></div>
                            <div class="b_tyre_l"></div>
                            <div class="b_tyre_r"></div>
                        </div>
                        <div id="car_2" class="car">
                            <div class="f_glass"></div>
                            <div class="b_glass"></div>
                            <div class="f_light_l"></div>
                            <div class="f_light_r"></div>
                            <div class="f_tyre_l"></div>
                            <div class="f_tyre_r"></div>
                            <div class="b_tyre_l"></div>
                            <div class="b_tyre_r"></div>
                        </div>
                        <div id="car_3" class="car">
                            <div class="f_glass"></div>
                            <div class="b_glass"></div>
                            <div class="f_light_l"></div>
                            <div class="f_light_r"></div>
                            <div class="f_tyre_l"></div>
                            <div class="f_tyre_r"></div>
                            <div class="b_tyre_l"></div>
                            <div class="b_tyre_r"></div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman buat script css di file terpisah dengan nama style.css seperti berikut ini.

#container{
    position: relative;
    height: 90vh;
    width: 25%;
    background-color: #cbcbcb;
    overflow: hidden;
}
.line{
    position: absolute;
    height: 150px;
    width: 4%;
    left: 48%;
    background-color: rgba(255,255,255,0.7);
}
#line_1{
    top: -150px;
}
#line_2{
    top: 150px;
}
#line_3{
    top: 450px;
}
.car{
    position: absolute;
    height: 60px;
    width: 40px;
    border-radius: 5px;
    box-shadow: 0px 1px 8px 0px black;
}
#car{
    bottom: 8%;
    left: 60%;
    background-color: salmon;
}
.f_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    top: 15%;
    border-radius: 0px 0px 5px 5px;
    background-color: #484848;
}
.b_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    bottom: 15%;
    border-radius: 5px 5px 0px 0px;
    background-color: #484848;
}
.f_light_l{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 10%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_light_r{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 70%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: #484848;
    top: 20%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.f_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: #484848;
    top: 20%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
.b_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: #484848;
    top: 70%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.b_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: #484848;
    top: 70%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
#car_1{
    top: -100px;
    left: 60%;
    background-color: #26c5ff;
}
#car_2{
    top: -200px;
    left: 40%;
    background-color: #26c5ff;
}
#car_3{
    top: -350px;
    left: 50%;
    background-color: #26c5ff;
}
#restart_div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    font-family: sans-serif;
    font-size: 40px;
    text-align: center;
    display: none;
}
#score_div{
    position: absolute;
    margin-top: 20%;
    margin-left: 10%;
    font-size: 35px;
    background-color: white;
    color: #454545;
    padding: 10px;
    box-shadow: 4px 4px 0px 1px #808080;
}

Jika sudah maka akan seperti gambar di bawah ini.

Membuat Game Balap Sederhana Menggunakan jQuery

Demikian artikel tentang cara Membuat Game Balap Sederhana Menggunakan Jquery Part1. Pembahasan selanjutnya akan di bawah pada artikel tentang Membuat Game Balap Sederhana Menggunakan Jquery Part2

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat