Juego Elena

by Luis Martin

HTML

<canvas id="canvas"></canvas>
<div class="bloque">

  <input class="box" type="text" id="1">
  <input class="box" type="text" id="2">
  <input class="box" type="text" id="3">
  <input class="box" type="text" id="4"> -
  <input class="box" type="text" id="5">
  <input class="box" type="text" id="6">
  <input class="box" type="text" id="7">
  <input class="box" type="text" id="8"> -
  <input class="box" type="text" id="9">
  <input class="box" type="text" id="10">
  <input class="box" type="text" id="11">
  <input class="box" type="text" id="12"> -
  <input class="box" type="text" id="13">
  <input class="box" type="text" id="14">
  <input class="box" type="text" id="15">
  <input class="box" type="text" id="16">



  <p id="pregunta">Pulsa un cuadrado para ver la pregunta</p>
  <input type="text" id="respuesta">

</div>

<div class="foto" hidden>
  <img src="https://cdn4.areajugones.es/wp-content/uploads/2017/11/maxresdefault-2.jpg">
</div>

CSS

div.bloque {
  margin-top: 100px;
  margin-left: 10px;
  z-index: 1000;
  position: relative;
}

.foto {
  width: 100%;
  height: 100%;
  position: absolute;
}

canvas {
  margin: 0;
  z-index: 999;
  position: fixed;
  bottom: 0;
  right: 0;
}

input[class="box"] {
  width: 20px;
  text-align: center;
}

input[class="box"]:focus {
  color: transparent;
}

body {
  height: 100%;
  width: 100%;
}

JavaScript

//arrays
var preguntas = [

  "¿Dónde vimos la película de \"La novia cadaver\"?",
  "La mala de La sirenita",
  "Hechizo de protección muy poderoso y difícil.",
  "Sobrenombre de vuestro Dacia",
  "Producto prohibido para la dieta",
  "Vampiro ejemplar",
  "¿Cuántos gags visito al día?",
  "Hechizo característico de Harry Potter",
  "Famoso documental que afirma que existen las ____",
  "Frodo tiró el anillo en el Monte del ____",
  "Pastillas que llevas contigo",
  "Corporación responsable del virus zombie",
  "¿Quién es el chico más guapo?",
  "Pelicula que marcó tu infancia",
  "Sonido característico de Papá Noel (x3)",
  "¿Cuántas vidas tiene un gato?"

];

var respuestas = [

  "Busdongo",
  "Úrsula",
  "Expecto patronum",
  "Sandungero",
  "Nocilla",
  "Lestat",
  "9",
  "Expeliarmus",
  "Sirenas",
  "Destino",
  "Enantyum",
  "Umbrella",
  "Lois",
  "En busca del valle encantado",
  "Ho ho ho",
  "7"


]


$('#respuesta').hide();
$('.foto').hide();

$('input[class="box"]').on('focus', function() {
  $('#respuesta').hide();
  //console.log("focus " + $(this).attr('id'));
  //console.log(preguntas[$(this).attr('id') - 1]);
  var preguntaID = $(this).attr('id') - 1;
  $('#pregunta').text(preguntas[preguntaID]);
  $('#respuesta').show(300).focus().val(inputs[preguntaID]).attr("pregunta", preguntaID).css("border-bottom-color", "initial");
  $('input[class="box"]').each(function() {
    $(this).css({
      "border-color": "initial"
    })
  })
  $(this).css({
    "border-color": "Blue"
  })

});

$('#respuesta').bind('input propertychange', function() {
  //console.log("escribiendo ...");
  checkRespuesta();
});

function checkRespuesta() {

  var respuestaElem = $('#respuesta');
  var respuesta = respuestaElem.val();

  var preguntaID = Number(respuestaElem.attr("pregunta"))
  var numPregunta = preguntaID + 1
  inputs[preguntaID] = respuesta;

  //console.log(preguntaID);
  if (respuestas[preguntaID].toLowerCase() == $('#respuesta').val().trim().toLowerCase())...