19.- Juegos y Multimedia en HTML5 - Aplicando estilo al menú de un juego.

En el anterior videotutorial aprendimos a crear un menú sencillo para nuestros juegos o aplicaciones en HTML5, pero lo dejamos incompleto. En el capítulo 19 del curso (este que estás viendo :P) vamos a usar CSS para aplicarle estilos a todos los elementos y de esa forma conseguir un menú mucho más amigable.
Se hará uso de transiciones CSS sencillas, así como pseudoclases CSS como hover.



El código del archivo con el que se trabaja en el videotutorial es el que se muestra bajo estas líneas. Puedes visitar la página en funcionamiento aquí.
<!DOCTYPE html>
<html>
    <head>
        <title>Menu</title>
    </head>
    <style>

        @font-face {
            font-family: "danube";
            src: url("fonts/danube.woff") format("woff"),
                url("fonts/danube.ttf") format("truetype");
        }

        .hidden {
            -webkit-transition: opacity 1s;
            z-index: 0;
            opacity: 0;
        }

        .visible {
            -webkit-transition: opacity 1s;
            z-index: 1;
            opacity: 1;
        }

        .frame {
            position: absolute;
            width: 600px;
            height: 500px;
            font-family: "danube";

            color: white;
            text-shadow: 0px 0px 20px #00FF00;
            -webkit-user-select: none;
            font-size: 25px;
        }

        .frame button {
            -webkit-transition: border-radius 1s, text-shadow 1s, color 1s;

            font-family: "danube";
            font-size: 30px;
            color: #EEE;

            margin: 10px;
            padding: 10px;
            width: 300px;

            background: none;
            text-shadow: 0px 0px 8px white;

            border: 1px solid #dedede;
            border-radius: 3px;
            text-decoration: none;

            border-color: #8dc5da #76b7cf #63abc7;
            box-shadow: 0px 3px 5px rgba(255, 255, 255, 0.5);
        }

        .frame button:hover {
            border-radius: 20px;
            text-shadow: 0px 0px 50px white;
            color: white;
        }

        .frame button:active {
            text-shadow: 0px 0px 20px #00FF00;
        }

        body {
            text-align: center;
            margin: 0 auto;
            width: 600px;
            height: 500px;
            margin-top: 50px;
            background-image: url('img/back1.jpg');
        }

    </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');">
                    Creditos
                </button>
            </div>
            <div id="canvas" class="frame hidden">
                <canvas></canvas>
                <button onclick="game.setFrameVisible('main');game.setFrameHidden('canvas');">
                    Volver al menu
                </button>
            </div>
            <div id="highscores" class="frame hidden">
                <h1>
                    Puntuaciones mas altas
                </h1>
                <button onclick="game.setFrameVisible('main');game.setFrameHidden('highscores');">
                    Volver al menu
                </button>
            </div>
            <div id="about" class="frame hidden">
                <h2>
                    ProgrammingHeroes
                </h2>
                <br />
                <a href="http://programmingheroes.blogspot.com.es/">
                    <img src="img/ph.png" style="width: 100px; height: 120px;"/>
                </a>
                <br />
                <button onclick="game.setFrameVisible('main');game.setFrameHidden('about');">
                    Volver al menu
                </button>
            </div>
        </div>
    </body>
</html>


No hay comentarios :

Publicar un comentario