18.- Juegos y Multimedia en HTML5 - Creando el menú de un juego.

Con el anterior capítulo del curso dejamos atrás la creación y animación de gráficos vectoriales. En esta nueva entrega del curso de Juegos y Multimedia en HTML5 empezaremos a crear un menú para un juego o para cualquier tipo de página web.
Normalmente siempre intento enseñar el funcionamiento de una nueva API cuando creo un nuevo vídeo, pero sin embargo, para aprender a crear este menú no hará falta usar ninguna función nueva. Quizás lo único que pueda generaros dudas es el objeto classList de los elementos del DOM y el uso de un array asociativo en JavaScript.
Para ver más en detalle el uso del classList os recomiendo visitar éste artículo que hace tiempo que anda rondando por este blog. En él se explica el uso de cada una de las funciones del classList que se utilizan en el videotutorial y, además se explican algunas más. Por si alguien se está preguntando ¿de qué me suena eso del classList? os diré que ya lo mencioné en algún capítulo de este curso.
En este videotutorial únicamente os explicaré cómo crear la estructura básica del menú, en los siguientes veremos como usar CSS para darle un poco más de gracia. Eso significa que trabajaremos con transacciones y otras cosas que ya hemos visto por encima.

 

En este archivo se encuentra todo lo escrito en el videotutorial (más todos los eventos onclik de los botones). En ésta página de aquí lo puedes ver funcionando.

<!DOCTYPE html>
<html>
  <head>
    <title>Menu</title>
  </head>
  <style>
    .hidden {
       visibility: hidden;
    }

    .visible {
      visibility: visible;
    }

    .frame {
      position: absolute;
    }
  </style>
  <script>
  
    function Game(gameDiv)
    {
      var frames = [];
      var framesNames = [];

      for (var i=0; i<gameDiv.childNodes.length; i++)
      {
        var id = gameDiv.childNodes[i].id;
        if (id != undefined)
        {
          var child = gameDiv.childNodes[i];
          if (child.classList.contains("frame"))
          {
            frames[id] = child;
            framesNames.push(id);
          }
        }
      }

      function setFrameVisible(name)
      {
        frames[name].classList.remove("hidden");
        frames[name].classList.add("visible");
      }

      function setFrameHidden(name)
      {
        frames[name].classList.remove("visible");
        frames[name].classList.add("hidden");
      }

      return {
        "setFrameVisible": setFrameVisible,
        "setFrameHidden": setFrameHidden
      };
    }

    window.addEventListener("load", function ()
    {
      game = new Game(document.getElementById("game"));
    });

    var game;

  </script>
  <body>
    <div id="game">
      <div id="main" class="frame visible">
        <h1>
          Espacio estelar
        </h1>
        <button onclick="game.setFrameVisible('canvas');game.setFrameHidden('main');">
          Jugar
        </button>
        <button onclick="game.setFrameVisible('highscores');game.setFrameHidden('main');">
          Puntuaciones
        </button>
        <button onclick="game.setFrameVisible('about');game.setFrameHidden('main');">
          Cr&eacute;ditos
        </button>
      </div>
      <div id="canvas" class="frame hidden">
        <canvas></canvas>
        <button onclick="game.setFrameVisible('main');game.setFrameHidden('canvas');">
          Volver al men&uacute;
        </button>
      </div>
      <div id="highscores" class="frame hidden">
        <h1>
          Puntuaciones m&aacute;s altas
        </h1>
        <button onclick="game.setFrameVisible('main');game.setFrameHidden('highscores');">
          Volver al men&uacute;
        </button>
      </div>
      <div id="about" class="frame hidden">
        <h1>
          Yo soy el creador
        </h1>
        <button onclick="game.setFrameVisible('main');game.setFrameHidden('about');">
          Volver al men&uacute;
        </button>
      </div>
    </div>
  </body>
</html>

Índice del curso

No hay comentarios :

Publicar un comentario