JSFiddle - React, Tailwind, and code Playground
HTML
<div class="topbanner">
<div class="logo"></div>
</div>
<div class="bigcontainer">
<div class="calculationcontainer">
<div class="levelinfo">Level: EXPERT</div>
<div class="restart">RESTART</div>
<div class="firstnumber"></div>
<div class="summary">+</div>
<div class="secondnumber"></div>
<div class="equal">=</div>
<input type="text" class="textbox" />
</div>
<div class="racingbox2">
<div class="car2"></div>
<div class="bulldozer"></div>
<div class="curtain1"></div>
<div class="curtain2"></div>
</div>
</div>
CSS
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%, #0076f4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8), color-stop(100%,#0076f4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%,#0076f4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%,#0076f4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%,#0076f4 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%,#0076f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0076f4',GradientType=0 ); /* IE6-9 */
}
.topbanner
{
width: 100%;
height: 150px;
}
.logo
{
margin-top: 30px;
margin-left: 20px;
width: 305px;
height: 83px;
background-image: url(logo.png);
}
.car
{
width: 63px;
height: 29px;
background-image: url(car.png);
position: absolute;
top: 40px;
left: 0px;
}
.homepagecurtain
{
width: 63px;
height: 63px;
background-color: rgb(245,245,245);
position: absolute;
right: -10px;
top: 30px;
}
.bigcontainer
{
width: 1000px;
height: 400px;
background-color: rgb(245,245,245);
border-radius: 10px;
margin: auto;
margin-top: -50px;
overflow: hidden;
position: relative;
}
.racingbox,
.start {
clear: both;
float: left;
}
.racingbox
{
width: 800px;
height: 100px;
margin: auto;
position: relative;
}
.start
{
display: inline-block;
padding: 20px;
margin-left: 100px;
margin-top: 3px;
color: white;
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%, #0076f4 100%);
background:...
JavaScript
$(document).ready(function () {
var jump = new Audio("jump.wav");
var bulldozer = new Audio("bulldozer.wav");
$('.restart').click(function () {
location.reload();
});
$(".textbox").focus();
setTimeout(areyouready, 2000);
function areyouready()
{
var movingbulldozer;
movingbulldozer = setInterval(function () {
var bulldozerright = parseInt($(".bulldozer").css("right"))
if (bulldozerright < 700) {
$(".bulldozer").css("right", "+=5");
}
else {
$(".bulldozer").css("right", "-=900");
}
}, 20);
var gameover;
gameover = setInterval(function () {
var bulldozerright = parseInt($(".bulldozer").css("right"))
var bulldozerwidth = 200
var bulldozerdistance = (bulldozerright - bulldozerwidth)
var cartop = parseInt($(".car2").css("top"))
if (bulldozerdistance == 200 && cartop == 120)
{
$(".car2").addClass("crashedcar");
bulldozer.play();
$(".textbox").val("game over");
$('.textbox').attr("disabled", true);
setTimeout(function( )
{
clearInterval( movingbulldozer );
}, 55000);
}
}, 10);
}
});