Las sombras de la gran guerra

info@fmoreno.com.mx

fmoreno web site

Usando modernizr.js para Reto Coatl

Ahora despues de algunas semanas de post bรกsicos de HTML, CSS y Javascript, empezaremos con un ย el Reto Coatl,ย esto sera si mal no recuerdan con el primer paso, y para esto empezaremos a utilizar una herramienta ย que nos facilitara este proceso, la herramienta se llama modernizr.js.

CREANDO SLPASH SCREEN

Splash Page
Splash Page

Modernizr es una librerรญa Javascript que nos permite conocer la compatibilidad del navegador con tecnologรญas HTML5 y CSS3, para hacer sitios web que se adaptan a cada browser, y el primer paso sera ir aย Modernizr en: http://www.modernizr.com, y desacargar la version que necesitemos.

ยฟporque Modernizr?

Modernizr es un paquete de librerรญas orientado para los desarrolladores que quieren crear sitios web con las tecnologรญas mรกs modernas, lรฉase CSS3 y HTML5, pero que no quieren olvidarse de la compatibilidad con navegadores antiguos, asi que lo primero sera buscar que nuestro juego sirva en todos los navegadores existentes y casi en todos.

Lo primero y mas sencillo es crear nuestro HTML y agregar la liga para Moderniz y un loader, si un archivo javascript que se encargue de realizar la carga de nuestras paginas del juego, esto para tener mas velocidad en todo el proceso, claro a travez de Modernizr.load() que estรก basado en unas librerรญas llamadas yepnope.js que sirven bรกsicamente para cargar librerรญas, solo cuando los usuarios las necesitan. Se trata de un sencillo mรฉtodo que permite evaluar una condiciรณn y decir quรฉ librerรญas cargar cuando se cumpla y cuรกles cuando no.

 

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reto Coatl</title>
<link href='http://fonts.googleapis.com/css?family=Geo|Slackey' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/modernizr.js"></script>
<script src="scripts/loader.js"></script> 
</head>
<body>
<div id="game">
<div class="screen" id="splash-screen">
<h1 class="logo">Reto <br/>Coatl</h1>
<div id="pb">     
        <div id="progress">
            <div id="entrar">Entrar!</div>
        </div>
        Cargando...
    </div>
<div class="screen" id="main-menu"></div>
<div class="screen" id="game-screen"></div>
<div class="screen" id="high-scores"></div>
</div>
</div>
</body>
</html>

Ahora veamos el archivo ย loader.js, y este archivo verรกn como se realizo la primero el uso de modernizr.load la carga de los scripts, que en este caso son 3, sizzle.js, dom.js y game.js, estos tres archivos ย serรกn los que controlaran todo el juego, bueno por ahora no haran nada solo seran parte de este ejercicio como esqueleto.

var coatl = {};
// Espera que el documento cargue
window.addEventListener("load", function() {
// Iniciar carga dinamica
Modernizr.load([
{
// Cargar siempre estos archivos
load : [
"scripts/sizzle.js",
"scripts/dom.js",
"scripts/game.js"
],
// llama funciรณn cuando termine
// y ejecuta
complete : function() {
coatl.game.showScreen("splash-screen");
}
}
]);
}, false);

Se que algunos se estaran preguntando que es Sizzle, pues ย bรกsicamente es un motor de selectores hecho en Javascript, que nos ayuda a controlar los eventos y algunas otras caracterรญsticas, con solo 4 kb de tamaรฑo.

Sus caracterรญsticas son:

  • Completamente independienteย (sin dependencias de otrasย librerรญas)
  • Desempeรฑo competitivoย deย los selectoresย mรกs usados
  • Sรณloย 4 KBย y comprimido
  • Altamente extensibleย conย fรกcilย uso de la API
  • Diseรฑadoย para un rendimiento รณptimoย con laย delegaciรณn de eventos

Claro que aun no tenemos nada en la pantalla y todo se vera horrible, asi que aplicaremos lo que hoy gracias a CSS que ya conocemos muy bien podemos hacer, agregando este codigo.

body {
margin : 0;
}
span{
	color:black;
}
#game {
position : absolute;
left : 0;
top : 0;
width : 320px;
height : 480px;
/*background-color : rgb(30,30,30);*/
background-image: url("../images/back.png");
font-family : Geo;
color : rgb(200,200,100);
}
#game .screen {
position : absolute;
width : 100%;
height : 100%;
display : none;
z-index : 10;
}
#game .screen.active {
display : block;
} 
#splash-screen {
text-align : center;
padding-top : 100px;
}
#splash-screen .continue {
cursor : pointer;
font-size : 30px;
}
.logo {
font-family : Slackey;
font-size :60px;
line-height : 60px;
margin : 0;
text-align: center;
color : rgb(70,120,20);
text-shadow : 1px 1px 2px rgb(255,255,0),
-1px -1px 2px rgb(255,255,0),
5px 8px 8px rgb(0,0,0);
} 

.no-textshadow .logo {
	filter : dropshadow(color=#000000,offX=3,offY=3);
}
#pb {
        -webkit-box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);        
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);
        background: url(../images/subtle_surface.png);
        width:250px;
        height:28px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-19px;
        margin-left:-125px;
        border-radius:8px;
        border-top:2px solid #DDD;
        border-left:2px solid #DDD;
        border-bottom:2px solid #BBB;
        border-right:2px solid #BBB;
        padding:3px;
        overflow:hidden;
        text-align:center;
        line-height:38px;
        font-size:14px;
        font-weight:bold;
        color:#666;
    }
    #progress {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        height:28px;
        width:48px;
        background-color: #0080FF;
        border-radius:6px;
        background: #6db3f2;
        background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-8 */
        -webkit-box-shadow: inset 0px 0px 5px  rgba(0, 0, 0, 0.2), 2px 2px 5px  rgba(0, 0, 0, 0.2);        
        box-shadow: inset 0px 0px 5px  rgba(0, 0, 0, 0.2), 2px 2px 5px  rgba(0, 0, 0, 0.2);
        position:absolute;
        overflow:hidden;      
    }
    #entrar:active {
        -webkit-box-shadow: inset 0px 0px 18px  rgba(0, 0, 0, 0.4);        
        box-shadow: inset 0px 0px 18px  rgba(0, 0, 0, 0.4);
        border-radius:6px;
    }
    #entrar {
        text-align:center;
        line-height:28px;
        font-size:14px;
        font-weight:bold;
        color:#EEE;
        height:28px;
        width:250px;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.2);      
        cursor:pointer;  
    }
    #pb:hover #progress{
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        width:250px;
    }

Sizzle hace que la bรบsqueda fuera elementos en el DOM sea mas fรกcil, pero siempre se puede utilizar un par de funciones de ayuda adicionales para manipular elementos DOM . Eso es lo que ofrece el mรณdulo dom.js.

coatl.dom = (function() {
var $ = Sizzle;
function hasClass(el, clsName) {
var regex = new RegExp("(^|\s)" + clsName + "(\s|$)");
return regex.test(el.className);
}
function addClass(el, clsName) {
if (!hasClass(el, clsName)) {
el.className += " "  + clsName;
}
}
function removeClass(el, clsName) {
var regex = new RegExp("(^|\s)" + clsName + "(\s|$)");
el.className = el.className.replace(regex, " ");
}
return {
$ : $,
hasClass : hasClass,
addClass : addClass,
removeClass : removeClass
};
})();

Toda la funcionalidad se define dentro de una funciรณn anรณnima que devuelve un objeto literal con referencias a las funciones que deben ser expuestos al mundo exterior . La funciรณn anรณnima se invoca inmediatamente y el valor de retorno se asigna a una propiedadย llamada coatl.

Este enfoque modular es una manera fรกcil de mantener el cรณdigo de la aplicaciรณn en elย รกmbito global. La encapsulaciรณn en una funciรณn anรณnima oculta con eficacia, para bien o para mal , todas las variables y funciones declaradas dentro del mรณdulo que no se hagan de forma explรญcita al pรบblico.

El mรณdulo coatl.dom inicialmente sรณlo tiene algunas funciones para manipular clases CSS . El mรณdulo tambiรฉn expone una funciรณn $ (), que es sรณlo una referencia a la funciรณn del sizzle(). La funciรณn hasClass () examina el atributo className de un elemento dado y devuelve true si se ha encontrado la clase especificada. Las funciones addClass () y removeClass () hacen lo que anuncian ; es decir, aรฑadir o eliminar una clase CSS especificado de un elemento. Por esto no nos preocupemos ahora pero si quieren podemos empezar a declararlo en el proyecto.

coatl.game = (function() {
var dom = coatl.dom,
$ = dom.$;
// hide the active screen (if any) and show the screen
// with the specified id
function showScreen(screenId) {
var activeScreen = $("#game .screen.active")[0],
screen = $("#" + screenId)[0];
if (activeScreen) {
dom.removeClass(screen, "active");
}
dom.addClass(screen, "active");
}
// expose public methods
return {
showScreen : showScreen
};
})();

El script game.js define el mรณdulo siguiente, coatl.game , que proporciona la lรณgica de aplicaciรณn bรกsica, como la conmutaciรณn entre los estados del juego, el avance entre las etapas y niveles y demas estados.

Por desgracia el mejor diseรฑador grรกfico que conosco na ha podido ayudarme a darle un poco de imagen a este proyecto, asรญ que me he tomado yo la labor de diseรฑador y verรกn que no soy para nada bueno asi que acepto sugerencias.

Pero el objetivo era ir de aqui.

 

Splash Page
Splash Page

a aqui.

http://www.fmoreno.com.mx/code/COATL/

coatl1

[wpdm_package id=3794 template=ยปlink-template-default.phpยป]

admin

Search

Tags

Todavรญa no hay contenido que mostrar aquรญ.

Shop

Categories

Recent Posts