Skip to content
GitLab
Commit c1d31659 authored by Dragan Trgacevski's avatar Dragan Trgacevski
Browse files

'inital'

parent 59528369
Hide whitespace changes
Inline Side-by-side
Showing
with 250 additions and 0 deletions
+250 -0
app.js 0 → 100644
+ 104
- 0
View file @ c1d31659
$(function () {
//write your code here
let car1 = $(".car1");
let car2 = $(".car2");
let bodyWidth = $("body").width();
let timer = $('.timer');
let timerBg = $('.timer-bg');
let index = 4;
$("#race-btn").on("click", function () {
$(this).attr("disabled",true);
$('#start-over-btn').attr("disabled",true);
let race = setInterval(() => {
timer.css('display','block');
timerBg.css('display','block');
index--;
timer.text(index);
}, 1000);
setTimeout(() => {
clearInterval(race)
let calc = bodyWidth - car1.width();
timer.css('display','none');
timerBg.css('display','none');
let speed1 = 500 + Math.floor(Math.random() * 5000);
let speed2 = 500 + Math.floor(Math.random() * 5000);
let car1Finish,
car2Finish;
let tr = $("<tr class='row'>");
let td1 = $("<td class='col-5 offset-1 mb-2'>");
let td2 = $("<td class='col-5 offset-1 mb-2'>");
$('tbody').prepend(tr);
if (speed1 > speed2) {
car1Finish = 'Second';
car2Finish = 'First';
setTimeout(() => {
$('.flag').css('display','block');
$('.timer-bg').css('display','block')
}, speed2);
setTimeout(() => {
$('#start-over-btn').attr("disabled",false);
}, speed1);
}else{
car1Finish = 'First'
car2Finish = 'Second';
setTimeout(() => {
$('.flag').css('display','block');
$('.timer-bg').css('display','block');
}, speed1);
setTimeout(() => {
$('#start-over-btn').attr("disabled",false);
}, speed2);
}
localStorage.setItem('Place-Car1',car1Finish)
localStorage.setItem('Place-Car2',car2Finish)
localStorage.setItem('Finish-time-car1', speed1)
localStorage.setItem('Finish-time-car2',speed2)
car1.animate({ marginLeft: calc }, speed1,function(){
td1.html(`Finished in: <span class='car1-color font-weight-bold'>${car1Finish}</span> place with a time of: <span class='car1-color font-weight-bold'>${speed1}</span> miliseconds`).addClass('border');
});
car2.animate({ marginLeft: calc }, speed2,function(){
td2.html(`Finished in: <span class='car2-color font-weight-bold'>${car2Finish}</span> place with a time of: <span class='car2-color font-weight-bold'>${speed2}</span> miliseconds`).addClass('border');
});
tr.append(td1);
tr.append(td2);
}, 4000);
});
if(localStorage.getItem('Place-Car1') && localStorage.getItem('Place-Car2') && localStorage.getItem('Finish-time-car1') && localStorage.getItem('Finish-time-car2')){
let place1 = localStorage.getItem('Place-Car1');
let place2 = localStorage.getItem('Place-Car2');
let finishTimeCar1 = localStorage.getItem('Finish-time-car1');
let finishTimeCar2 = localStorage.getItem('Finish-time-car2');
$('.car1-prev-results').html(`<p class="text-white mb-0"><span class='car1-color'>Car1</span> finished in <span class='car1-color'>${place1}</span> place, with a time of <span class='car1-color'>${finishTimeCar1}</span></p>`);
$('.car2-prev-results').html(`<p class="text-white mb-0"><span class='car2-color'>Car2</span> finished in <span class='car2-color'>${place2}</span> place, with a time of <span class='car2-color'>${finishTimeCar2}</span></p>`)
$('.car1-prev-results').addClass('border mb-2')
$('.car2-prev-results').addClass('border')
}
$('#start-over-btn').on('click', function(){
$('#race-btn').attr("disabled",false);
car1.css('margin-left',0)
car2.css('margin-left',0)
$('.flag').css('display','none');
$('.timer-bg').css('display','none')
index = 4;
})
});
images/car1.gif 0 → 100644
+ 0
- 0
View file @ c1d31659
images/car1.gif

270 KB

images/car2.gif 0 → 100644
+ 0
- 0
View file @ c1d31659
images/car2.gif

492 KB

images/finish.gif 0 → 100644
+ 0
- 0
View file @ c1d31659
images/finish.gif

187 KB

images/raceTrack.jpg 0 → 100644
+ 0
- 0
View file @ c1d31659
images/raceTrack.jpg

60.2 KB

index.html 0 → 100644
+ 87
- 0
View file @ c1d31659
<!DOCTYPE html>
<html>
<head>
<title>Car racing game</title>
<meta name="keywords" content="html,css,lekcii">
<meta name="description" content="ova e strana za ucenje">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Latest compiled and minified BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Font-awesome 4.7 cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="race">
<!-- write your code here -->
<div class="container-fluid">
<div class="row">
<div class="col-12 mt-2 mb-2">
<h2>Car Racing Game!</h2>
</div>
<div class="col-12 mb-4">
<button id="race-btn" class="btn btn-lg btn-dark btn-outline-light px-5 mr-3">Race!</button>
<button id="start-over-btn" class="btn btn-lg btn-dark btn-outline-light px-5">Start over</button>
</div>
<div class="col-12 race-truck px-0">
<div class="timer-bg"></div>
<img src="./images/finish.gif" class="flag">
<img src="./images/car1.gif" class="d-block cars car1">
<img src="./images/car2.gif" class="d-block cars car2">
<p class="timer"></p>
</div>
<div class="col-6 mt-5">
<p class="text-light text-center ml-5 h2">Results</p>
<table class="table table-lg table-borderless text-white">
<thead>
<tr class="row">
<th class="col-5 offset-1 car1-color">Car 1</th>
<th class="col-5 offset-1 car2-color">Car 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-6 mt-5">
<div class="col-12 mb-5">
<p class="h2 text-light">Results from previous time you played this game:</p>
</div>
<div class="col-12 pt-3">
<div class='car1-prev-results p-3'>
</div>
</div>
<div class="col-12">
<div class='car2-prev-results p-3'>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="app.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
</body>
</html>
style.css 0 → 100644
+ 59
- 0
View file @ c1d31659
#race {
text-align: center;
background-color: #242021;
}
.race-truck{
background-image: url(./images/raceTrack.jpg);
background-repeat: repeat-x;
background-size: contain;
height:500px;
}
.cars{
position: absolute;
left: 0;
width: 250px;
}
.car1{
color: #ffebf7;
top: 0;
}
.car2{
color: #ba0000;
top: 50%;
}
.timer-bg{
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
width:100%;
height: 100%;
}
.timer,
.flag{
display: none;
position: absolute;
z-index: 101;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:200px;
color: white;
}
h1, h2, h3 {
color: #a2a2a2;
}
h3 { font-size: 25px; }
h2 { font-size: 35px; }
h1 { font-size: 50px; }
/* use these below */
.car1-color{
color: #ffebf7;
}
.car2-color{
color: #ba0000;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment