Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width: 200px;
            height: 200px;
            position: absolute;

        }
        #c2{
            top: 250px;
        }
        #c3{
            top: 450px;
        }
        #c4{
            top: 650px;
        }
        p{
            margin-top: 820px;
        }
    </style>
</head>
<script>

    var dinero=100;
    var apuesta=0;
    var mov1=0;
    var mov2=0;
    var mov3=0;
    var mov4=0;
    var distancia=0;
    var intervalo;
    var caballo=0;
    var caballoganador=0;


    function carga(){
        alert("Haz click en un caballo para apostar por el un dinerin")
    }

    function juego1(){
        apuesta=prompt("Cuanto dinero quieres apostar", 0);
        caballo=1
        if(dinero>0 && apuesta<=dinero){

            dinero=dinero-apuesta;
            document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            alert("Empieza la carrera");

            intervalo=setInterval(movimiento,200);
        }
        else{
            alert("No tienes dinero puro pringao");
        }
    }

    function juego2(){
        apuesta=prompt("Cuanto dinero quieres apostar", 0);
        caballo=2
        if(dinero>0 && apuesta<=dinero){

            dinero=dinero-apuesta;
            document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            alert("Empieza la carrera");

            intervalo=setInterval(movimiento,200);
        }
        else{
            alert("No tienes dinero puro pringao");
        }
    }

    function juego3(){
        apuesta=prompt("Cuanto dinero quieres apostar", 0);
        caballo=3
        if(dinero>0 && apuesta<=dinero){

            dinero=dinero-apuesta;
            document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            alert("Empieza la carrera");

            intervalo=setInterval(movimiento,200);
        }
        else{
            alert("No tienes dinero puro pringao");
        }
    }

    function juego4(){
        apuesta=prompt("Cuanto dinero quieres apostar", 0);
        caballo=4
        if(dinero>0 && apuesta<=dinero){

            dinero=dinero-apuesta;
            document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            alert("Empieza la carrera");

            intervalo=setInterval(movimiento,200);
        }
        else{
            alert("No tienes dinero puro pringao");
        }
    }

    function movimiento(){

        distancia=Math.floor(Math.random()*41);
        document.getElementById("c1").style.left=mov1+"px";
        mov1+=distancia;

        distancia=Math.floor(Math.random()*41);
        mov2+=distancia;
        document.getElementById("c2").style.left=mov2+"px";

        distancia=Math.floor(Math.random()*41);
        mov3+=distancia;
        document.getElementById("c3").style.left=mov3+"px";

        distancia=Math.floor(Math.random()*41);
        mov4+=distancia;
        document.getElementById("c4").style.left=mov4+"px";

        var limite=window.innerWidth-200;

        if(mov1>limite || mov2>limite || mov3>limite || mov4>limite){
            clearInterval(intervalo);
            ganador();
        }
    }

    function ganador(){
        if(mov1>mov2 && mov1>mov3 && mov1>mov4){
            caballoganador=1;
            if(caballo==caballoganador){
                alert("Ha ganado el 1, toma tu dinero");
                apuesta=apuesta*4;
                dinero+=apuesta;
                document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            }
            else{
                alert("Has perdido");
            }
        }
        if(mov2>mov1 && mov2>mov3 && mov2>mov4){
            caballoganador=2;
            if(caballo==caballoganador){
                alert("Ha ganado el 2, toma tu dinero");
                apuesta=apuesta*4;
                dinero+=apuesta;
                document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            }
            else{
                alert("Has perdido");
            }
        }
        if(mov3>mov1 && mov3>mov2 && mov3>mov4){
            caballoganador=3;
            if(caballo==caballoganador){
                alert("Ha ganado el 3, toma tu dinero");
                apuesta=apuesta*4;
                dinero+=apuesta;
                document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
            }
            else{
                alert("Has perdido");
            }
        }
        if(mov4>mov1 && mov4>mov3 && mov4>mov2){
            caballoganador=4;
            if(caballo==caballoganador){
                alert("Ha ganaod el 4, toma tu dinero");
                apuesta=apuesta*4;
                dinero+=apuesta;

            }
            else{
                alert("Has perdido");
            }
        }
        document.getElementById("dineros").innerHTML="Dinero: "+dinero+"€";
    }

    function reinicio(){
        document.getElementById("c1").style.left="0px";
        document.getElementById("c2").style.left="0px";
        document.getElementById("c3").style.left="0px";
        document.getElementById("c4").style.left="0px";
    }

</script>

<body onload="carga()">

<img src="caballo.jpg" id="c1" onclick="juego1()"><br>
<img src="caballo.jpg" id="c2" onclick="juego2()"><br>
<img src="caballo.jpg" id="c3" onclick="juego3()"><br>
<img src="caballo.jpg" id="c4" onclick="juego4()"><br>

<p id="dineros">Dinero: 100€</p>
<button id="boton" onclick="reinicio()">Reiniciar Caballos</button>


</body>
</html>