Laboratorio Web

MENU

GameBoy con Html5 y CSS3

Recientemente, uno de los iconos pop de los 90, la GameBoy de Nintendo celebraba su 25 aniversario.

Como pequeño homenaje, le dedico esta GameBoy hecha en html5 y CSS3 sin utilizar una sola imagen y bajo estándares.

La forma más correcta de hacerlo -sin usar imágenes- , sería mediante un gráfico SVG o mediante Canvas, pero no es más que mero entretenimiento.

Con CSS3 podemos modelar las formas, creando degradados para emular brillos, curvando los bordes de las figuras, o sombreándolas fingiendo cierto grado de profundidad.

GameBoy que utilicé como modelo para crear otra similar en Html5 y CSS3
Imagen que utilicé como modelo
GameBoy hecha con html5 y CSS3
GameBoy hecha con html5 y CSS3

Antes de ponernos a teclear el código, dediquemos unos minutos a hacernos un pequeño boceto en un papel para identificar los componentes y decidir dónde van colocados.

boceto en papel de la "estructura web" de una game boy

Si tuvieramos que transcribir este boceto a código html5, una propuesta válida sería la siguiente:

<body>

<div class="carcasa" >

  <div class="rectangulosuperior">

    <div class="esquina1">&nbsp;&nbsp;&nbsp;&nbsp;</div>

    <div class="central">
      <nav>
        <ul>
          <li class="centralon"><a href="#"><i class="fa-play"></i>OFF</a></li>
          <li class="centraloff"><a href="#">ON<i class="fa-play"></i></a></li>
        </ul>
      </nav>  

    </div>
    
    <div class="esquina2">&nbsp;&nbsp;&nbsp;&nbsp;</div>

  </div>

<div class="petronilo">
  <div class="cubrepantalla">

    <div class="barritascolor1">&nbsp;</div>
    <h2>DOT MATRIX WITH STEREO SOUND</h2>
    <div class="barritascolor2">&nbsp;</div>


    <h4 class="circulobateria">&nbsp;</h4>
    <h3 class="battery">BATTERY</h3>

    <div class="pantalla">
      <!-- 
      Este Space Invader con CSS no lo hice yo, por eso lo oculto
      Si quieres darle un toque mol&oacute;n a la página, 
      desactiva el marciano!
      <div id="space-invader">
        &nbsp;
      </div> -->
    </div>
</div>

  </div>    <!-- FINAL DE cubrepantalla -->

  <h1>Nintendo<strong>GAME BOY<span>&#8482;</span></strong></h1>


  <nav class="mando" >
    <ul>
      <li class="up">
        <a href="#">
          &nbsp;
        </a>
        <span class="flecha">&nbsp;</span>
      </li>
      <li class="left">
        <a href="#">
          &nbsp;
        </a>
        <div class="giro1">
          <span class="flecha"  > &nbsp;</span>
        </div>
      </li>
      <li class="central">
        <a href="#">
          &nbsp;
        </a>
        <div class="centrocursores">
          <span id="burst-8">&nbsp;</span>
        </div>        
      </li>
      <li class="right">
        <a href="#">
          &nbsp;
        </a>
        <div class="giro2">
          <span class="flecha" > &nbsp;</span>
        </div>
      </li>
      <li class="down">
        <a href="#">
          &nbsp;
        </a>
        <div class="giro3">
          <span class="flecha"  >&nbsp;</span>
        </div>

      </li>
    </ul>
  </nav>

  <nav class="botonesab">
    <ul>
      <li class="botona"><a href="#">&nbsp;</a> <span>B</span>   </li>
      <li class="botonb"><a href="#">&nbsp;</a> <span>A</span>   </li>
    </ul>
  </nav>

  <nav class="botonesselect">
    <ul>
      <li class="selectbt"><a href="#">&nbsp;</a> <span>SELECT</span></li>
      <li class="startbt"><a href="#">&nbsp;</a> <span>START</span> </li>
    </ul>   
  </nav>

  <div class="altavoz">
    <ul>
      <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      <li>&nbsp;</li>
    </ul>   
  </div>

  <div class="auriculares">
    <h3><i class="fa fa-headphones"></i>PHONES</h3>
    <div class="bandasauriculares">
      <span>&nbsp;</span>
    </div>
  </div>

  <div class="volumen">

  </div>

</div>  <!-- FINAL DE CARCASA   -->
    

Ahora vamos al lío con el CSS3...

En esta composición usaremos degradados para obtener brillos y profundidad, así como para colorear la pantalla eligiendo unos colores similares y una dirección diagonal descendente.

Usaremos border-radius para contornear la GameBoy o para obtener círculos como los botones A y B.

En la GameBoy hay tres iconos: uno de auriculares, y dos flechas en el indicador On y OFF. Para ellos he utilizado Font-Awesome, una excelente colección de iconos gratuitos bajo licencia del MIT.

Se han usado, además de Font-Awesome, otras dos tipografías lo más similares posibles a las que aparecen en la GameBoy. Para esto se ha usado la propiedad @font-face de CSS3.

La tipografía de los botones A y B no la he encontrado, así que he probado con una parecida y la he transformado con un transform: scale para moldearla un poco.

El mando en forma de cruz me ha quedado muy mal y al rosita de los botones no le he terminado de pillar el punto...

Próximamente, versión en SVG con InkScape...

Artículo en construcción. Disculpen las molestias.