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