Un juego de reflejos es un juego simple y divertido que mide tu velocidad de respuesta. Es bastante simple de hacer y entender. Diseñaremos un juego de reflejos que calculará tu velocidad de respuesta. Las reglas son simples, solo presiona el botón de detener cuando veas el cambio en el color de fondo, y el tiempo que tardaste en hacerlo será tu velocidad.
El juego te ofrece una variedad de colores para elegir. Una respuesta más rápida mostrará una mejor cita de elogio que una más lenta.
Entonces, comencemos con el diseño HTML básico.
El diseño HTML:
El diseño HTML define cómo se verá su página. Esta parte depende completamente de tu creatividad. Solo tenga en cuenta crear un fondo blanco en blanco, para que el cambio sea visible.
Otros elementos necesarios son:
- Un encabezado que contiene el nombre del juego y alguna otra información.
- Un elemento de formulario que podría incluir la opción seleccionar desde abajo. Esto es necesario para que el usuario pueda elegir entre varias opciones el color particular que desea.
- Dos botones: uno para iniciar el juego y otro para presionar el botón de detener.
Código:
<html> <head> <title>Reflex Game</title> </head> <body> <center><strong> <h1 style="color: black">Reflex Game</h1> </strong></center> <center> <h2>Test your Response time!</h2> </center> <center> <h3>How To Play</h3> <p>Click on "Start" first, and wait until the background color changes. As soon as it changes, hit "stop!" </p> <br> <form name="response"> Change background color to: <select name="bgColorChange"> <option selected>deeppink <option>aliceblue <option>crimson <option>darkkhaki <option>cadetblue <option>darkorchid <option>coral <option>chocolate <option>mediumslateblue <option>tomato <option>darkslategray <option>limegreen <option>cornflowerblue <option>darkolivegreen </select> <br> <br> <input type="button" class="btn" value="Start" onClick="startit()"> <input type="button" class="btn" value="Stop" onClick="stopTest()"> </form> </center> </body> </html>
Nota:
Este es el diseño HTML más básico. Puede agregar O eliminar cualquier otra porción.
El estilo CSS:
puede agregar su propio CSS personalizado siempre que sea posible. Aquí solo agregaré algo de CSS básico a los botones.
Código:
<style>
input[type=button]
{
background-color: #77797c;
border: none;
border-radius: 10%;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
Lógica principal del juego:
La lógica principal del juego se define mediante JavaScript. El JavaScript utilizado aquí también es bastante básico y solo un poco de conocimiento de JavaScript sería suficiente para comprenderlo.
Estaremos realizando 5 funciones básicas para el funcionamiento de este juego:
Paso 1:
Iniciar el juego. El botón de inicio será necesario para esta función. Esta función se ejecutará una vez que el usuario presione el botón Inicio.
function startTest()
{
document.body.style.background=document.response.bgColorChange.options[
document.response.bgColorChange.selectedIndex].text;
bgChangeStarted=true;
startTime=new Date();
}
Paso 2:
La siguiente función será la función de comentario(). Esta función incluirá los comentarios que el juego mostrará al finalizar el juego.
function remark(responseTime)
{
var responseString="";
if (responseTime < 0.20)
responseString="Well done!";
if (responseTime >= 0.30 && responseTime < 0.20)
responseString="Nice!";
if (responseTime >=0.40 && responseTime < 0.30)
responseString="Could be better...";
if (responseTime >=0.50 && responseTime < 0.60)
responseString="Keep practicing!";
if (responseTime >=0.60 && responseTime < 1)
responseString="Have you been drinking?";
if (responseTime >=1)
responseString="Did you fall asleep?";
return responseString;
}
Paso 3:
La siguiente función stopTest() se ejecutará al presionar el botón de parada. Puede haber 3 opciones que se pueden ejecutar al presionar el botón de parada:
Primero, finalización exitosa, indicando el tiempo de respuesta.
En segundo lugar, si el usuario presiona el botón de parada antes de presionar el botón de inicio.
Tercero, si el usuario presiona el botón de parada antes de cambiar el color.
function stopTest()
{
if(bgChangeStarted)
{
endTime=new Date();
var responseTime=(endTime.getTime()-startTime.getTime())/1000;
document.body.style.background="white";
alert("Your response time is: " + responseTime +
" seconds " + "\n" + remark(responseTime));
startPressed=false;
bgChangeStarted=false;
}
else
{
if (!startPressed)
{
alert("press start first to start test");
}
else
{
clearTimeout(timerID);
startPressed=false;
alert("cheater! you pressed too early!");
}
}
}
Paso 4:
La cuarta función es obtener un tiempo de respuesta aleatorio para cambiar el fondo.
function randNumber()
{
randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31);
return((randSeed >> 15) & 0x7fff) / 32767;
}
Paso final:
la función final es garantizar que el botón de inicio no se presione dos veces.
function startit()
{
if(startPressed)
{
alert("Already started. Press stop to stop");
return;
}
else
{
startPressed=true;
timerID=setTimeout('startTest()', 6000*randNumber());
}
}
Demostración final y código completo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<style>
input[type=button]{
background-color: #77797c;
border: none;
border-radius: 10%;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
<title>Reflex Game</title>
</head>
<body><script language="JavaScript">
var startTime=new Date();
var endTime=new Date();
var startPressed=false;
var bgChangeStarted=false;
var maxWait=20;
var timerID;
function startTest()
{
document.body.style.background=document.response.bgColorChange.options[
document.response.bgColorChange.selectedIndex].text;
bgChangeStarted=true;
startTime=new Date();
}
function remark(responseTime)
{
var responseString="";
if (responseTime < 0.20)
responseString="Well done!";
if (responseTime >= 0.30 && responseTime < 0.20)
responseString="Nice!";
if (responseTime >=0.40 && responseTime < 0.30)
responseString="Could be better...";
if (responseTime >=0.50 && responseTime < 0.60)
responseString="Keep practicing!";
if (responseTime >=0.60 && responseTime < 1)
responseString="Have you been drinking?";
if (responseTime >=1)
responseString="Did you fall asleep?";
return responseString;
}
function stopTest()
{
if(bgChangeStarted)
{
endTime=new Date();
var responseTime=(endTime.getTime()-startTime.getTime())/1000;
document.body.style.background="white";
alert("Your response time is: " + responseTime +
" seconds " + "\n" + remark(responseTime));
startPressed=false;
bgChangeStarted=false;
}
else
{
if (!startPressed)
{
alert("press start first to start test");
}
else
{
clearTimeout(timerID);
startPressed=false;
alert("cheater! you pressed too early!");
}
}
}
var randMULTIPLIER=0x015a4e35;
var randINCREMENT=1;
var today=new Date();
var randSeed=today.getSeconds();
function randNumber()
{
randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31);
return((randSeed >> 15) & 0x7fff) / 32767;
}
function startit()
{
if(startPressed)
{
alert("Already started. Press stop to stop");
return;
}
else
{
startPressed=true;
timerID=setTimeout('startTest()', 6000*randNumber());
}
}
// -->
</script>
<center><strong><h1 style="color: black">Reflex Game</h1></center></strong>
<center>
<h2>Test your Response time!</h2>
</center>
<center><h3>How To Play</h3>
<p>Click on "Start" first, and wait until the
background color changes. As soon as it changes, hit "stop!"
</p>
<br>
<form name="response">
Change background color to:
<select name="bgColorChange">
<option selected>deeppink
<option>aliceblue
<option>crimson
<option>darkkhaki
<option>cadetblue
<option>darkorchid
<option>coral
<option>chocolate
<option>mediumslateblue
<option>tomato
<option>darkslategray
<option>limegreen
<option>cornflowerblue
<option>darkolivegreen
</select><br>
<br>
<input type="button" class="btn" value="Start" onClick="startit()">
<input type="button" class="btn" value="Stop" onClick="stopTest()">
</form>
</center>
</body>
</html>
Producción: