1. Buat file html : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Game Racing Car 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>
<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>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. Buat file css : style.css
#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;
}
3. Buat java script : script.js
$(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;
});
Hasil :
