Carrera Random

CARRERA RANDOM

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.

<!doctype html>
<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");

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