const btJugar = document.getElementById('jugar');
let resptServidor
const seleccTu = document.getElementById('selecc_tu')
const seleccPc = document.getElementById('selecc_pc')
const mensaje = document.getElementById('mensaje')
let round = document.getElementById('round')
let cerrar = document.getElementById('cerrar')
let punt = document.querySelector('.tu .puntuacion')
let puntPc = document.querySelector('.PC .puntuacion')
const mensajeOpor = document.querySelector('.peq')
const usarOpor = document.getElementById('usar_opor')
const nodeListCorazon = document.querySelectorAll('.oportunidades i')
let oportunidades = 3
let setInterval1
let boolean = false
//Solicitar información al servidor, pero en este caso no lo haré con él, haré un Mat.random()
function llamadaAlServidor() {
let http_request
//comprobar compatibilidad de navegadores
if (window.XMLHttpRequest) {//compruebo si existe éste método moderno
http_request = new XMLHttpRequest()//creo una instancia de la clase
if (http_request.overrideMimeType) {//verifico si tiene el método "overrideMimeType", método utilizado en navegadores antiguos como Firefox para cambiar el tipo MIME(tipo de dato a recibir)
http_request.overrideMimeType('text/xml')//mirar en google tipos de MIME
}
} else if (window.ActiveXObject) {//para navegadores viejos como Internet Explorer
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");//Intenta crear una instancia de ActiveXObject usando el progID "Msxml2.XMLHTTP" que es una versión más reciente del componente XMLHTTP de Microsoft
} catch (e) {//Si la línea anterior falla (por ejemplo, porque el navegador no reconoce "Msxml2.XMLHTTP"), se captura el error con catch(e) y se intenta otra alternativa.
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");//Esta es la versión más antigua del objeto XMLHTTP de Microsoft, usada en versiones incluso anteriores del navegador. Se intenta esta opción como respaldo si "Msxml2.XMLHTTP" no está disponible.
} catch (e) { }//Si incluso esta versión falla, se captura el error, pero no se hace nada (bloque catch vacío).Esto significa que si ninguna de las dos versiones funciona, no se lanza una excepción ni se da un mensaje de error. Simplemente http_request queda sin valor.
}
}//termino de comprobar compatibilidad
//compruebo si la petición se hizo con éxito
http_request.onreadystatechange = () => {
if (http_request.readyState == 4) {//revisa el estado de la petición , mirar abajo los valores de la propiedad "readyState",el estado 4 es que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.
if (http_request.status == 200) {//verificar si la petición fue exitosa, ".status" es una propiedad que devuelve el código de estado HTTP de la respuesta, y 200 es el código HTTP que significa OK.(mirar abajo NOTAS)
resptServidor = http_request.responseText//guardo en una variable global la respuesta
console.log(resptServidor)
} else {
console.error('Petición fallida ' + http_request.status)
}
}
}
http_request.open('GET', 'http://10.10.1.94/curso_web_2025/ppt.php', true);//Configuro la información antes de enviar al servidor, el primer parámetro es el método en que enviará u obtendrá la información(GET, POST, HEAD, en mayúsculas para más compatiblidad con Firefox), luego la url con el dominio exacto, y el último parámetro "true"(indica asincronía, por lo que el código después de esa línea aunque no haya recibido respuesta seguirá ejecutándose) o "false"(lo contrario ,sincrono).
http_request.send()/*Envío de la solicitud u petición .El parámetro en el método send() puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición; la información se debe enviar en forma de cadena, por ejemplo: name=value&anothername=othervalue&so=on
Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
De otro modo el servidor descartará la información.
Ejemplo:
http_request.setRequestHeader("Content-Type", "application/json");
http_request.send(JSON.stringify({ nombre: "Ana", edad: 30 }));
*/
}
function estilosMensajeYoport(){
mensaje.style.visibility = 'hidden'
usarOpor.style.backgroundColor = 'rgba(0, 128, 0, 0.397)'
usarOpor.style.color = 'rgb(198, 212, 198)'
clearInterval(setInterval1)
}
function opor(){
if(oportunidades == 0){
usarOpor.removeEventListener('click',opor)
return
}
oportunidades -= 1
nodeListCorazon[oportunidades].style.color = 'rgba(217, 235, 217, 0.100)'
estilosMensajeYoport()
console.log(oportunidades)
}
function hasGanado() {
punt.textContent = Number(punt.textContent) + 1
setTimeout(() => {
seleccTu.innerText = ''
seleccPc.innerText = ''
mensajeOpor.style.display = 'none'
mensaje.querySelector('p').innerText = 'HAS GANADO'
mensaje.style.visibility = 'visible'
mensaje.style.width = '80%'
mensaje.style.height = '70%'
}, 900)
}
function hasPerdido() {
puntPc.textContent = Number(puntPc.textContent) + 1
setTimeout(() => {
seleccTu.innerText = ''
seleccPc.innerText = ''
mensaje.querySelector('p').innerText = 'HAS PERDIDO'
mensajeOpor.style.display = 'block'
mensaje.style.visibility = 'visible'
mensaje.style.width = '80%'
mensaje.style.height = '70%'
}, 900)
let escalado = false;
setInterval1 = setInterval(() => {
usarOpor.style.backgroundColor = '#66ff00'
usarOpor.style.color = '#000000'
usarOpor.style.transform = escalado ? 'scale(1)' : 'scale(1.2)';
escalado = !escalado;
}, 900);
usarOpor.addEventListener('click',opor)
}
function compararResultados() {
let seleccion = seleccTu.innerText.toLocaleLowerCase()
if (resptServidor == seleccion) {
mensajeOpor.style.display = 'none'
seleccTu.innerText = ''
mensaje.querySelector('p').innerText = 'EMPATE (repetir round)'
mensaje.style.visibility = 'visible'
mensaje.style.width = '80%'
mensaje.style.height = '70%'
return
}
const ganaJugador =
(seleccion === 'piedra' && resptServidor === 'tijeras') ||
(seleccion === 'tijeras' && resptServidor === 'papel') ||
(seleccion === 'papel' && resptServidor === 'piedra')
if (ganaJugador) {
hasGanado()
} else {
hasPerdido()
}
}
btJugar.addEventListener('click', () => {
let numero = Math.floor(Math.random() * 3)
switch (numero) {
case 0:
resptServidor = 'piedra'
break;
case 1:
resptServidor = 'papel'
break;
default:
resptServidor = 'tijeras'
break;
}
if (seleccTu.innerText == '') {
mensaje.querySelector('p').innerText = 'DEBES SELECCIONAR PIEDRA, PAPEL O TIJERAS.'
mensaje.style.visibility = 'visible'
mensaje.style.width = '80%'
mensaje.style.height = '70%'
} else {
/* llamadaAlServidor() */
seleccPc.innerText = resptServidor
compararResultados()
}
})
/*
++++++++++++++++
NOTAS
++++++++++++++++
Lista de valores de la propiedad .readyState:
(dice en qué etapa está la solicitud)
0 => (no inicializada)
1 => (leyendo)
2 => (leído)
3 => (interactiva)
4 => (completo)
Código de estado HTTP que devuelve el servidor:
(dice cómo respondió el servidor cuando la solicitud ya está completa)
200 => OK (éxito)
404 => No encontrado
500 => Error intento del servidor
*/
function manos(target) {
const dataName = target.dataset.name
seleccTu.innerText = dataName
}
const main = document.getElementById('main')
main.addEventListener('click', (e) => {
const target = e.target
const targetId = target.id
switch (targetId) {
case 'usar_opor':
break;
case 'piedra':
manos(target)
break;
case 'papel':
manos(target)
break;
case 'tijera':
manos(target)
break;
case 'cerrar':
if(!mensaje.querySelector('p').innerText.includes('EMPATE')){
round.textContent = Number(round.textContent) + 1
}
estilosMensajeYoport()
break;
default:
break;
}
})