JoelPapiREX/juego.html

## juego.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/caballitos.css">
    <title> Hipodromo de los Dioses </title>
</head>
<body>
    <h1> Carreras de Caballos </h1>

    <!--Caballo1-->
    <div id ="contenedor1">
        <div id ="animacion1"></div>
    </div> <br> <br>
    <input type="button" onclick="myMove1()" value="Zeus">
    <br><br>


    <!--Caballo2-->
    <div id ="contenedor2">
    <div id ="animacion2"></div>
    </div> <br> <br>
    <input type="button" onclick="myMove2()" value="Pegaso"> <br><br>

    <!--Boton de Ganador-->
    <div id="winButton">
    <input type="button" value="Mostrar Ganador" id="ganador">
    </div>

    <!--Sonido del Caballo-->
    <audio id="myAudio">
        <source src="imagenes/Sonido de Caballo - Relincho - Sonidos de Animales(MP3_70K).mp3" type="audio/mpeg">
    </audio>

    <button onclick="playAudio()" type="button">Play Audio</button>
    <button onclick="pauseAudio()" type="button">Pause Audio</button>
<center><audio src="../joel/Sonido del caballo relinchando.mp3" controls></audio></center>


</body>
<script src="../joel/caballitos.js"></script>
<style>
/*caballo1*/
#contenedor1 {
  width: 400px;
  height: 50px;
  position: relative;
  background: #000000;
}
#animacion1 {
  width: 50px;
  height: 50px;
  position: absolute;
  background:url(../joel\580b57fbd9996e24bc43bc32.png);
}

/*caballo2*/
#contenedor2 {
    width: 400px;
    height: 50px;
    position: relative;
    background: #000000;
  }
  #animacion2 {
    width: 50px;
    height: 50px;
    position: absolute;
    background:url(\joel\587173477b7f6103e35c6cc4.png);
  }
  body{
           background: url(../joel/160229233753_billete_dolar_624x351_afp_nocredit.jpg);
           background-repeat:no-repeat;
           background-position:center;
           background-attachment: contain;
           background-size: cover;
           background-size: 100vw 100vh;
           background-attachment: fixed;
           margin: 0;
       }
</style>
<script>
function Caballo(nombre,raza){
    //propiedades
    this.nombre=nombre;
    this.raza=raza;
    this.avance = [];
    //metodos
    this.avanzar=avanzar;
    this.calcularAvance = calcularAvance;
}

function avanzar(){
    var aleatorio = Math.floor(Math.random() * 6) +1;
    this.avance.push(aleatorio);
    return aleatorio;
}

function calcularAvance(){
    //devuelve la suma de lo avanzado
    return this.avance.reduce(sumar);
}

function sumar(sumaTotal , avance){
    return sumaTotal + avance;
}


//Caballo 1
function myMove1() {
    var elem = document.getElementById("animacion1");
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++;
        elem.style.left = pos + "px";
      }
   }
}

//Caballo 2
  function myMove2() {
    var elem = document.getElementById("animacion2");
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++;
        elem.style.left = pos + "px";
      }
    }
}
</script>
</html>

## juego1.js
function caballo(nombre,edad){
    this.nombre=nombre;
    this.edad=edad;
    this.totalRecorrido=[];
    //metodos
this.avanzar=avanzar;
this.obtenerTotalRecorrido=obtenerTotalRecorrido;
}
function obtenerTotalRecorrido(){
    var total=this.totalRecorrido.reduce(sumar);
    return total;
}
function avanzar(){
    var distancia=Math.floor(Math.random()*6)+1
    this.totalRecorrido.push(distancia);
    console.log(this.nombre + " avanzo " + distancia)
    return distancia;
}
function sumar(sumaTotal,recorrido){
    return sumaTotal+recorrido;
}
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/caballitos.css">
	<title> Hipodromo de los Dioses </title>
	</head>
	<body>
	<h1> Carreras de Caballos </h1>

	<!--Caballo1-->
	<div id ="contenedor1">
	<div id ="animacion1"></div>
	</div> <br> <br>
	<input type="button" onclick="myMove1()" value="Zeus">
	<br><br>


	<!--Caballo2-->
	<div id ="contenedor2">
	<div id ="animacion2"></div>
	</div> <br> <br>
	<input type="button" onclick="myMove2()" value="Pegaso"> <br><br>

	<!--Boton de Ganador-->
	<div id="winButton">
	<input type="button" value="Mostrar Ganador" id="ganador">
	</div>

	<!--Sonido del Caballo-->
	<audio id="myAudio">
	<source src="imagenes/Sonido de Caballo - Relincho - Sonidos de Animales(MP3_70K).mp3" type="audio/mpeg">
	</audio>

	<button onclick="playAudio()" type="button">Play Audio</button>
	<button onclick="pauseAudio()" type="button">Pause Audio</button>
	<center><audio src="../joel/Sonido del caballo relinchando.mp3" controls></audio></center>


	</body>
	<script src="../joel/caballitos.js"></script>
	<style>
	/caballo1/
	#contenedor1 {
	width: 400px;
	height: 50px;
	position: relative;
	background: #000000;
	}
	#animacion1 {
	width: 50px;
	height: 50px;
	position: absolute;
	background:url(../joel\580b57fbd9996e24bc43bc32.png);
	}

	/caballo2/
	#contenedor2 {
	width: 400px;
	height: 50px;
	position: relative;
	background: #000000;
	}
	#animacion2 {
	width: 50px;
	height: 50px;
	position: absolute;
	background:url(\joel\587173477b7f6103e35c6cc4.png);
	}
	body{
	background: url(../joel/160229233753_billete_dolar_624x351_afp_nocredit.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment: contain;
	background-size: cover;
	background-size: 100vw 100vh;
	background-attachment: fixed;
	margin: 0;
	}
	</style>
	<script>
	function Caballo(nombre,raza){
	//propiedades
	this.nombre=nombre;
	this.raza=raza;
	this.avance = [];
	//metodos
	this.avanzar=avanzar;
	this.calcularAvance = calcularAvance;
	}

	function avanzar(){
	var aleatorio = Math.floor(Math.random() * 6) +1;
	this.avance.push(aleatorio);
	return aleatorio;
	}

	function calcularAvance(){
	//devuelve la suma de lo avanzado
	return this.avance.reduce(sumar);
	}

	function sumar(sumaTotal , avance){
	return sumaTotal + avance;
	}


	//Caballo 1
	function myMove1() {
	var elem = document.getElementById("animacion1");
	var pos = 0;
	var id = setInterval(frame, 5);
	function frame() {
	if (pos == 350) {
	clearInterval(id);
	} else {
	pos++;
	elem.style.left = pos + "px";
	}
	}
	}

	//Caballo 2
	function myMove2() {
	var elem = document.getElementById("animacion2");
	var pos = 0;
	var id = setInterval(frame, 5);
	function frame() {
	if (pos == 350) {
	clearInterval(id);
	} else {
	pos++;
	elem.style.left = pos + "px";
	}
	}
	}
	</script>
	</html>
	function caballo(nombre,edad){
	this.nombre=nombre;
	this.edad=edad;
	this.totalRecorrido=[];
	//metodos
	this.avanzar=avanzar;
	this.obtenerTotalRecorrido=obtenerTotalRecorrido;
	}
	function obtenerTotalRecorrido(){
	var total=this.totalRecorrido.reduce(sumar);
	return total;
	}
	function avanzar(){
	var distancia=Math.floor(Math.random()*6)+1
	this.totalRecorrido.push(distancia);
	console.log(this.nombre + " avanzo " + distancia)
	return distancia;
	}
	function sumar(sumaTotal,recorrido){
	return sumaTotal+recorrido;
	}