A tenor del aumento que están teniendo las descargas de mis apuntes de Álgebra, (será porque llegan los exámenes), os comparto también los apuntes (en lengua catalana) que corresponden a la asignatura d'Anàlisi Matemàtica (05.558) del 'Grau d'Enginyeria Informàtica' de la UOC (Universitat Oberta de Catalunya).
Si optáis por la descarga en formato Word, pensad que se abrirá una sesión del Google Docs, que entre otras cosas es incompatible con las fórmulas de Word y no se verán. Se soluciona descargando el archivo.
Si no usáis MS Office, descargaros el PDF o tendréis el mismo problema.
También podéis descargaros PACs de años anteriores aquí
También existen exámenes de Matemáticas II con contenido común aquí , y PACs de la misma aquí . Por cierto, si queréis colaborar en tener un buen repositorio para la asignatura, mandadme vuestras PAC's y Exámenes corregidos y los iré incluyendo en beneficio de los futuros estudiantes.
Debéis mandar un correo a furnimanQUITAESTO@terra.com (evidentemente quitando el QUITAESTO) :-)
Los juegos en dos dimensiones, ya sea un Arkanoid, un Comecocos o un juego de naves, se resuelven dividiendo la pantalla en una rejilla que servirá de base para localizar los elementos de nuestro juego.
Quizá el ejemplo más gráfico sea un laberinto. La idea es tener una matriz que describa cada celda de nuestra rejilla.
Tomemos el ejemplo de este laberinto apto para cualquiera de nuestros dirigentes:
Podemos ver que hay 3 tipos de celdas:
Una celda tipo 0, que será el suelo, o la nada si lo queréis llamar así.
Una celda tipo 1, que serán los muros exteriores.
Una celda tipo 2, que serán las paredes interiores del laberinto.
A efectos prácticos, el juego reaccionará de la misma manera en una celda tipo 1 y tipo 2, es decir, no dejará pasar a nuestro personaje. Sin embargo, el dibujo será distinto y de ahí, su diferenciación.
La matriz
Ya nos ha quedado claro que nuestro laberinto quedará definido por una matriz, así que intuitivamente haríamos lo siguiente:
Pero reflexionemos ahora realmente que posiciones representan estos elementos en la tabla:
[0][0] [0][1] [0][2] [0][3] ...
[1][0] [1][1] [1][2] [1][3] ...
[2][0] [2][1] [2][2] [2][3] ...
... ... ... ...
Si representamos intuitivamente las posiciones de la tabla por las coordenadas (x,y), vemos que las horizontales vienen representadas por las 'y' y las verticales por las 'x'. Es decir, justo al contrario de lo que hemos intuido.
¿Cómo podemos resolverlo?
Podemos montar la matriz cambiando filas por columnas, o podemos hacer lo mismo matemáticamente con un procedimiento que calcule la matriz traspuesta (que es como se llama en matemáticas cambiar filas por columnas), o bien podemos ser mucho más guarros y hacer lo que haremos en el ejemplo:
Nos olvidaremos del detalle de que las filas y columnas están invertidas y programaremos el algoritmo como si las horizontales fueran las 'x' y las verticales las 'y', y en el momento de coger el valor de la matriz lo cogeremos como tabla[y][x], en lugar de tabla[x][y].
Ejemplo:
for (var x =0; x <número de columnas; x++) { for (var y =0; y <número de filas; y++) {
if (mapa[y][x]==1) {
Pintamos una entidad de tipo muro exterior;
} } }
Como que desde el momento que pintamos la celda esta adquiere un entidad propia, ya no volveremos a leer la matriz y no tendremos que volver a hacer cosas extrañas, ya que desde este punto las 'x' serán 'x' y las 'y' serán 'y'.
El canvas
El canvas es el tápiz en el que dibujaremos nuestro laberinto. El primer paso que tenemos que hacer es definir su tamaño. (Aquí lo podeis ver con más detalle). ¿Pero cuál es ese tamaño? Lo podemos deducir de la matriz.
Para ello declararemos dos propiedades que definan el tamaño de la celda:
anchoCelda :32,
altoCelda :32,
Así pues la anchura del cavas será el número de columnas del mapa * anchoCelda y su altura el número de filas del mapa * altoCelda.
Teniendo en cuenta que en Javascript las matrices como tal no existen si no que son arrays de arrays, el número de filas (o largo) del mapa, es el número de elementos del array, y el número de columnas (o ancho) del mapa, es el número de elementos de cualquiera de los arrays (por ejemplo el 0).
var anchoCanvas = mapa[0].length * Game.anchoCelda; var largoCanvas = mapa.length * Game.altoCelda;
Colocando las celdas
Con todo lo anterior tenemos una matriz de 10 x 10 elementos (o celdas) para colocar sobre un tapiz (o canvas) de 320 x 320. ¿Cómo hallar las 'x' y las 'y' efectivas? Pues multiplicando la posición de la matriz por el ancho o el alto de la celda.
Así pues:
mapa[0][0] : x = 0 * 32 , y = 0 * 32
mapa[0][1] : x = 0 * 32 , y = 1 * 32
mapa[4][3] : x = 4 * 32 , y = 3 * 32
Notad que estoy obviando en el planteamiento lógico la transposición de la matriz como hemos dicho que haríamos.
El algoritmo
Con todo esto ya estamos en disposición de presentar el código:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Una entidad es cualquier cosa que exista en nuestro juego y que tenga un comportamiento de cualquier tipo, aunque sólo sea visualizarse. Es decir, todo lo que no sea la imagen de fondo de pantalla será seguramente una entidad.
Para crear una entidad, Crafty tiene un evento que se llama simplemente e.
Esto nos crea una entidad en las coordenadas (100,10) de nuestro canvas o lienzo, con una dimensión 100 x 100 (o sea un cuadrado) y lo pinta de azul.
Realmente sólo la primera línea del código anterior pertenece a e. Esa línea crea una entidad a la que añade los componentes2D, Canvas y Color. Un componente especifica un conjunto de datos y comportamientos que se pueden aplicar a una o más entidad. Es más, un componente puede requerir que exista otro componente previo y pueden ofrecer comportamientos combinados, pero eso ya lo iremos viendo.
El caso es que .attr es un método del componente2D que inicializa sus propiedades.
Entre ellas tenemos x e y, que posicionan en nuestro canvas la esquina superior izquierda de nuestra entidad. La posición (0,0) del canvas está también en la esquina superior izquierda. La x es la componente horizontal y aumenta hacia la derecha. La y es la componente vertical y aumenta hacia abajo.
w es el ancho de la entidad y h su altura.
NOTA: También existe una componente z (cosa rara trabajando en 2D). Su única función es que cuando dos entidades se superponen, quien tenga la z mayor, se mostrará sobre el resto.
Otras de las propiedades de 2D son:
alpha: Indica la transparencia de una entidad. Toma un valor decimal comprendido entre 0.0 que es transparente y el 1.0 que es totalmente opaco.
rotation: Provoca que la entidad gire un número de grados determinado sobre su punto (x,y), es decir, sobre su esquina superior izquierda. (El punto de rotación puede cambiarse pero ya se verá). La rotación se efectúa en sentido de las agujas del reloj, si bien podemos poner valores negativos.
visible: Exactamente eso. Puede tomar los valores TRUE y FALSE.
Por último, como veréis en el ejemplo, el color puede definirse también dando la descomposición RGB.
Veamos ahora el ejemplo:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Parece que después de años de reinado de Flash en los juegos de navegador, se empieza a imponer el HTML5 gracias a los dispositivos móviles que no soportan Flash.
Esto me ha despertado la curiosidad y he hecho un pequeño estudio del tema. Lo que más me ha llamado la atención ha sido la multitud de 'frameworks' o librerías en Javascript para facilitar el desarrollo de juegos en esta plataforma. Podéis ver unos cuantos aquí.
El caso es que después de estudiármelos todos el que más me ha llamado la atención es Crafty.
Y ¿por qué? Porque es gratuito, tiene bastante documentación y parece bastante sencillito.
Vamos a probarlo:
Instalación de CraftyJS
1.- Nos bajamos CraftyJS de su página. Click aquí.
2.- Creamos una carpeta en nuestro disco.
3.- Por convención, dentro de nuestra carpeta creamos otras tres.
\assets Donde colocaremos los archivos multimedia que utilicemos en nuestro desarrollo. \lib Ahí irá la librería de Crafty que nos acabamos de bajar. \scr Aquí irán nuestros fuentes.
4.- Copiamos la librería de Crafty en la carpeta \lib.
Y ya está!
Nuestro primer programa
1.- Creamos un fichero que se llame game.js en nuestra carpeta de fuentes. ¿Recordamos cuál es? Sí, muy bien \scr.
2.- Copiamos el siguiente código dentro de game.js
Game={
// Inicializa y arranca nuestro juego
start:function(){
// Inicia crafty y establece un color de fondo para que podamos ver que funciona
Crafty.init(480,320);
Crafty.background('green');
}
}
Analicemos esto:
Ésto es una clase que se llama game, en la que definimos una propiedad llamada start que inicializamos mediante una función.
Esta función, inicializa Crafty dando el tamaño del canvas o lienzo sobre el que ejecutaremos nuestro programa.
3.- Pero todo corre en una página web, con lo que tendremos que tener un html que soporte esto. Crearemos un archivo index.html en la carpeta raíz que hemos creado y le copiaremos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<scriptsrc="lib/crafty.js"></script>
<scriptsrc="src/game.js"></script>
<script>
window.addEventListener('load',Game.start);
</script>
</head>
<body>
</body>
</html>
Aquí lo que hacemos es cargar nuestras librerías, tanto la de crafty como la de nuestro código y cargamos nuestra clase Game llamando a su propiedad start.
