Motor de juegos narrativos y educativos
para aprender programación web

Campos y contraseñas

Los puzles o rompecabezas sondesafíos para quien juegue a nuestro juego y a la vez pueden ayudar a meternos de la historia. Por ejemplo: un espía que debe conseguir el código de una puerta de seguridad.

Crear rompecabezas suele seguir los siguientes pasos:

1. Pensar en el desafío y como se integra en nuestra historia
2. Dibujar un boceto, pensado que partes tiene y que acciones se pueden realizar
3. Crear la pantalla en HTML, y darle estilo con CSS
4. Conectar las acciones que se pueden realizar con javascript
5. Comprobar el resultado final para ver si quien juega ha acertado

Antes de nada puedes probar los ejemplos de puzles y después descargar el código, para echarles un vistazo.

Nuestro primer ejemplo va a ser acertar una clave o contraseña. Por ejemplo, podría ser la clave de la puerta de entrada a un escondrijo secreto:

Para hacerlo en html solo necesitamos un campo de texto y un botón de abrir:

<código-secreto>
	<button data-escena="menú-juego">Volver</button>
	
	<label>Código:
		 <input type="text" placeholder="0000" />
	</label>
	<button id="abrir">Abrir</button>
	
	<link rel="stylesheet" href="código.css">
	<script src="código.js"></script>
</código-secreto>

Con css podemos darle estilo: ajistar el ancho, el tamaño de texto, el margen, ponerle esquinas redondeadas (border-radius),...

label{
	text-align:center;
	display:block;
	width:100%;
	margin-bottom:1rem;
	
	input{
		border:none;
		border-radius:1em;
		text-align:center;
		font-size:2rem;
		font-weight:bold;
		width:3em;
	}
}

button#abrir{
	width:auto;
	margin:1rem auto;
	padding:0.5rem;
	font-size:1.2rem;
}

En javascript seleccionaremos el botón y comprobaremos el valor del campo al pulsar el botón abrir. Si el valor es correcto abriremos un diálogo, y si no mostraremos otro:

const valor_correcto = "1234"
const campo = selecciona("input")

selecciona("button#abrir").al_pulsar(comprueba_resultado)

function comprueba_resultado(){
	if(campo.valor == valor_correcto) diálogos.inicia("abierto")
	else diálogos.inicia("incorrecto")
}

Además podemos controlar las teclas que se pueden escribir en el campo de texto con el evento al_presiona_tecla:

campo.al_presionar_tecla(presiona_tecla)

function presiona_tecla(campo, tecla, evento){
	const teclas_movimiento = ["Backspace", "ArrowLeft", "ArrowRight", "Tab", "Delete"]
	
	if(teclas_movimiento.includes(tecla)) return
	if(campo.valor.length < 4 && tecla.match(/[0-9]/)) return
	
	evento.preventDefault();
}

El método preventDefault evita que la tecla se escriba, si llegamos al final. Pero antes de eso comprobamos si hemos pulsado una flecha, o el botón borrar, o si vamos a escribir un número y aún no hemos llegado a los 4. En ese caso saldremos del evento sin impedir escribir.