Membuat Game Balap Sederhana Menggunakan jQuery Part1
05/09/2019 Shelli Ripati 5584 Website
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.
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
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
