Simulacion de la consola de Matrix, utilizando HTML5, JavaScript.
Con este Script en JavaScript, se pretende mostrar como podemos aprovechar el potencial de HTML5 para la creacion de juegos, animaciones, paginas web y otras utilidades. Solo se utilizan los lenguajes soportados por todos los navegadores web actuales, sin la necesidad de recurir a un lenguaje del lado del servidor. Gracias a que todo el codigo se ejecuta del lado del cliente, la velocidad es notoria y el rendimiento es mayor.
Para correr el ejemplo, solo es necesario descargar el codigo fuente de GitHub y hacer clic en el INDEX.HTML
js Carpeta codigo fuente principal
readme.md Instruccionesy guia rapida
index.html Pagina principal que ejecuta el Script
En la carpeta JS, se observan varios Scripts. Cada Script es un ejemplo de MatrixJS.
En el index.html se observa la plantailla basica del desarrollo. La cual utiliza un Canvas del tamaño de la pantalla con un fondo negro. A continuacion se observa el codigo:
<html>
<head>
<title>MatrixJS By Locoalien</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/matrix.js"></script><!--Script principal-->
<style type="text/css">
* {margin: 0; padding: 0;}
canvas {display: block;}
body {background: black;}
</style>
</head>
<body>
<canvas id="locoalien"></canvas><!--Creacion del canvas en el cual se mostrara la ejecucion del script-->
</body>
</html>
Ahora se explicara cada linea de codigo de JavaScript, y la logica empleada para llegar al resultado final. La idea principal, es que usted como estudiante o desarrollador, pueda aportar y modificar a su antonjo el Script.
En la siguiente linea de codigo se observa como se llama a la funcion principal, una vez el diseño o pagina HTML es cargada completamente. En este caso el INDEX.HTML
window.onload = matrixjs;
Se crea una funcion llamada matrixjs, la cual contendra todo el codigo principal.
function matrixjs(){
//Codigo de principal
}
Analizaremos cada linea de esta funcion. La siguiente linea permite obtener el identificador del canvas, el cual se almacenara en una variable llamada C. Se hace uso del DOM de JavaScript para obtener mediante document.getElementById las propiedades y elementos del canvas.
var c = document.getElementById("locoalien");
Las siguientes lineas de codigo seran importantes, ya que definen el ancho y alto de la animacion en Canvas. Para acceder a estas propiedades del Canvas haciendo enfacis de que se trata de la pantalla, llamandolo con la propiedad "window".
c.height = window.innerHeight;
c.width = window.innerWidth;
Se crea una variable que tendra el tamaño de la letra Matrix. Obtendremos el numero total de columnas gracias a la division del tamaño de la letra y el ancho de la pantalla.
var letraTam=15;
var columnas=c.width/letraTam;
Se crea a continacion un vector, en el cual se almacenara el valor de la letra. Recordar que para el caso de este programa y para brindar un mayor "Realismo", las letras apareceran aleatoriamente teniendo encuenta todos los lenguajes y sintaxis encontrados en la tabla ASCII. Esto se vera mas detalladamente mas adelante.
var letras=[];
La siguiente linea de codigo, permitira inicializar el vector con el numero "1", el cual lo haremos con un ciclo "FOR" recorriendo el numero total de columnas que se encuentran en la pantalla.
for(var i=0; i<columnas;i++){
letras[i]=1;
}
Cuando se trabaja con JavaScript y a su vez con Canvas, es necesario definir el contexto de este mismo. Para esto se agrega la siguiente linea donde "C" es el canvas creado anteriormente, y la propiedad "getContext" me permite definir el contexto del Canvas que en este caso sera en 2D.
contexto= c.getContext('2d');
Se crea una funcion llamada "Dibujar". Como su nombre indica, permitira dibujar y crear la animacion final, que dara la apariencia de la pelicula "Matrix". Para esto se utilizan las siguientes lineas de codigo:
Definimos el color que tendra el fondo del canvas. Para definir un fondo a algun objeto en JavaScript se utiliza la propiedad de fillStyle.
contexto.fillStyle="rgba(0,0,0,0.05)";
El contexto representa las propiedades que se asignaran al Canvas. Ahora se creara un cuadrado en el cual estara toda la animacion y efectos para la letra de "Matrix". Para crear un cuadrado en JavaScript se utiliza la propiedad fillRect, la cual tiene como parametros las coordenadas iniciales y finales del canvas. Obtenemos el ancho del Canvas (c.width) y la altura del canvas (c.height).
contexto.fillRect(0,0,c.width,c.height);
A continuacion se define el tamaño de la letra y la fuente mediente la propiedad "font" haciendo referencia al contexto en el cual estamos trabajando.
contexto.font= letraTam+"px arial";
Para crear la animacion hay varios conceptos que tenemos que tener claros.