<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<h1>Piedra, papel o tijera</h1>
<style>
body{
text-align: center;
}
table{
border-collapse: collapse;
margin: 0 auto 10px auto;
border: 1px solid black;
}
th{
background-color: #;
color: pink;
padding: 10px 20px;
font-size: 18px;
border: 1px solid black;
}
td{
text-align: center;
font-size: 18px;
padding: 10px 20px;
border: 1px solid black;
}
button{
padding: 8px 15px;
margin: 5px;
cursor: pointer;
}
</style>

</head>
<body>

<table>
<tr>
<th>Jugador</th>
<th>Ordenador</th>
</tr>
<tr>
<td id="pj">0</td>
<td id="pc">0</td>
</tr>
</table>

<button onclick="resetear()">Resetear marcador</button>
<br>
<br>Elige tu opción
<br><br>

<button id="A1" onclick="clicken('piedra')">Piedra</button>
<button id="A2" onclick="clicken('papel')">Papel</button>
<button id="A3" onclick="clicken('tijera')">Tijera</button>

<br><br><span id="J"></span>
<br><span id="O"></span>

<br><br>Resultado : <h2><div id="R"></div></h2>

<script>

let jugadorPuntos = 0;
let maquinaPuntos = 0;

function clicken(jugador){

document.getElementById("J").innerHTML="El jugador elige "+jugador+"<br><img src='"+jugador+".png' width='100'>";

let opciones=["piedra","papel","tijera"];

let aleatorio=Math.floor(Math.random()*3);

let IA=opciones[aleatorio];

document.getElementById("O").innerHTML="El ordenador elige "+IA+"<br><img src='"+IA+".png' width='100'>";

let test={

piedra:{piedra:"empate",papel:"pierde",tijera:"gana"},

papel:{piedra:"gana",papel:"empate",tijera:"pierde"},

tijera:{piedra:"pierde",papel:"gana",tijera:"empate"}

};

let resultado = test[jugador][IA];

document.getElementById("R").innerHTML=resultado;

if(resultado=="gana"){
jugadorPuntos++;
}

if(resultado=="pierde"){
maquinaPuntos++;
}

document.getElementById("pj").innerHTML=jugadorPuntos;
document.getElementById("pc").innerHTML=maquinaPuntos;

}

function resetear(){
jugadorPuntos = 0;
maquinaPuntos = 0;
document.getElementById("pj").innerHTML = 0;
document.getElementById("pc").innerHTML = 0;
document.getElementById("J").innerHTML = "";
document.getElementById("O").innerHTML = "";
document.getElementById("R").innerHTML = "";
}

</script>

</body>
</html>