JSFiddle - React, Tailwind, and code Playground

by dlformacion

HTML

<h1>Carreras de coches!!</h1>
<h2>Curso online de <b>Digital Learning</b>: <a href="http://www.digitallearning.es/curso-programacion-web-javascript.html">Programación Web con Javascript y jQuery</a></h2>
<p><strong>Autor: </strong><a href="http://www.vrivas.es">Víctor M. Rivas Santos</a></p>




<div class="pista">
<!--Carga desde web de vrivas.es-->
  <div class="calle"><img src="http://goo.gl/hkB4BR" id="c1" class="coche"/></div>
  <div class="calle"><img src="http://goo.gl/U94Jlx" id="c2" class="coche"/></div>
  <div class="calle"><img src="http://goo.gl/PMhGR9" id="c3" class="coche"/></div>
  <div class="calle"><img src="http://goo.gl/AxdqgK" id="c4" class="coche"/></div>
  <div class="calle"><img src="http://goo.gl/5SYyHJ" id="c5" class="coche"/></div>
  
 
</div>

<input type="button" id="empezar" value="¡Comenzar!">
<input type="button" id="reiniciar" value="¡Reiniciar!">

CSS

.pista {
  border: 1px solid blue;
  padding: 10px;
  margin-bottom: 2em;
  background-color: #fff;
}

.calle {
  border-bottom: 1px solid orange;
  padding: 3px;
}

.coche {
  margin-left: 0%;
  margin-top: 2%;
}

#reiniciar {
  display: none;
}
h1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #FA761E;
    margin: 15px;
}
h2 {
    font-size: 1.1em;
    margin: 0px 0px 7px 20px;
}
p {
    font-size: 1em;
    margin: 0px 0px 15px 20px;
}

JavaScript

// Máximo número de coches
var NUM_COCHES=5;

// Porcentaje en el que fijamos la meta
var META=85;

// Vector que almacena cada coche con su posición
var coches=new Array;

// Constructor de cada coche
function Coche( _num ) {
  this.num=_num;
  this.pos=0;

  // Método que incrementa la posición del coche
  this.avanza=function( _incPos ) {
    this.pos+=_incPos;
    $('#c'+this.num ).animate( {'margin-left': this.pos+'%'}, 2000 );
    return this.pos;
  }

  // Devolvemos el coche a la posición inicial
  this.reinicia=function( ) {
    this.pos=0;
    $('#c'+this.num ).animate( {'margin-left': this.pos+'%'}, 2000 );
  }

} // Fin de constructor de coche

// Inicialización del vector de coches
function inicializar_coches() {
  for( var i=0; i<NUM_COCHES; ++i) {
    coches[i]=new Coche( i+1 );
  }
}

// Realizar la carrera hasta que algún coche llegue a la meta
function realizar_carrera() {
  var max=0;
  var tmpPos;
  while( coches[max].pos<META ) {
    for( var j=0; j<NUM_COCHES; ++j ) {
      tmpPos=coches[j].avanza( Math.floor( Math.random()*10+1) );
      max=(tmpPos<coches[max].pos)?max:j;
    }
  }
}


// Devolver todos los coches a su posición inicial
function reiniciar_coches() {
  for( var i=0; i<NUM_COCHES; ++i) {
    coches[i].reinicia();
  }
}


// Inicializamos los coches y asignamos eventos al comenzar.
$(document).ready( function() {
  inicializar_coches();
    $('#empezar').click( function() {
    $(this).hide();
    $('#reiniciar').show();
    realizar_carrera();
    });
    $('#reiniciar').click( function() {
    $(this).hide();
    $('#empezar').show();    
    reiniciar_coches();
    });

});