JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div id="title">Road<br>The Game<br>♦<br>Bl☠☠dpath</div>
<div id="award"></div>
<div id="score">
<h3>killed</h3>
<h2 class="kills">0</h2>
<div class="clear"></div>
</div>
<div class="road"></div>
<!-- some sounds -->
<audio id="scream0" src="http://upload.wikimedia.org/wikipedia/commons/b/b5/WilhelmScream.ogg" controls="" preload="auto" autobuffer="" volume="0"></audio>
<div id="credits">
<ul>
<li>
<b>Road: The Game</b> by<br>
<a href="http://codepen.io/Mobilpadde/owned" target="_blank">
<img src="https://secure.gravatar.com/avatar/7ec0cac01b6d505b2bbb2951a722e202?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" alt="User Avatar" width="30" height="30">
Mads Cordes
</a>
</li>
<li>
<b>Road: The Game ♦ Bl☠☠dpath</b> by<br>
<a href="http://codepen.io/TimPietrusky/owned" target="_blank">
<img src="https://secure.gravatar.com/avatar/34735b367f6bf8d5d2f38cb3d20d5e36?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" alt="User Avatar" width="30" height="30">
Tim Pietrusky
</a>
</li>
</ul>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Nosifer);
body {
font-family: 'Nosifer', cursive;
background:#000;
}
.road{
position: fixed;
width: 100%;
height: 100%;
opacity:.5;
background-image: linear-gradient(top, #fff 50%, #333 50%),
linear-gradient(left, #fff, #fff),
linear-gradient(top, #fff 50%, #333 50%),
linear-gradient(top, #c7c7c7 47%, #444 47%, #444 53%, #c7c7c7 53%),
linear-gradient(top, #c7c7c7 47%, #444 47%, #444 53%, #c7c7c7 53%),
linear-gradient(left, #629632 30%,
#333 30%,
#333 69%,
#629632 69%);
background-size: .5% 5%,
1% 100%,
.5% 5%,
2% 3%,
2% 3%,
100% 100%;
background-position: 40% -1%,
50% 0%,
60% -1%,
29% -1%,
70% -1%,
0% 0%;
background-repeat: repeat-y,
no-repeat,
repeat-y,
repeat-y,
repeat-y,
no-repeat;
background-image: -webkit-linear-gradient(top, white 50%, #333 50%), -webkit-linear-gradient(left, white, white), -webkit-linear-gradient(top, white 50%, #333 50%), -webkit-linear-gradient(top, #C7C7C7 47%, #444 47%, #444 53%, #C7C7C7 53%), -webkit-linear-gradient(top, #C7C7C7 47%, #444 47%, #444 53%, #C7C7C7 53%), -webkit-linear-gradient(left, #629632 30%, #333 30%, #333 69%, #629632 69%);
background-size: .5% 5%, 1% 100%, .5% 5%, 2% 3%, 2% 3%, 100% 100%;
background-position: 40% -1%, 50% 0%, 60% -1%, 29% -1%, 70% -1%, 0% 0%;
background-repeat: repeat-y, no-repeat, repeat-y, repeat-y, repeat-y, no-repeat;
}
.car{
width: 2%;
height: 5%;
border-radius: 20%;
position: fixed;
}
/* car lights */
.car.left:before,
.car.left:after,
.car.right:before,
.car.right:after {
position:absolute;
content:' ';
width:3px;
height:3px;
background:#fff;
border-radius:50%;
box-shadow:0 0 5px #000;
}
.car.left:before {left:4px;bottom:0}
.car.left:after {right:4px;bottom:0}
.car.right:before {left:4px;top:0;}
.car.right:after {right:4px;top:0;}
.car.red{
background:...
JavaScript
var doScore = function(color, r) {
if (r) {
$(".score li").remove();
} else {
$("<li></li>").css("background", color).appendTo("#score");
}
}, init = function() {
var award = {
1 : 'you are doing it', 4 : 'sick bastard',
10 : 'burn baby burn', 15 : 'keep on killing', 20 : 'killing spree',
25 : 'we can\'t stop here. this is bat country.',
30 : 'hit the blue', 35 : 'natural born killer', 40 : 'Nuclear launch detected',
45 : 'use the force, luke',
50 : 'M-m-m-monster kill', 55 : 'Finish him!', 65 : 'Snake. Snake? Snaaaake!',
70 : 'Eat shit and die!', 75 : 'Wake up and smell the ashes', 80 : 'why are you still doing this?',
100 : 'you know how to play', 110 : 'just some more you crazy bitch', 120 : 'and now with the support of V',
125 : 'you\'re fucking bad dad', 135 : 'sick motherfucker', 140 : 'wtf?', 145 : 'i don\'t have any new awards :(',
155 : 'please hit F5', 165 : 'PLEASE!!!', 170 : 'you know what?',
175 : '☠☠☠☠☠☠☠☠☠☠',
1000 : 'psychopath', 1337 : 'hitman'
};
/* Cars */
var addCar = function(pos) {
var classes = [ [ "left", "right" ], [ "slow", "fast" ],
[ "green", "yellow", "blue", "black", "gray" ] ], pos = (pos ? pos
: classes[0][Math.round(Math.random())]), speed = classes[1][Math
.round(Math.random())], color = classes[2][Math.round(Math
.random()
* (classes[2].length - 1))], top = sec = undefined;
if (pos == "left") {
top = "120%";
} else {
top = "-20%";
}
if (speed == "slow") {
sec = 1700;
} else {
sec = 1000;
}
$("<div class='car " + pos + " " + speed + " " + color + "'></div>")
.appendTo(".road").animate({
"top" : top
}, sec, "linear", function() {
...