Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Estoy creando un juego de cartas y no se como continuar

Estas en el tema de Estoy creando un juego de cartas y no se como continuar en el foro de Javascript en Foros del Web. Buenas, antes que nada quiero decir que soy un novato en Javascript y en todo esto de la programación web, asi que pido disculpas si ...
  #1 (permalink)  
Antiguo 11/10/2014, 15:39
 
Fecha de Ingreso: septiembre-2010
Mensajes: 24
Antigüedad: 9 años
Puntos: 0
Exclamación Estoy creando un juego de cartas y no se como continuar

Buenas, antes que nada quiero decir que soy un novato en Javascript y en todo esto de la programación web, asi que pido disculpas si el codigo que mostraré a continuación no es "perfecto" del todo, me refiero a que el codigo funciona, pero quizas no esté muy "limpio".

El juego se llama Ronda, consiste en "emparejar" cartas de la mano con la mesa, por ejemplo si tengo un 3 en la mano, y en la mesa tambien hay un 3 entonces lo tomo.

Ya tengo una parte del juego, por ahora tengo un mazo que reparte 4 cartas en la mesa y luego 3 en la mano, el problema es que todavia no se como hacer para pasar las cartas de la mano a la mesa, por cada carta en la mano es un div, asi que quizas podria usar OnClick para enviar la carta del array "mano" al array "mesa", hasta ahi todo perfecto no? lo que todavia no se es como hacer para emparejar las cartas lanzadas con las cartas en la mesa, es decir como hacer para que el sistema reconozca que son iguales.

Y se complica un poco cuando por ejemplo si tengo el 3 en la mano, y en la mesa hay 3 y 4, pues debo tomar ambas cartas, algo asi como una especie de sucesión o escalera.

En fin mas que nada me preocupa lo de hacer que el sistema "reconozca y empareje" las cartas lanzadas por el usuario con las que hay en la mesa.

Aquí mi código:

Código HTML:
Ver original
  1. <p align="center"  hidden="true" id="tomacarta">
  2. <button onClick="tomarcartas()" >Tomar cartas</button> </p>
  3. <p align="center" id="repartemesa"><button onClick="repartemesa()" >Repartir mesa</button> </p>
  4. <p align="center" id="nuevo"><button onClick="nuevo()">Nuevo juego</button> </p>
  5. <br>
  6. <br>
  7. <div id="mano1" class="left"> </div>
  8. <div id="mano2" class="left"> </div>
  9. <div id="mano3" class="left"> </div>
  10. <div id="mazo"> </div>
  11. <div id="mesa"> </div>

Código Javascript:
Ver original
  1. var cartasmazo = ["unocopa.png", "unooro.png", "unobasto.png", "unoespada.png", "diezespada.png", "diezoro.png", "diezbasto.png", "diezcopa.png", "docecopa.png", "doceoro.png", "doceespada.png", "docebasto.png", "oncebasto.png", "onceoro.png", "oncecopa.png", "onceespada.png","dosoro.png", "dosespada.png", "doscopa.png", "dosbasto.png", "tresespada.png", "trescopa.png", "tresoro.png", "tresbasto.png", "cuatroespada.png", "cuatrobasto.png", "cuatrooro.png", "cuatrocopa.png", "cincoespada.png", "cincocopa.png", "cincooro.png", "cincobasto.png", "seisespada.png", "seiscopa.png", "seisoro.png", "seisbasto.png", "sieteespada.png", "sietecopa.png", "sieteoro.png", "sietebasto.png"];
  2.  
  3.  
  4. function tomarcartas(){
  5.  
  6. // Array shuffling prototype
  7.  
  8. Array.prototype.shuffle = function(){
  9.     var counter = this.length, temp, index;
  10.  
  11.     // While there are elements in the array
  12.     while (counter > 0) {
  13.         // Pick a random index
  14.         index = (Math.random() * counter--) | 0;
  15.  
  16.         // And swap the last element with it
  17.         temp = this[counter];
  18.         this[counter] = this[index];
  19.         this[index] = temp;
  20.        
  21.     }
  22.    
  23. };
  24. cartasmazo.shuffle();
  25. var cartasmano = [cartasmazo[0], cartasmazo[1], cartasmazo[2]];
  26. document.getElementById("mano1").innerHTML = "<p><img src="+cartasmano[0]+" id='cartamano1'>";
  27. document.getElementById("mano2").innerHTML = "<p><img src="+cartasmano[1]+" id='cartamano2'>";
  28. document.getElementById("mano3").innerHTML = "<p><img src="+cartasmano[2]+" id='cartamano3'>";
  29. cartasmazo.splice(0,3);
  30. document.getElementById("mazo").innerHTML = "<p align='center'>Quedan:"+cartasmazo.length+" cartas</p>" ;
  31. }

