Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
- </head>
- <body>
- <div class="container">
- <h1>El juego del ahorcado!!</h1>
- <div class="card">
- <div class="card-body">
- <h3>Panel de gestión</h3>
- <input type='text' id="inputAgregarPalabra" />
- <input type='button' id="agregar-palabra" value='Guardar Palabra' onclick='agregarPalabra()' />
- <input type='button' id="mostrar-palabra" value='Mostrar palabras' onclick='mostrarPalabra()' />
- </div>
- <div>
- <ul id="resultado"></ul>
- </div>
- </div>
- <div class="card">
- <div class="card-body">
- <h3>Juego</h3>
- <button class="btn btn-primary" id="iniciarJuego" onclick="iniciarJuego()">Reiniciar Juego</button>
- <div id="palabraADescubrir">
- </div>
- <br>
- <input type="text" maxlength="1" placeholder="Ingrese su Letra" id="IngreseSuLetra">
- <button id='evaluarLetra'>Evaluar letra</button>
- <p id="salidaPalabraConGuiones"></p>
- <div id="vida">El numero de vidas que te quedan son: 7</div>
- <div>
- <img src="Imagenes\DEAD.png" style="display: none;" id="dead">
- <canvas id="pizarra">
- Tu navegador no acepta Canvas
- </canvas>
- <div id="letras-usadas"></div>
- <img src="Imagenes\Parca TRISTE.png" style="display: none;" id="parca-triste">
- </div>
- <div id="contenedor-letras"></div>
- <div id="ahorcado00"></div>
- <div id="ganador00">
- <p>Victoria</p>
- <p>Enhorabuena</p>
- </div>
- </div>
- </div>
- </div>
- <script>
- //Función para reemplazar el caracter por la letra
- String.prototype.replaceAt = function(index, character) {
- return this.substr(0, index) + character + this.substr(index + character.length);
- }
- // variables de elementos HTML
- let letrasUsadas = document.getElementById('letras-usadas');
- let contenedorLetras = document.getElementById('contenedor-letras');
- let IngreseSuLetra = document.getElementById('IngreseSuLetra')
- let evaluarLetra = document.getElementById('evaluarLetra')
- let vida = document.getElementById('vida')
- let dead = document.getElementById('dead')
- let parcaTriste = document.getElementById('#parca-triste')
- let canvas = document.getElementById('pizarra')
- let salidaPalabraConGuiones = document.getElementById('salidaPalabraConGuiones')
- let inputAgregarPalabra = document.getElementById('inputAgregarPalabra')
- // variables globales
- var palabras = [];
- var palabra = ''
- var palabraConGuiones = ''
- let contadorFallos = 7;
- // controles de eventos
- IngreseSuLetra.addEventListener('keyup', function() {
- this.value = this.value.replace(/[^a-zA-Z ]/g, "")
- this.value = this.value.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
- this.value = this.value.toUpperCase()
- });
- evaluarLetra.addEventListener('click', function() {
- function agregarLetra() {
- let elementoLetra = document.createElement('span');
- elementoLetra.innerHTML = letra.toUpperCase();
- letrasUsadas.appendChild(elementoLetra);
- }
- let letra = IngreseSuLetra.value.toUpperCase();
- let haFallado = true;
- for (var i = 0; i < palabra.length; i++) {
- if (letra == palabra[i]) {
- //i*2 se debe a que la letra es reemplazada por 2 caracteres; un guión y un espacio.
- palabraConGuiones = palabraConGuiones.replaceAt(i * 2, letra);
- haFallado = false;
- }
- }
- if (haFallado) {
- contadorFallos--;
- if (contadorFallos >= 0 && contadorFallos <= 7) {
- vida.innerHTML = 'El numero de vidas que te quedan son: ' + contadorFallos;
- //document.querySelector('#ahorcado00').style.backgroundPosition = -(173*contadorFallos) + 'px 0';
- }
- if (contadorFallos == 0) {
- dead.style.display = 'inline-block';
- }
- } else {
- if (palabraConGuiones.indexOf('_') < 0) {
- parcaTriste.style.display = 'inline-block';
- }
- }
- dibujar();
- limpiar();
- agregarLetra(letra);
- });
- // funciones
- // funcion dibujar es la siguiente
- function dibujar() {
- var ctx = canvas.getContext('2d');
- // Base del ahorcado
- ctx.canvas.width = 300;
- ctx.canvas.heigth = 100;
- if (contadorFallos <= 6) {
- ctx.beginPath();
- ctx.moveTo(30, 200);
- ctx.lineTo(30, 10);
- ctx.lineTo(150, 10);
- ctx.lineTo(150, 20);
- ctx.stroke();
- }
- if (contadorFallos <= 5) { //Dibujar cabeza
- ctx.beginPath();
- ctx.arc(150, 40, 20, 0, Math.PI * 2);
- ctx.stroke();
- }
- if (contadorFallos <= 4) { //Dibujar cuerpo
- ctx.beginPath();
- ctx.moveTo(150, 60);
- ctx.lineTo(150, 100);
- ctx.stroke();
- }
- if (contadorFallos <= 3) { //Primer brazo
- ctx.beginPath();
- ctx.moveTo(150, 60);
- ctx.lineTo(130, 100);
- ctx.stroke();
- }
- if (contadorFallos <= 2) { // Segundo Brazo
- ctx.beginPath();
- ctx.moveTo(150, 60);
- ctx.lineTo(170, 100);
- ctx.stroke();
- }
- if (contadorFallos <= 1) { // Primer pierna
- ctx.beginPath();
- ctx.moveTo(150, 100);
- ctx.lineTo(170, 130);
- ctx.stroke();
- }
- if (contadorFallos <= 0) { //Segunda pierna
- ctx.beginPath();
- ctx.moveTo(150, 100);
- ctx.lineTo(130, 130);
- ctx.stroke();
- }
- }
- // limpiar()
- function limpiar() {
- salidaPalabraConGuiones.innerHTML = palabraConGuiones;
- IngreseSuLetra.value = '';
- IngreseSuLetra.focus();
- }
- function mostrarPalabra() {
- resultado.innerHTML = '';
- let datos = JSON.parse(localStorage.getItem("palabras"))
- for (let dato of datos) {
- let datoParrafo = document.createElement('li');
- datoParrafo.innerText = dato;
- resultado.appendChild(datoParrafo);
- }
- }
- function iniciarJuego() {
- if (palabras.length == 0) {
- // Almacenamiento en localStorage inicial
- palabras = ['CASA', 'PERRO', 'GATO'];
- localStorage.setItem("palabras", JSON.stringify(palabras))
- }
- palabra = palabras[Math.floor(Math.random() * palabras.length)];
- //Reemplazo la palabra por guiones
- palabraConGuiones = palabra.replace(/./g, "_ ");
- salidaPalabraConGuiones.innerHTML = palabraConGuiones;
- var context = canvas.getContext('2d');
- context.clearRect(0, 0, canvas.width, canvas.height);
- letrasUsadas.textContent = ''
- alert("la palabra a descubrir es: " + palabra)
- }
- function agregarPalabra() {
- let agrego = inputAgregarPalabra.value;
- agrego = agrego.toUpperCase();
- palabras = JSON.parse(localStorage.getItem("palabras"))
- if (agrego !== '') {
- palabras.push(agrego);
- }
- localStorage.setItem("palabras", JSON.stringify(palabras))
- }
- // algoritmo de inicio
- iniciarJuego()
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement