Juego del ahorcado en Vue.js

Publicado el: 3 de marzo de 2020
Principiante
Acerca de este proyecto
Contiene un video donde se explica cómo realizar el juego del ahorcado usando Vue.js.
vue
Publicidad
DETALLES

Este sencillo juego muy conocido por todo el mundo es el juego del ahorcado y en esta oportunidad quise realizarlo con el framework de Vue.js.

Se hizo lo más sencillo posible, solamente eligiendo una categoria de palabras (frutas).

juego

Muestra el contador de letras acertadas, letras erróneas, cambia la imagen del muñequito ahorcado dependiendo de la cantidad de errores cometidos.

De igual manera se pinta de color verde las letras acertadas, y en color rojo las letras erradas. Cuando se cometan cinco errores el juego finaliza,  mostrando una animación, si se completa la palabra correctamente se muestra una imagen animada demostrando que se ganó el juego.

Se hace uso de directivas como <pre>v-bind v-on- v-if</pre>

El teclado en pantalla se renderiza pasando las letras contenidas en el String letras.


<span v-for="(letra,index) in letras">

 <button>

{{letra}}

 </button>

</span>


Para una explicación más detallada favor observar el video de youtube.


Dudas, sugerencias o comentarios favor dejarlos en los comentarios.


CODIFICACIÓN
index.html-
Archivo de la vista del juego
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	
	&lt;meta charset=&quot;utf-8&quot;&gt;

	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

	&lt;title&gt;Primeros pasos con Vue&lt;/title&gt;
	 &lt;!-- Latest compiled and minified CSS --&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;&gt;
	

	&lt;style type=&quot;text/css&quot;&gt;

		#app{
		  background-color:#cecece;
		  border:4px solid green;
		  border-radius: 5px;
		  padding-top: 10px;
		}
		.teclado{
			margin-top:5px;
			margin-left:4px;
			width: 35px;
			display: inline-grid;
			border:2px solid green;
			border-radius: 100px;	
			background-color: #ebf5fb ;
			text-align: center;
			cursor: pointer;
		}
		.linea{
			margin-left:10px;
		}
		ul#horizontal-list li {
		  display:inline;
		}
		ul#horizontal-list button{
			margin-left: 10px;
			width: 40px;
		}
		
		.cuadro{
		  width: 30px;		  
		  margin-left: 6px;
		  border:4px solid #CC6600;
		  border-radius:5px;
		  background: white;
		  color:blue;
		  text-align: center;
		  padding-left:3px;
		  font-size: 1em;
		}
		.rojo{
			background-color:red;
		}
		.verde{
			background-color: green;
		}
	&lt;/style&gt;
	
&lt;/head&gt;

&lt;body&gt;
	
	&lt;div id=&quot;app&quot; class=&quot;container-fluid &quot;&gt;

		&lt;div v-if=&quot;win&quot; class=&quot;text-center&quot;&gt;
			&lt;img  src=&quot;imagenes/win.gif&quot; /&gt;
		&lt;/div&gt;
		&lt;div v-if=&quot;lost&quot; class=&quot;text-center&quot;&gt;
			&lt;img  src=&quot;imagenes/lose.gif&quot; /&gt;
		&lt;/div&gt;

	&lt;div class=&quot;row&quot;&gt;

		&lt;div class=&quot;col-sm-12&quot;&gt;

			&lt;h3 class=&quot;text-center text-info&quot;&gt;JUEGO DE AHORCADO&lt;/h3&gt;
		
			&lt;ul id=&quot;horizontal-list centrado&quot;&gt;
				
				&lt;!-- Aca va la lista de las letras digitadas --&gt;
				&lt;button v-for=&quot;item in palabra_escrita&quot; type=&quot;button&quot; class=&quot;btn btn-primary cuadro text-center&quot;&gt;&lt;span class=&quot;badge&quot;&gt;{{item}}&lt;/span&gt;
				&lt;/button&gt; 							

			&lt;/ul&gt;		

			&lt;/div&gt;	&lt;!-- End primera columna --&gt;

			&lt;div class=&quot;container text-center&quot;&gt;

			&lt;div class=&quot;col-sm-12&quot;&gt;

				&lt;!-- Aca va el teclado --&gt;
				&lt;span v-for=&quot;(letra,index) in letras&quot;&gt;
				
				&lt;button v-on:click=&quot;comparar(letra,index)&quot; class=&quot;teclado&quot; v-bind:key=&quot;index&quot; v-bind:disabled=&quot;botones[index]&quot; v-bind:class=&quot;{verde:color_botones[index]=='verde',rojo:color_botones[index]=='rojo'}&quot;&gt;{{letra}}&lt;/button&gt;
				&lt;/span&gt;
							
			&lt;/div&gt;	&lt;!-- End segunda columna --&gt;

			&lt;/div&gt;	&lt;!-- End container text-center --&gt;

		&lt;/div&gt;	&lt;!-- End row --&gt;

	&lt;div class=&quot;row&quot;&gt;

		&lt;div class=&quot;col-xs-8 col-sm-8 col-md-8&quot;&gt;
			&lt;br&gt;
			&lt;div&gt;
				&lt;img v-bind:src=&quot;'imagenes/'+contador_errores+'.png'&quot; alt=&quot;&quot;&gt;
			&lt;/div&gt;

		&lt;/div&gt;	&lt;!-- End tercera columna --&gt;

		&lt;div class=&quot;co-xs-4 col-sm-4 col-md-4&quot;&gt;
			&lt;br&gt;
			&lt;label class=&quot;text-primary&quot;&gt;Aciertos:&lt;/label&gt;
			&lt;input type=&quot;text&quot; class=&quot;form-control text-center&quot; v-model=&quot;contador_aciertos&quot; &gt;
			&lt;br&gt;
			&lt;label class=&quot;text-primary&quot;&gt;Errores:&lt;/label&gt;
			&lt;input type=&quot;text&quot; class=&quot;form-control text-center&quot; v-model=&quot;contador_errores&quot; size=&quot;3&quot;&gt;
			&lt;br&gt;
			&lt;button class=&quot;btn btn-primary&quot; @click=&quot;generarAleatorio&quot;&gt;NUEVO JUEGO&lt;/button&gt;
		&lt;/div&gt;	&lt;!-- En cuarta columna --&gt;
									
	&lt;/div&gt;	&lt;!-- End row --&gt;

&lt;/div&gt;


	&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;logica.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;




logica.js-
Archivo que contiene el controlador del juego
var app = new Vue({
		el:'#app',
		data:{			
			game:true,	
			win:false,
			lost:false,
			contador_aciertos:0,
			contador_errores:0,			
			aleatorio:0,			
			palabra_escrita:[],
			botones:[],
			color_botones:[],							
			letras:&quot;ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;,
			frutas:[&quot;manzana&quot;,&quot;pera&quot;,&quot;melon&quot;,&quot;cereza&quot;,&quot;ciruela&quot;,&quot;naranja&quot;,&quot;mandarina&quot;,&quot;fresa&quot;,&quot;sandia&quot;,&quot;durazno&quot;]
		},	//	End data
		methods:{	
			generarAleatorio:function (){
				this.game = true
				this.win = false
				this.lost=false
				this.palabra_escrita = []
				this.contador_aciertos = 0
				this.contador_errores = 0	
				this.botones = []
				this.color_botones = []			
				this.aleatorio = Math.floor(Math.random() * this.frutas.length)
				//	Crea un array de la misma longitud de
				for (var i=0;i&lt; this.frutas[this.aleatorio].length;i++) {
					this.palabra_escrita.push(' ')
				}	
				
				return this.aleatorio					
			},					
			comparar: function(caracter,posicion){																
				
				if(this.game){

				contadorFlag = 0

				this.botones[posicion] = true;										
				
				for(i=0;i&lt;=this.palabra_generada.length;i++){
					//	Si la letra se encuentra en la palabra
					if(caracter.toLowerCase()==this.palabra_generada[i]){
				     //app.$set(this.palabra_escrita, i, caracter)
				     this.palabra_escrita[i] = caracter
				     contadorFlag++
				     this.contador_aciertos++				     				    	
					}	//	End if					
				}	//	End For

					//	No se encontr&oacute; la letra
					if(contadorFlag==0){
						this.color_botones[posicion]='rojo'
						this.contador_errores++				
					}
					else{
						
						this.color_botones[posicion]='verde'					
					}

				if(this.contador_aciertos==this.palabra_generada.length){
					this.win=true
					this.game = false
				}

				if(this.contador_errores==5){
					this.lost = true
					this.game = false
				}
							
			  }	//	End If Game
			
			}	//	End comparar				

			},	//	End methods	
		computed:{
			palabra_generada:function(){										
				return this.frutas[this.aleatorio]				
			},	//	End palabra_generada
				
		},	//	End computed
		created: function(){			
			this.generarAleatorio()				
		}

		});	//	End vue
Autor: sistemasymicros
31 proyectos 6 seguidores 0 siguiendo

Ingeniero en electrónica. Maker, apasionado por la programación. Sigueme en sistemasymicros.

PROYECTOS RELACIONADOS
COMENTARIOS
Para publicar un comentario debes