juego en JS

sagdec · #1 (**permalink**) 26/04/2012, 19:34

Que tal compañeros, soy nuevo en esto de JS lo que estoy haciendo es un juego de poker, lo que tengo hasta el momento es que me muestra las 5 cartas aleatoriamente y poder cambiarlas con clic del mouse, tambien tengo para que no se me repitan las imagen, mi duda es como puedo hacer para sacar las jugadas es decir que me aparezca ya sea un alert o algo asi y me diga tienes un par o tienes dos pares o una tercia, en fin hacer algunas jugadas de principio serian las mas basicas ya despues implementaria las jugadas mas complejas.

les dejo algo de codigo para que vean como esta quedando:

Aqui tengo el arreglo de mis cartas, solo pongo una parte para que vean como esta conformado:

function cambiar(){
imag = new Array();
imag[0] = 'Corazones/A-corazones.jpg'; imag[12] = 'Picas/A-picas.jpg';
imag[1] = 'Corazones/2-corazones.jpg'; imag[13] = 'Picas/2-picas.jpg';
imag[2] = 'Corazones/3-corazones.jpg'; imag[14] = 'Picas/3-picas.jpg';
imag[3] = 'Corazones/4-corazones.jpg'; imag[15] = 'Picas/4-picas.jpg';
imag[4] = 'Corazones/5-corazones.jpg'; imag[16] = 'Picas/5-picas.jpg';
imag[5] = 'Corazones/6-corazones.jpg'; imag[17] = 'Picas/6-picas.jpg';
imag[6] = 'Corazones/7-corazones.jpg'; imag[18] = 'Picas/7-picas.jpg'; ...

Ahora obtengo un valor random y lo muestro en una tabla, la tabla esta dividida en 5 partes y en cada uno se muestra una carta:
imgaleatoria = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
imgaleatoria2 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
imgaleatoria3 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
imgaleatoria4 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
imgaleatoria5 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'

document.getElementById('mostrarimagen').innerHTML = imgaleatoria;
document.getElementById('mostrarimagen2').innerHTM L = imgaleatoria2;
document.getElementById('mostrarimagen3').innerHTM L = imgaleatoria3;
document.getElementById('mostrarimagen4').innerHTM L = imgaleatoria4;
document.getElementById('mostrarimagen5').innerHTM L = imgaleatoria5;

Con un boton llamo a la funcion y me aparecen las 5 cartas, cada vez que presiono el boton me genere otras 5 cartas nuevas, pero no se como puedo hacer para sacar las jugadas, si alguien tiene una idea o algo que me pudiera servir se lo agradeceria.

salu2

furoya · #2 (**permalink**) 27/04/2012, 22:41

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

sagdec · #3 (**permalink**) 28/04/2012, 17:26

Hola que tal ya lo tenia para que no me repitiera cartas solo que no lo puse, hice comparaciones con un while y asi, si me repite una carta aplicara un nuevo random asi lo tengo:

Cita:

while(imgaleatoria2 == imgaleatoria){
imgaleatoria2 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen2').innerHTM L = imgaleatoria2;
}

while(imgaleatoria3 == imgaleatoria || imgaleatoria3 == imgaleatoria2)
imgaleatoria3 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen3').innerHTM L = imgaleatoria3;

while(imgaleatoria4 == imgaleatoria || imgaleatoria4 == imgaleatoria2 || imgaleatoria4 == imgaleatoria3)
imgaleatoria4 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen4').innerHTM L = imgaleatoria4;

while(imgaleatoria5 == imgaleatoria || imgaleatoria5 == imgaleatoria2 ||
imgaleatoria5 == imgaleatoria3 || imgaleatoria5 == imgaleatoria4)
imgaleatoria5 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen5').innerHTM L = imgaleatoria5;

Entonces lo que buscaba era tomar el valor del arreglo y no la imagen asi que tube que cambiar del codigo anterior que puse la forma de tomar la imagen y es a traves del numero del arreglo:

Cita:

num1 = Math.floor(48 * Math.random());
imgaleatoria = '<img src="'+imag[num1]+'">'

num2 = Math.floor(48 * Math.random());
imgaleatoria2 = '<img src="'+imag[num2]+'">'

num3 = Math.floor(48 * Math.random());
imgaleatoria3 = '<img src="'+imag[num3]+'">'

num4 = Math.floor(48 * Math.random());
imgaleatoria4 = '<img src="'+imag[num4]+'">'

num5 = Math.floor(48 * Math.random());
imgaleatoria5 = '<img src="'+imag[num5]+'">'

Ahora lo que busco que no se si se pueda es asignar 4 valores del arreglo a una variable para que esa variable compararla y asi saber que juagas tengo, me explico mejor tomar los valores del arreglo de los 4 ases que serian [0,12,24,36] y tenerlos en una variable para que al momento de que me salga uno de esos valores poder compararlos con otro campo donde los muestro, creo que es un poco dificil o reborujado pero lo que me falta es sacar las jugadas espero me puedas echar una mano.

saludos

El codigo completo es este para que lo cheques por si hay duda jeje

Cita:

<html>
<head>
<script language="JavaScript">
function cambiar(){
imag = new Array();
imag[0] = 'Corazones/A-corazones.jpg'; imag[12] = 'Picas/A-picas.jpg';
imag[1] = 'Corazones/2-corazones.jpg'; imag[13] = 'Picas/2-picas.jpg';
imag[2] = 'Corazones/3-corazones.jpg'; imag[14] = 'Picas/3-picas.jpg';
imag[3] = 'Corazones/4-corazones.jpg'; imag[15] = 'Picas/4-picas.jpg';
imag[4] = 'Corazones/5-corazones.jpg'; imag[16] = 'Picas/5-picas.jpg';
imag[5] = 'Corazones/6-corazones.jpg'; imag[17] = 'Picas/6-picas.jpg';
imag[6] = 'Corazones/7-corazones.jpg'; imag[18] = 'Picas/7-picas.jpg';
imag[7] = 'Corazones/8-corazones.jpg'; imag[19] = 'Picas/8-picas.jpg';
imag[8] = 'Corazones/9-corazones.jpg'; imag[20] = 'Picas/9-picas.jpg';
imag[9] = 'Corazones/J-corazones.jpg'; imag[21] = 'Picas/J-picas.jpg';
imag[10] = 'Corazones/Q-corazones.jpg'; imag[22] = 'Picas/Q-picas.jpg';
imag[11] = 'Corazones/K-corazones.jpg'; imag[23] = 'Picas/K-picas.jpg';

imag[24] = 'Diamantes/A-diamantes.jpg'; imag[36] = 'Trebol/A-trebol.jpg';
imag[25] = 'Diamantes/2-diamantes.jpg'; imag[37] = 'Trebol/2-trebol.jpg';
imag[26] = 'Diamantes/3-diamantes.jpg'; imag[38] = 'Trebol/3-trebol.jpg';
imag[27] = 'Diamantes/4-diamantes.jpg'; imag[39] = 'Trebol/4-trebol.jpg';
imag[28] = 'Diamantes/5-diamantes.jpg'; imag[40] = 'Trebol/5-trebol.jpg';
imag[29] = 'Diamantes/6-diamantes.jpg'; imag[41] = 'Trebol/6-trebol.jpg';
imag[30] = 'Diamantes/7-diamantes.jpg'; imag[42] = 'Trebol/7-trebol.jpg';
imag[31] = 'Diamantes/8-diamantes.jpg'; imag[43] = 'Trebol/8-trebol.jpg';
imag[32] = 'Diamantes/9-diamantes.jpg'; imag[44] = 'Trebol/9-trebol.jpg';
imag[33] = 'Diamantes/J-diamantes.jpg'; imag[45] = 'Trebol/J-trebol.jpg';
imag[34] = 'Diamantes/Q-diamantes.jpg'; imag[46] = 'Trebol/Q-trebol.jpg';
imag[35] = 'Diamantes/K-diamantes.jpg'; imag[47] = 'Trebol/K-trebol.jpg';

num1 = Math.floor(48 * Math.random());
imgaleatoria = '<img src="'+imag[num1]+'">'

num2 = Math.floor(48 * Math.random());
imgaleatoria2 = '<img src="'+imag[num2]+'">'

num3 = Math.floor(48 * Math.random());
imgaleatoria3 = '<img src="'+imag[num3]+'">'

num4 = Math.floor(48 * Math.random());
imgaleatoria4 = '<img src="'+imag[num4]+'">'

num5 = Math.floor(48 * Math.random());
imgaleatoria5 = '<img src="'+imag[num5]+'">'

document.getElementById('mostrarimagen').innerHTML = imgaleatoria;
document.getElementById('mostrarimagen2').innerHTM L = imgaleatoria2;
document.getElementById('mostrarimagen3').innerHTM L = imgaleatoria3;
document.getElementById('mostrarimagen4').innerHTM L = imgaleatoria4;
document.getElementById('mostrarimagen5').innerHTM L = imgaleatoria5;

while(imgaleatoria2 == imgaleatoria){
imgaleatoria2 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen2').innerHTM L = imgaleatoria2;
}

while(imgaleatoria3 == imgaleatoria || imgaleatoria3 == imgaleatoria2)
imgaleatoria3 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen3').innerHTM L = imgaleatoria3;

while(imgaleatoria4 == imgaleatoria || imgaleatoria4 == imgaleatoria2 || imgaleatoria4 == imgaleatoria3)
imgaleatoria4 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen4').innerHTM L = imgaleatoria4;

while(imgaleatoria5 == imgaleatoria || imgaleatoria5 == imgaleatoria2 ||
imgaleatoria5 == imgaleatoria3 || imgaleatoria5 == imgaleatoria4)
imgaleatoria5 = '<img src="'+imag[Math.floor(48 * Math.random())]+'">'
document.getElementById('mostrarimagen5').innerHTM L = imgaleatoria5;

}
</script>
</head>
<body>
<hr>

<input type="button" Value="Mostrar Cartas" onClick="cambiar()">
<hr>
<table width="1000" border="0" cellspacing="1" cellpadding="1" height="260">
<tr>
<td onClick="cambiar1()" id="mostrarimagen"></td>
<td onClick="cambiar2()" colspan="2" id="mostrarimagen2"></td>
<td onClick="cambiar3()" colspan="2" id="mostrarimagen3"></td>
<td onClick="cambiar4()" colspan="2" id="mostrarimagen4"></td>
<td onClick="cambiar5()" colspan="2" id="mostrarimagen5"></td>
</tr>
</table>

</body>
</html>

No se como linkear lo de las imagenes jeje pero asi tengo el funcionamiento solo me falta sacar las jugadas ya sea con un boton o automaticamente espero me eches la mano porfa

saludos de nuevo

furoya · #4 (**permalink**) 29/04/2012, 08:37

No había mirado que éste es tu primer post. Aunque un poco tarde, bienvenido al Foro.

Seguramente estás haciendo un ejercicio. Porque es bastante improbable que intentes poner un juego de poker on line hecho en javascript, aún cuando estés jugando contra la máquina como es tu caso. Entonces aparece otro problema, del que hablamos más tarde; ahora vuelvo un poco al asunto del reparto.

Me doy cuenta de que no vas a utilizar todo el mazo hasta terminarlo, pero no estás sacando 5, ni siquiera es seguro que saques 10, porque pueden ser hasata 20 cartas al azar. Y un método que pruebe hasta encontrar una que no esté repartida, no es muy eficiente.

Si vas a hacer un array con todos los valores, tiene sentido guardar en una variable cada mano según su ítem de naipes y luego compararlos con el array de puntajes. Entonces el ejemplo que puse arriba no sirve, porque la idea era dar las cartas y una vez que están las manos finales capturar sus combinaciones de número y color.

Ahora bien, el gran invento sería asignar un ítem (que seguramente terminará siendo de seudo array asociativo) o un nuevo elemento (que convierte al array en bidimensional) para cada imagen, y que la comparación te de inmediatamente la mano ganadora.
Teniendo en cuenta las reglas del poker, va a ser difícil.

La idea de empezar algo así es que ya tienes el método y decidiste aplicarlo al juego. Hacerlo al revés te obliga a hacer más de una versión y luego comparar el rendimiento de cada una.

Como te avisé más arriba, la primera prueba que yo haría es meter una batería de condicionales anidados.
Si bien el poker no debe tener más de 10 combinaciones (no me acuerdo cómo se juega, no soy afecto a los juegos de cartas) dentro de cada una hay varias posibilidades dependiendo de sus valores y colores. Así que en primer lugar vas a tener que asignar a cada mano usando switch; continue; break (mejor que if; else if; else) un puntaje "interno" para saber cuál es el mejor valor que le puede sacar.
Después, con el mismo método, las vas probando del mayor al menor puntaje del poker, hasta confirmar cual jugador tiene el más alto.

Creo que el mayor es la Escalera Real, así que la primer prueba debe ser si todas las cartas son del mismo palo, y si es así, si la numeración es continuada del 10 al 14; y le asignas el puntaje más alto. Si no es, probarás con la Escalera Común, que siguen siendo del mismo palo, pero empiezan en otro número distinto del 10; y si es le das un punto menos que a la anterior. Si no, pruebas con el Poker ...

También deberías comparar los valores máximos de los naipes en cada mano, por si hay que desempatar; y guardarlos con el puntaje.

Todo esto es más que obvio. Si estás haciendo este ejercicio ya tienes suficiente conocimiento como para saberlo. Quizá estés esperando que alguien lo haga por ti, pero de esa forma no vas a practicar. Si buscas un "socio" para compartir experiencia, va a tener que ser uno que también esté empezando y se quiera meter con algo que es un trabajo de esclavos y que sólo sirve como práctica.

Por otro lado, ¿cómo piensas hacer para que la máquina "decida" cuál puede ser su mejor jugada?. Allí el trabajo de cálculo es tremendo. Y más si no hace trampa, y en verdad ignora qué cartas te tocaron.

Insisto, cuando lo termines me gustaría verlo posteado o linkeado (sí, mejor linkeado) en el Foro.

Mucha suerte con el proyecto. Hay que tener valor para plantearse un trabajo así. (Aquí va un emoticón de sacarse el sombrero, pero no hay.)

P.D.: ¿Y por qué faltan los dieces?.

sagdec · #5 (**permalink**) 29/04/2012, 17:35

Que tal pues si en verdad es un gran trabajo en el que me meti, la falta de los dieces se debe a que encontre imagenes de las cartas y las corte pero no venia el 10 jajaja y como me gustaron como se veian asi las deje, ya seria cuestion de hacer la carta 10.
Por otro lado se me esta dificultando el hacer las jugadas, ya tengo una idea pero no es precisamente la mas eficiente y andaba buscando ideas de como poder hacerlo, otra cosa es que pues no busco aun hacerlo contra la maquina primeramente busco que me funcione jejeje y de las jugadas pues en primera instancia busco las mas sencillas y basicas (pares, tercias, poker, full house), que son las mas faciles por un decir y pues seguire buscando haber que tal lo hago para que funcione.

saludos.