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
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.
a aqui.
https://www.fmoreno.com.mx/code/COATL/
[wpdm_package id=3794 template=”link-template-default.php”]