Código Javascript:
Ver original
  1. function repartemesa() {
  2.     document.getElementById("repartemesa").hidden = true ;
  3.     document.getElementById("tomacarta").hidden = false ;
  4.     Array.prototype.shuffle = function(){
  5.     var counter = this.length, temp, index;
  6.  
  7.     // While there are elements in the array
  8.     while (counter > 0) {
  9.         // Pick a random index
  10.         index = (Math.random() * counter--) | 0;
  11.  
  12.         // And swap the last element with it
  13.         temp = this[counter];
  14.         this[counter] = this[index];
  15.         this[index] = temp;
  16.        
  17.     }
  18. };
  19. cartasmazo.shuffle();
  20.     var cartasmesa = [cartasmazo[0], cartasmazo[1], cartasmazo[2], cartasmazo[3]];
  21.     document.getElementById("mesa").innerHTML = "<p align='center'><img src="+cartasmesa[0]+" id='cartamesa1'>"+"<img src="+cartasmesa[1]+" id='cartamesa2'>"+"<img src="+cartasmesa[2]+" id='cartamesa3'><img src="+cartasmesa[3]+" id='cartamesa4'></p>"
  22.     cartasmazo.splice(0,4);
  23.     document.getElementById("mazo").innerHTML = "<p align='center'>Quedan:"+cartasmazo.length+" cartas</p>" ;
  24. }

Y aquí una demostracion de como va el juego (ya se que las cartas no están recortadas perfectamente):

http://razor.260mb.org/

Y eso seria todo, si alguien me pudiera ayudar estaria muy agradecido.

Edit: Conseguí este tutorial de C# en internet pero no se como adaptarlo a mi proyecto, lo dejo por si ayuda a que me ayuden (valga la redundancia)

http://satalketo.com/2013/04/deck-of-cards-in-c/

Edit 2: Solucionado, tuve que volver a escribir casi todo el codigo desde cero para poder aplicar lo del tutorial de C#, para "emparejar" las cartas en la mesa usé JQuery y este script:

Código HTML:
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3.   <meta charset="utf-8">
  4.   <title>toArray demo</title>
  5.   <style>
  6.   span {
  7.     color: red;
  8.   }
  9.   </style>
  10.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  11. </head>
  12.  
  13. Reversed - <span></span>
  14.  
  15. <div>One</div>
  16. <div>Two</div>
  17. <div>Three</div>

Código Javascript:
Ver original
  1. function disp( divs ) {
  2.   var a = [];
  3.   for ( var i = 0; i < divs.length; i++ ) {
  4.     a.push( divs[ i ].innerHTML );
  5.   }
  6.   $( "span" ).text( a.join( " " ) );
  7. }
  8.  
  9. disp( $( "div" ).toArray().reverse() );



Saludos

Última edición por macr1408; 12/10/2014 a las 09:05
  #2 (permalink)  
Antiguo 13/10/2014, 02:48
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 8 años, 9 meses
Puntos: 206
Respuesta: Estoy creando un juego de cartas y no se como continuar

Sólo un consejo general:

Siempre hay que separar la lógica de negocio (en este caso, la lógica del juego) de la vista. Código para gestionar el juego por un lado, y código para dibujar el juego en pantalla por otro.

Primero desarrolla la lógica del juego, y pruébala asegurándote que todo funciona usando simplemente texto plano.

Cuando todo funcione bien, entonces empieza a pensar cómo dibujar el juego con HTML, tarea que te resultará mucho más sencilla.

¿Por qué se debe hacer así? Por dos motivos:

-Programar el juego es más sencillo. Primero programas la lógica, y la pruebas, hasta que funcione bien. Si no funciona bien, detectar errores y corregirlos es más fácil, porque sabes que la culpa está en el código de la lógica, y no en el código que dibuja el juego en pantalla. Y luego, cuando te pongas con la vista, sabrás que el problema está en la vista, y no en el código del juego.

-Puedes cambiar la vista mucho más fácilmente. Imagina que mañana quieres pintar el juego en un CANVAS, o SVG. Si tienes la lógica separada de la vista, sólo tendrás que cambiar la vista, tarea mucho más rápida.
  #3 (permalink)  
Antiguo 13/10/2014, 03:51
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 487
Antigüedad: 6 años, 7 meses
Puntos: 17
Respuesta: Estoy creando un juego de cartas y no se como continuar

Hola! primero muy buen juego alojado en el hosting :) .
Para ser nuevo usas bastantes funciones que por lo menos yo aún no he usado en JScript.

Por otro lado:
Buen consejo marlanga, no había pensando en eso tampoco de separar ambas lógica y vista del proyecto. Lo intentaré poner en práctica en algún proyecto posterior mio.

Saludos !!!
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1

Etiquetas: cartas, continuar, creando, funcion, html, juego
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:15.