<!DOCTYPE html>
<html>
<head>
<title>Juego de damas</title>
<style>
table{
width: 50%;
margin: auto;
border: 20px solid #873600;
margin-top: -10px;
}
td{
padding: 50px;
position: relative;
}
p{
font-size: 50px;
font-weight: 900;
margin: 0;
position: absolute;
bottom: 20px;
}
.cl1{
background: #2C3E50;
}
.cl1:hover{
background-color: #888;
}
.cl2:hover{
background-color: #16A085;
}
</style>
<script type="text/javascript">
var colum;
var fila = 1;
var numant = 1;
var n = 0;
function capturar(a){
b = a;
}
function capturar1(x){
n = parseInt(x);
}
function mover(){
cs = document.getElementById(b);
if(n == 3 && (numant == 1 || numant == 2 || numant == 5 || numant == 6)){
cs.innerHTML = "◯";
if (numant==1) {
cs1 = document.getElementById("l1");
cs1.innerHTML = "";
}
if(numant==2){
cs1 = document.getElementById("l2");
cs1.innerHTML = "";
}
if(numant==5){
cs1 = document.getElementById("l5");
cs1.innerHTML = "";
}
if (numant==6) {
cs1 = document.getElementById("l6");
cs1.innerHTML = "";
}
numant = 3;
movimientos(3, "C");
}
if(n==1 && numant==3){
cs.innerHTML = "◯";
cs1 = document.getElementById("l3");
cs1.innerHTML = "";
numant = 1;
movimientos(4, "D");
}
if(n==8 && numant==6){
cs.innerHTML = "◯";
cs1 = document.getElementById("l6");
cs1.innerHTML = "";
numant = 8;
movimientos(1, "A");
}
if(n==2 && (numant == 3 || numant == 4)){
cs.innerHTML = "◯";
if(numant==3){
cs1 = document.getElementById("l3");
cs1.innerHTML = "";
}
if (numant==4) {
cs1 = document.getElementById("l4");
cs1.innerHTML = "";
}
numant = 2;
movimientos(4, "B");
}
if(n==4 && (numant==2 || numant==6)){
cs.innerHTML = "◯";
if (numant==2) {
cs1 = document.getElementById("l2");
cs1.innerHTML = "";
}
if (numant==6) {
cs1 = document.getElementById("l6");
cs1.innerHTML = "";
}
numant = 4;
movimientos(3, "A");
}
if(n==5 && (numant==3 || numant==7)){
cs.innerHTML = "◯";
if (numant==3) {
cs1 = document.getElementById("l3");
cs1.innerHTML = "";
}
if (numant==7) {
cs1 = document.getElementById("l7");
cs1.innerHTML = "";
}
numant = 5;
movimientos(2, "D");
}
if(n==6 && (numant==4 || numant==8 || numant==3 || numant==7)){
cs.innerHTML = "◯";
if (numant==4) {
cs1 = document.getElementById("l4");
cs1.innerHTML = "";
}
if (numant==8) {
cs1 = document.getElementById("l8");
cs1.innerHTML = "";
}
if (numant==3) {
cs1 = document.getElementById("l3");
cs1.innerHTML = "";
}
if (numant==7) {
cs1 = document.getElementById("l7");
cs1.innerHTML = "";
}
numant = 6;
movimientos(2, "B");
}
if(n==7 && (numant == 6 || numant == 5)){
cs.innerHTML = "◯";
if(numant==5){
cs1 = document.getElementById("l5");
cs1.innerHTML = "";
}
if (numant==6) {
cs1 = document.getElementById("l6");
cs1.innerHTML = "";
}
numant = 7;
movimientos(1, "C");
}
}
function movimientos(n1, n2){
fil = document.getElementById("f");
col = document.getElementById("c");
fil.innerHTML = n1;
col.innerHTML = n2;
}
</script>
</head>
<body>
<table border="0" cellspacing="0">
<tr>
<td class="cl1" onclick="capturar('l8'); capturar1('8'); mover()"><p id="l8"></p></td>
<td class="cl2"><p></p></td>
<td class="cl1" onclick="capturar('l7'); capturar1('7'); mover()"><p id="l7"></p></td>
<td class="cl2"><p></p></td>
</tr>
<tr>
<td class="cl2"><p onclick=""></p></td>
<td class="cl1" onclick="capturar('l6'); capturar1('6'); mover()"><p id="l6"></p></td>
<td class="cl2"><p onclick=""></p></td>
<td class="cl1" onclick="capturar('l5'); capturar1('5'); mover()"><p id="l5"></p></td>
</tr>
<tr>
<td class="cl1" onclick="capturar('l4'); capturar1('4'); mover()"><p id="l4"></p></td>
<td class="cl2"><p></p></td>
<td class="cl1" onclick="capturar('l3'); capturar1('3'); mover()"><p id="l3"></p></td>
<td class="cl2"><p></p></td>
</tr>
<tr>
<td class="cl2"><p onclick=""></p></td>
<td class="cl1" onclick="capturar('l2'); capturar1('2'); mover()"><p id="l2"></p></td>
<td class="cl2"><p></p></td>
<td class="cl1" onclick="capturar('l1'); capturar1('1'); mover()"><p id="l1">◯</p></td>
</tr>
</table>
<table border="1">
<tr>
<td><p id="f">4</p></td>
<td><p id="c">D</p></td>
</tr>
</table>
</body>
</html>