El auto que pase completamente la meta será el ganador. El programa divide la pista en X cantidad de partes y de manera aleatoria le asigna a cada auto cuánto puede avanzar para cada trayecto que esté atravesando. Cuando el auto se pone “rojo” quiere decir que está teniendo algún problema técnico.
xxxxxxxxxx
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Carrera de autos</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style>
body { font-family: arial; text-align: center; padding: 0 0 40px 0; overflow:scroll;}
footer { margin-top: 50px; }
h1 { font-weight: normal; font-size: 30px; margin-bottom: 40px; text-transform: uppercase; }
#pista {width: 95%; width: calc(100% - 40px);
background: url(https://gist.githubusercontent.com/cbertelegni/0fe2aa58d88b375519620896fbbf764b/raw/894481168e69d5072fa3c25ff003bc1835fc27dd/bandera.png) 100% 90px no-repeat;
background-size: 60px;
}
.carril { width: 100%;
background: #ddd;
height: 60px; border-bottom: 1px solid #fff; position:relative;
margin-bottom: 100px
}
.line { position: absolute; top: 0; left: 0; width: 100%; height: 30px; border-bottom: 3px dashed #fff; opacity: 0.4;}
.corredor {
width: 75px; height: 55px;
position: absolute;
left:0;
top:-3px;
color: transparent;
font-weight: bold;
background: url(https://gist.githubusercontent.com/cbertelegni/0fe2aa58d88b375519620896fbbf764b/raw/894481168e69d5072fa3c25ff003bc1835fc27dd/car1.png) 0 0 no-repeat;
background-size: 100% 100%;
background-color: rgba(100, 100, 100, 0.1);
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
border-radius: 5px;
}
.carril .corredor.corredor_1 {
background-image: url(https://gist.githubusercontent.com/cbertelegni/0fe2aa58d88b375519620896fbbf764b/raw/894481168e69d5072fa3c25ff003bc1835fc27dd/car2.png);
}
#correr { display: block;
padding: 10px;
border-radius: 5px; cursor:pointer;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Carrera random</h1>
<p>
El auto que pase completamente la meta será el ganador.<br>
El programa divide la pista en X cantidad de partes y de manera aleatoria le asigna a cada auto cuánto puede avanzar para cada trayecto que esté atravesando.<br>
Cuando el auto se pone “rojo” quiere decir que está teniendo algún problema técnico.
</p>
<div id="pista">
</div>
<button id="correr">Correr!</button>
<footer>
<a href="https://twitter.com/cbertelegni" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @cbertelegni</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</footer>
<script>
var data = [
{name: "Nico", left:0, time:[4, 5, 9, 7, 6, 9, 10, 3, 9, 10]},
{name: "Cris", left:0, time:[9, 2, 3, 8, 5, 6, 7, 9, 8, 6]}
];
var pista = d3.select("#pista");
var carril = pista.selectAll(".carril")
.data(data)
.enter()
.append("div")
.attr("class", "carril");
carril.append("div").attr("class", "line");
var corredor = carril
.append("div").attr("class", function(d, i){return "corredor corredor_"+i; })
.style("left", "0");
corredor.html(function(d){return d.name; })
function carrera(){
var w = pista.node().getBoundingClientRect().width;
var cant_vueltas = 10;
var tramo = w/cant_vueltas;
var _10mts = 900; // tiempo multiplicador
// var scale = d3.scale.linear().domain([0, 100]).range([0, w])
var scale = d3.scale.linear().range([0, w])
var timer = null;
function get_data(i){
var n = Math.round(Math.random() *10);
return n;
}
for(var j =0; j < data.length; j++){
data[j].left = 0;
for (var i= 0; i<cant_vueltas; i++ ){
data[j].time[i] = get_data(i);
}
}
scale.domain([0, d3.max(data, function(d){
var r = 0;
d.time.map(function(x){ r += x; });
return r;
})]);
d3.select("#correr").style("display", "none");
corredor.style("left", "0px");
for (var i= 0; i< cant_vueltas; i++ ){
setTimeout(function(){
correr();
}, (_10mts)*i)
}
var vuelta = 0;
function correr(){
corredor
.style("background-color", function(d){
return d.time[vuelta] < 4 ? "rgba(255,0,0,0.3)" : "rgba(200,200,200,0.1)";
})
.transition()
.duration(_10mts)
.ease("linear")
.style("left", function(d){
d.left += scale(d.time[vuelta]);
return d.left+"px";
});
vuelta++;
if(vuelta >= cant_vueltas){
d3.select("#correr").style("display", "block");
}
}
}
d3.select("#correr").on("click", carrera);
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js