Home

The Brick Web wiki!

En está sección se mostrará la forma de creación de juegos haciendo uso de la librerías creadas para tal fin.

Carga de Juegos.

Para la creación de un nuevo juego es necesario la carga del mismo a través del archivo games.json que contiene algunas propiedades del juego.

{
		"name" 			: "TETRIS", 
		"base"			: "tetris", 
		"icon"			: "tetris.png", 
		"local"			: "tetris",
		"script"		: "script.js", 
		"max"			: 5, 
		"percentage" 	: 10, 
		"velbase"		: 30
}

• name : Contiene el nombre del juego.
• base : Es el nombre de la carpeta donde estará alojado el juego.
• icon : El ícono que representará el juego, por defecto está almacenado en la carpeta img del proyecto del juego.
• local : El nombre que se guardará en localStorage el valor de la puntuación que lleva el usuario.
• script : Nombre del script que ejecuta el juego.
• max : El valor máximo para avanzar a un nuevo nivel.
• velbase : El valor inicial de la velocidad con la que iniciará la dinámica del juego.
• percentage : Valor que disminuirá la velocidad en proporción al avance en un nuevo nivel.

Uso de figuras.

Por defecto el juego cuenta con una serie de figuras para su uso en los diferentes juegos, estas son cargadas a través del archivo figuras.json y pueden ser accedidas a través de la variable figures

Estructura básica de un juego.

var FPS = movement.BASE - movement.BASE * ((dataLCD.SPEED - 1) * movement.PERCENTAGE) / 100;

//Teclado - Barra espaciadora...
input.ENTER.press = function(event)
{
	//Tiempo en que se considerará que el botón está sostenido...
	//0 no tendrá está propiedad...
	this.timePress = 0.5;
};

input.LEFT.press = function(event)
{
	this.timePress = 0.5;
};

input.TOP.press = function(event)
{
	this.timePress = 0.5;
};

input.RIGHT.press = function(event)
{
	this.timePress = 0.5;
};

input.BOTTOM.press = function(event)
{
	this.timePress = 0.5;
};

var render = function()
{
	//input.ENTER.sustained
	//input.LEFT.sustained
	//input.TOP.sustained
	//input.RIGHT.sustained
	//input.BOTTOM.sustained
	if(movement.CUENTA >= FPS)
	{
		
	}
	movement.CUENTA++;
};

Todos los juegos heredarán elementos comunes, como es el caso de los input's además del manejo del LCD para la impresión de los elementos.

Render

La función render() hace la actualización del canvas del juego, en esta se debe realizar la impresión de las figuras y acciones del juego, la velocidad de ejecución de está es de 60 FPS, haciendo uso de requestAnimationFrame() para tal fin.

Para la validación de la velocidad de las figuras se hace uso de la siguiente ecuación.

var FPS = movement.BASE - movement.BASE * ((dataLCD.SPEED - 1) * movement.PERCENTAGE) / 100;

Inputs

El juego contiene en total 5 botones principales, cada uno de ellos con sus eventos, además del funcionamientos tanto en dispositivos móviles a través de eventos touch, como en escritorio haciendo uso del mouse o teclado.

Acciones y eventos de los Input's.

input.BOTTOM.press = function(event)
{
	this.timePress = 0.5;
};

Función que se ejecuta una vez se detecta que se ha presionado un botón, al interior de está función es posible aplicar la propiedad this.timePress que indica el tiempo en que un botón se considera que es sostenido, si el valor de este es cero (0) (valor por defecto), quiere decir que no tendrá la acción de evento sostenido.

Alguno de los juegos requieren eventos sostenidos, como es el caso del Tetris Game para acelerar la caída de una figura, para indicar en el render() que un botón está presionado se utiliza la propiedad sustained

//Ejemplo botón "ENTER" sostenido
if(input.ENTER.sustained)

Impresión de una figura.

Para imprimir una figura existen dos propiedades como son:

pantalla.dibujarCelda();

La cual sirve para imprimir una celda en pantalla.

pantalla.dibujarCelda({
									x : 0, 
									y : 0, 
									activado : true, 
									color : "black"
								});

pantalla.dibujarCelda();

pantalla.imprimeFigura({
						x			: 5, 
						y 			: 0, 
						puntos		: figures["LINETWO"].TOP, 
						color		: "black"
					});

Está función realiza la impresión de una figura del vector de figures

pantalla.miniLCD("TOP", "Z");

Dirección de la figura y nombre de la figura.