Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.html

Created October 20, 2020 07:41
Show Gist options
  • Save harunpehlivan/ad7cc3a74f3f1ac3956bc70c8a975878 to your computer and use it in GitHub Desktop.
Save harunpehlivan/ad7cc3a74f3f1ac3956bc70c8a975878 to your computer and use it in GitHub Desktop.
Download ZIP
Simple car racing game using JavaScript
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Car Racing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="relow">
<div class="roadWrapper"></div>
<div class="carWrapper">
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1603178974/animated-car_j3wplv.gif">
</div>
<audio autoplay> <source src="car-sound.mp3" type="audio/mpeg" >Your browser does not support the audio element.</audio>
</div>
<script type="text/javascript">
$(document).keydown(function(e){
if (e.which == 37) {
/** left arrow click (left keboard button) **/
$(".carWrapper").addClass("left_pressed");
$(".carWrapper").removeClass("right_pressed");
}else if (e.which == 38) {
$(".roadWrapper").removeClass("low-speed");
$(".roadWrapper").addClass("high-speed");
$(".relow").append('<audio autoplay> <source src="https://res.cloudinary.com/tercuman-b-l-m-merkez/video/upload/v1603178769/car-sound_bz10o5.mp3" type="audio/mpeg" >Your browser does not support the audio element.</audio>');
$(".carWrapper > img").attr("src", "animated-car.gif");
return false;
}else if (e.which == 39) {
$(".carWrapper").removeClass("left_pressed");
$(".carWrapper").addClass("right_pressed");
}else if (e.which == 40) {
$("audio").remove();
$(".roadWrapper").removeClass("high-speed");
$(".roadWrapper").addClass("low-speed");
}
});
</script>
</body>
</html>
Raw
style.css
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #0f62fe;
height: 100vh;
}
.roadWrapper {
position: relative;
width: 1300px;
height: 160px;
background: #525252;
transform-origin: bottom;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(50deg);
}
.roadWrapper:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff, 0%, #fff, 70%, #525252, 100%, #525252);
background-size: 120px;
animation: move 0.6s linear infinite;
}
@keyframes move {
0% {
background-position: 0px;
}
100% {
background-position: 120px;
}
}
.roadWrapper:after {
content: "";
position: absolute;
width: 100%;
background: #333;
transform: perspective(500px) rotateX(-25deg);
bottom: -30px;
transform-origin: top;
height: 30px;
}
.relow {
position: relative;
}
.carWrapper {
position: absolute;
top: 85px;
left: 120px;
}
.carWrapper.left_pressed {
top: 60px;
left: 150px;
}
.carWrapper.right_pressed {
top: unset;
bottom: 10px;
}
.roadWrapper.low-speed::before {
animation: move linear 1.6s infinite;
}
.roadWrapper.high-speed::before {
animation: move linear .3s infinite;
}
.high-speed ~.carWrapper {
animation: moveforwards 3s linear infinite;
}
@keyframes moveforwards {
0% {
transform: translateX(0px);
}
10% {
transform: translateX(100px);
}
20% {
transform: translateX(200px);
}
30% {
transform: translateX(300px);
}
40% {
transform: translateX(400px);
}
50% {
transform: translateX(500px);
}
60% {
transform: translateX(600px);
}
70% {
transform: translateX(700px);
}
80% {
transform: translateX(800px);
}
90% {
transform: translateX(900px);
}
100% {
transform: translateX(1000px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment