Hola
sagdec, bienvenido.
Ese ejemplo tiene un problema. Toma cartas al azar, pero del mismo mazo completo. Cuando uno reparte las manos, se supone que no puede volver a dar un naipe que ya dio. Que aparezcan dos ases de picas en un juego es señal de que alguien está haciendo trampa.
Al repartir la primera carta se puede elgir del mazo completo, pero ya la segunda sale del mazo, menos la carta que ya se dio. Y la tercera de entre todas, excepto las dos primeras.
Te dejo un ejemplo, que pone cuatro cartas porque no me entraban las cinco, y no usa imágenes porque no tengo ganas de hacerlas. No likeaste las tuyas.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REPARTE NAIPES.</title>
<script type="text/javascript">
var num = ["A","2","3","4","5","6","7","8","9","10","J","Q","K"];
var pal = ["<div class='palo rojo'>♥</div>", "<div class='palo rojo'>♦</div>", "<div class='palo negro'>♣</div>", "<div class='palo negro'>♠</div>"];
var lomo = "▒▒▒<br>▒▒▒<br>▒▒▒"
var monte = [];
function baraja() {
var c, p, nueva;
for (p=0; p<4; p++){
for (c=0; c<13; c++) {
nueva = num[c] + pal[p];
monte.push(nueva);
}
}
}
function juega(){
if(monte.length>8){
for(i=0; i<8; i++) {
document.getElementById("txt").value = monte.join("\r\n");
var reparte, esta, claseColor;
var azar = Math.floor(Math.random() * monte.length);
//alert(azar)
reparte = monte.splice(azar , 1);
esta = document.getElementById("naipe"+i);
esta.innerHTML = reparte;
esta.className = "naipe "+esta.lastChild.className.split(" ")[1];
}
}
}
onload = baraja;
</script>
<style type="text/css">
body {background-color: #008000; font-size: 20px; }
.naipe {font-size: 2em; background-color: #ffffff; border-radius: .3em; width: 2em; height:3em; font-weight: bold; font-family: arial, verdana, sans-serif; padding: 0.2em; line-height: 1.5em; }
.palo {text-align: right; width: 2em; }
.rojo {color: #ff0000; }
.azul {color: #0000ff; letter-spacing: -0.06em; overflow: hidden; line-height: 1em; }
#naipe0{position: absolute; top: 5em; left: 10em; }
#naipe1{position: absolute; top: 5em; left: 15em; }
#naipe2{position: absolute; top: 5em; left: 20em; }
#naipe3{position: absolute; top: 5em; left: 25em; }
#naipe4{position: absolute; top: 10em; left: 10em; }
#naipe5{position: absolute; top: 10em; left: 15em; }
#naipe6{position: absolute; top: 10em; left: 20em; }
#naipe7{position: absolute; top: 10em; left: 25em; }
</style>
</head>
<body>
<textarea id=txt rows=53 cols=35></textarea>
<input type=button value="JUEGA" onclick="juega()">
<div class="naipe azul" id=naipe0>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe1>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe2>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe3>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe4>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe5>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe6>▒▒▒<br>▒▒▒<br>▒▒▒</div>
<div class="naipe azul" id=naipe7>▒▒▒<br>▒▒▒<br>▒▒▒</div>
</body>
</html>
Por supuesto que hay que hacer que se puedan cambiar las cartas y que un escript compare los valores para decidir quién gana o pierde. Lo que puse aquí es solamente una corrección al código posteado. Que, como ves, se podía haber dejado más completo.
Te espera un lindo trabajito, lleno de condicionales. Avisa cuando lo tengas hecho porque me gustaría verlo.
Saludos
furoya