Advertisement
Guest User

Untitled

a guest
May 28th, 2022
41
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.84 KB | None | 0 0
  1. <html>
  2.  
  3.   <head>
  4.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  5.  
  6.   </head>
  7.  
  8.   <body>
  9.     <div class="container">
  10.       <h1>El juego del ahorcado!!</h1>
  11.       <div class="card">
  12.         <div class="card-body">
  13.           <h3>Panel de gestión</h3>
  14.           <input type='text' id="inputAgregarPalabra" />
  15.           <input type='button' id="agregar-palabra" value='Guardar Palabra' onclick='agregarPalabra()' />
  16.           <input type='button' id="mostrar-palabra" value='Mostrar palabras' onclick='mostrarPalabra()' />
  17.         </div>
  18.         <div>
  19.           <ul id="resultado"></ul>
  20.         </div>
  21.  
  22.       </div>
  23.       <div class="card">
  24.         <div class="card-body">
  25.           <h3>Juego</h3>
  26.           <button class="btn btn-primary" id="iniciarJuego" onclick="iniciarJuego()">Reiniciar Juego</button>
  27.           <div id="palabraADescubrir">
  28.  
  29.           </div>
  30.           <br>
  31.           <input type="text" maxlength="1" placeholder="Ingrese su Letra" id="IngreseSuLetra">
  32.           <button id='evaluarLetra'>Evaluar letra</button>
  33.           <p id="salidaPalabraConGuiones"></p>
  34.           <div id="vida">El numero de vidas que te quedan son: 7</div>
  35.           <div>
  36.             <img src="Imagenes\DEAD.png" style="display: none;" id="dead">
  37.             <canvas id="pizarra">
  38.               Tu navegador no acepta Canvas
  39.             </canvas>
  40.             <div id="letras-usadas"></div>
  41.             <img src="Imagenes\Parca TRISTE.png" style="display: none;" id="parca-triste">
  42.           </div>
  43.           <div id="contenedor-letras"></div>
  44.           <div id="ahorcado00"></div>
  45.           <div id="ganador00">
  46.             <p>Victoria</p>
  47.             <p>Enhorabuena</p>
  48.           </div>
  49.         </div>
  50.       </div>
  51.     </div>
  52.  
  53. <script>
  54. //Función para reemplazar el caracter por la letra
  55. String.prototype.replaceAt = function(index, character) {
  56.   return this.substr(0, index) + character + this.substr(index + character.length);
  57. }
  58.  
  59. // variables de elementos HTML
  60. let letrasUsadas = document.getElementById('letras-usadas');
  61. let contenedorLetras = document.getElementById('contenedor-letras');
  62. let IngreseSuLetra = document.getElementById('IngreseSuLetra')
  63. let evaluarLetra = document.getElementById('evaluarLetra')
  64. let vida = document.getElementById('vida')
  65. let dead = document.getElementById('dead')
  66. let parcaTriste = document.getElementById('#parca-triste')
  67. let canvas = document.getElementById('pizarra')
  68. let salidaPalabraConGuiones = document.getElementById('salidaPalabraConGuiones')
  69. let inputAgregarPalabra = document.getElementById('inputAgregarPalabra')
  70.  
  71. // variables globales
  72. var palabras = [];
  73. var palabra = ''
  74. var palabraConGuiones = ''
  75. let contadorFallos = 7;
  76.  
  77. // controles de eventos
  78. IngreseSuLetra.addEventListener('keyup', function() {
  79.   this.value = this.value.replace(/[^a-zA-Z ]/g, "")
  80.   this.value = this.value.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
  81.   this.value = this.value.toUpperCase()
  82. });
  83.  
  84. evaluarLetra.addEventListener('click', function() {
  85.   function agregarLetra() {
  86.     let elementoLetra = document.createElement('span');
  87.     elementoLetra.innerHTML = letra.toUpperCase();
  88.     letrasUsadas.appendChild(elementoLetra);
  89.   }
  90.  
  91.   let letra = IngreseSuLetra.value.toUpperCase();
  92.   let haFallado = true;
  93.   for (var i = 0; i < palabra.length; i++) {
  94.    if (letra == palabra[i]) {
  95.      //i*2 se debe a que la letra es reemplazada por 2 caracteres; un guión y un espacio.
  96.      palabraConGuiones = palabraConGuiones.replaceAt(i * 2, letra);
  97.      haFallado = false;
  98.    }
  99.  }
  100.  
  101.  if (haFallado) {
  102.    contadorFallos--;
  103.    if (contadorFallos >= 0 && contadorFallos <= 7) {
  104.      vida.innerHTML = 'El numero de vidas que te quedan son: ' + contadorFallos;
  105.       //document.querySelector('#ahorcado00').style.backgroundPosition = -(173*contadorFallos) + 'px 0';
  106.     }
  107.  
  108.     if (contadorFallos == 0) {
  109.       dead.style.display = 'inline-block';
  110.     }
  111.   } else {
  112.     if (palabraConGuiones.indexOf('_') < 0) {
  113.      parcaTriste.style.display = 'inline-block';
  114.    }
  115.  }
  116.  
  117.  dibujar();
  118.  limpiar();
  119.  agregarLetra(letra);
  120. });
  121.  
  122. // funciones
  123.  
  124. // funcion dibujar es la siguiente
  125. function dibujar() {
  126.  var ctx = canvas.getContext('2d');
  127.  // Base del ahorcado
  128.  ctx.canvas.width = 300;
  129.  ctx.canvas.heigth = 100;
  130.  if (contadorFallos <= 6) {
  131.    ctx.beginPath();
  132.    ctx.moveTo(30, 200);
  133.    ctx.lineTo(30, 10);
  134.    ctx.lineTo(150, 10);
  135.    ctx.lineTo(150, 20);
  136.    ctx.stroke();
  137.  }
  138.  
  139.  if (contadorFallos <= 5) { //Dibujar cabeza
  140.    ctx.beginPath();
  141.    ctx.arc(150, 40, 20, 0, Math.PI * 2);
  142.    ctx.stroke();
  143.  }
  144.  
  145.  if (contadorFallos <= 4) { //Dibujar cuerpo
  146.    ctx.beginPath();
  147.    ctx.moveTo(150, 60);
  148.    ctx.lineTo(150, 100);
  149.    ctx.stroke();
  150.  }
  151.  
  152.  if (contadorFallos <= 3) { //Primer brazo
  153.    ctx.beginPath();
  154.    ctx.moveTo(150, 60);
  155.    ctx.lineTo(130, 100);
  156.    ctx.stroke();
  157.  }
  158.  
  159.  if (contadorFallos <= 2) { // Segundo Brazo
  160.    ctx.beginPath();
  161.    ctx.moveTo(150, 60);
  162.    ctx.lineTo(170, 100);
  163.    ctx.stroke();
  164.  }
  165.  
  166.  if (contadorFallos <= 1) { // Primer pierna
  167.    ctx.beginPath();
  168.    ctx.moveTo(150, 100);
  169.    ctx.lineTo(170, 130);
  170.    ctx.stroke();
  171.  }
  172.  
  173.  if (contadorFallos <= 0) { //Segunda pierna
  174.    ctx.beginPath();
  175.    ctx.moveTo(150, 100);
  176.    ctx.lineTo(130, 130);
  177.    ctx.stroke();
  178.  }
  179. }
  180.  
  181. // limpiar()
  182. function limpiar() {
  183.  salidaPalabraConGuiones.innerHTML = palabraConGuiones;
  184.  IngreseSuLetra.value = '';
  185.  IngreseSuLetra.focus();
  186. }
  187.  
  188. function mostrarPalabra() {
  189.  resultado.innerHTML = '';
  190.  let datos = JSON.parse(localStorage.getItem("palabras"))
  191.  for (let dato of datos) {
  192.    let datoParrafo = document.createElement('li');
  193.    datoParrafo.innerText = dato;
  194.    resultado.appendChild(datoParrafo);
  195.  }
  196. }
  197.  
  198. function iniciarJuego() {
  199.  if (palabras.length == 0) {
  200.    // Almacenamiento en localStorage inicial
  201.    palabras = ['CASA', 'PERRO', 'GATO'];
  202.    localStorage.setItem("palabras", JSON.stringify(palabras))
  203.  }
  204.  palabra = palabras[Math.floor(Math.random() * palabras.length)];
  205.  //Reemplazo la palabra por guiones
  206.  palabraConGuiones = palabra.replace(/./g, "_ ");
  207.  salidaPalabraConGuiones.innerHTML = palabraConGuiones;
  208.  var context = canvas.getContext('2d');
  209.  context.clearRect(0, 0, canvas.width, canvas.height);
  210.  letrasUsadas.textContent = ''
  211.  alert("la palabra a descubrir es: " + palabra)
  212. }
  213.  
  214. function agregarPalabra() {
  215.  let agrego = inputAgregarPalabra.value;
  216.  agrego = agrego.toUpperCase();
  217.  palabras = JSON.parse(localStorage.getItem("palabras"))
  218.  if (agrego !== '') {
  219.    palabras.push(agrego);
  220.  }
  221.  localStorage.setItem("palabras", JSON.stringify(palabras))
  222. }
  223.  
  224. // algoritmo de inicio
  225. iniciarJuego()
  226.  
  227. </script>
  228. </body>
  229. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement