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

[macr1408]

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:

<p align="center"  hidden="true" id="tomacarta">
<button onClick="tomarcartas()" >Tomar cartas</button> </p>
<p align="center" id="repartemesa"><button onClick="repartemesa()" >Repartir mesa</button> </p>
<p align="center" id="nuevo"><button onClick="nuevo()">Nuevo juego</button> </p>
<br>
<br>
<div id="mano1" class="left"> </div>
<div id="mano2" class="left"> </div>
<div id="mano3" class="left"> </div>
<div id="mazo"> </div>
<div id="mesa"> </div>
 

Código Javascript:

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"];
 
 
function tomarcartas(){
 
// Array shuffling prototype
 
Array.prototype.shuffle = function(){
    var counter = this.length, temp, index;
 
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = (Math.random() * counter--) | 0;
 
        // And swap the last element with it
        temp = this[counter];
        this[counter] = this[index];
        this[index] = temp;
        
    }
    
};
cartasmazo.shuffle();
var cartasmano = [cartasmazo[0], cartasmazo[1], cartasmazo[2]];
document.getElementById("mano1").innerHTML = "<p><img src="+cartasmano[0]+" id='cartamano1'>";
document.getElementById("mano2").innerHTML = "<p><img src="+cartasmano[1]+" id='cartamano2'>";
document.getElementById("mano3").innerHTML = "<p><img src="+cartasmano[2]+" id='cartamano3'>";
cartasmazo.splice(0,3);
document.getElementById("mazo").innerHTML = "<p align='center'>Quedan:"+cartasmazo.length+" cartas</p>" ;
}
 

Código Javascript:

function repartemesa() {
    document.getElementById("repartemesa").hidden = true ;
    document.getElementById("tomacarta").hidden = false ;
    Array.prototype.shuffle = function(){
    var counter = this.length, temp, index;
 
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = (Math.random() * counter--) | 0;
 
        // And swap the last element with it
        temp = this[counter];
        this[counter] = this[index];
        this[index] = temp;
        
    }
};
cartasmazo.shuffle();
    var cartasmesa = [cartasmazo[0], cartasmazo[1], cartasmazo[2], cartasmazo[3]];
    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>"
    cartasmazo.splice(0,4);
    document.getElementById("mazo").innerHTML = "<p align='center'>Quedan:"+cartasmazo.length+" cartas</p>" ;
}
 

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:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toArray demo</title>
  <style>
  span {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
Reversed - <span></span>
 
<div>One</div>
<div>Two</div>
<div>Three</div>
 

Código Javascript:

function disp( divs ) {
  var a = [];
  for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
  }
  $( "span" ).text( a.join( " " ) );
}
 
disp( $( "div" ).toArray().reverse() );
 

Saludos

[marlanga]

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.

[HackID1]

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 !!!