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

Bucles y habilidad

Otro uso del tiempo es hacer puzles de habilidad, en los que tengas que acertar en el momento justo. Por ejemplo, haciendo una ruleta que de diferentes puntos según el sector en el que pare:

El html es muy simple: Tenemos la ruleta, una flecha, y un botón para empezar:

<prueba-de-destreza>
	<button data-escena="menú-juego">Volver</button>s
	
	<flecha-posición></flecha-posición>
	
	<ruleta-giratoria></ruleta-giratoria>
	<button id="inicia_para">Iniciar ruleta</button>
	
	<link rel="stylesheet" href="prueba_de_destreza.css">
	<script src="prueba_de_destreza.js"></script>
</prueba-de-destreza>

Probablemente lo mejor tanto para la flecha como para la ruleta sería usar imágenes. En la ruleta incluso se podrían representar distintos premios. Pero en su lugar vamos a usar css y crear la ruleta con un degradado cónico, asignando colores a ciertos ángulos:

prueba-de-destreza{
	background:grey;


	ruleta-giratoria{
		width: 80%;
		aspect-ratio: 1/1;
		border-radius: 50%;
		background: conic-gradient(
			#f00 0deg 100deg,
			#0f0 100deg 125deg,
			#fa0 125deg 180deg,
			#ff0 180deg 290deg,
			#af0 290deg 360deg
		);
		border:0.1rem solid black;
		
		margin:0 auto;
	}


	flecha-posición{
		border-radius:100% 100% 100% 0;
		background:black;
		width:3rem;
		height:3rem;
		margin:0 auto;
		rotate:-45deg;
		z-index:2;
	}
	
	button#inicia_para{
		width:auto;
		margin:1rem auto;
		padding:0.5rem;
		font-size:1.2rem;
	}

}

Ahora toca echarlo a andar. El mismo botón servirá para iniciar y parar la ruleta. Y el giro funciona simplemente aumentando la rotación de la ruleta de manera continua, pero esperando 0.02 segundos entre cada actualización:

const prueba = selecciona("prueba-de-destreza")
const ruleta = prueba.selecciona("ruleta-giratoria")
const botón_ruleta = prueba.selecciona("button#inicia_para")

botón_ruleta.al_pulsar(iniciar_y_parar_giro)

let girando = false

let rotación = 0
async function inicia_giro() {
	girando = true
    while (girando) {
        rotación = (rotación + 6) % 360;
        ruleta.estilo.rotate = rotación+'deg'
        await espera(0.02);
    }
}

const puntuación = {'70':80, '180':60, '235':40, '260':100, '360':0}

let puntos_ganados
function iniciar_y_parar_giro() {
	if(girando==false){
		inicia_giro()
		botón_ruleta.texto = "Parar ruleta"
		return
	}
	botón_ruleta.texto = "Reiniciar ruleta"
	
	
    girando = false;
	for(const ángulo in puntuación)
		if(Number(rotación) < Number(ángulo)){
			puntos_ganados = puntuación[ángulo]
			break
		}
		
	diálogos.inicia("puzle_destreza_resuelto")
}

Al parar simplemente hay que mirar el ángulo de giro y compararlo con los ángulos de los diferentes sectores.