1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial como hacer The Matrix Coding

Tema en 'Tutoriales de Javascript' comenzado por TheMatrixNeo1987, 30 de Enero de 2015.

  1. TheMatrixNeo1987

    TheMatrixNeo1987 Nuevo Miembro

    Se incorporó:
    13 de Enero de 2015
    Mensajes:
    22
    Me gusta recibidos:
    9
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Desarrollador en .NET
    Localización:
    Aguacalientes, Mexico
    Página web:
    Código (Text):
    window.onload=matrix;

    function matrix(){
        var objCanvas=document.getElementById("neo"); //Obtenemos el identificador con sus propiedades del canvas
        objCanvas.width=window.innerWidth; //Obtenemos el ancho de la pantalla que posea el usuario
        objCanvas.height=window.innerHeight;//Obtenemos el alto de la pantalla que posea el usuario

        var letraTam=15;//Tamaño de la letra a mostrar
        var columnas=objCanvas.width/letraTam; //Dividimos el ancho en px y el tamano de la letra. Esto nos
        //dara como resultado el numero de columnas que utilizaremos para mostrar cada letra. el tamano de la letra es
        //15px por 15px

        var Texto="0"; //Este sera el primer texto que utilizaremos. En este caso el NUM "0"
        var Texto2="1";//Este sera el segundo texto que utilizaremos. En este caso el NUM "1"
        //Nos permite guardar cada palabra en una posicion vectorial. ejemplo
        // la palabra "hola" tiene 4 letras osea que el vector seria de 4 posiciones
        Texto=Texto.split("");
        Texto2=Texto2.split("");

        var letras=[];//creamos un vector
        for(var i=0;i<columnas;i++){
            letras[i]=1;//le asinamos un valor a cada columna. En este caso sera de 1. Mas adelante veremos porque
        }
        contexto=objCanvas.getContext("2d");//Le decimos a JavaScript en que contexto vamos a trabajar. en este caso 2 dimensiones

        //Ahora necesitamos crear una funcion llamada dibbujar. La cual se encarga de toda la magia
        function dibujar(){
            //procederemos a dibujar el entorno de trabajo. un rectangulo el cual contendra las frases o numeros etc
            contexto.fillStyle="rgba(0,0,0,0.05)";//Le asignamos transparencia con el valor de 0.05
            contexto.fillRect(0,0,objCanvas.width,objCanvas.height);//Le decimos que ocupara toda la pantalla.y empezara en la posicion 0,0

            contexto.fillStyle="#0f0"; //Creamos otro fillstyle el cual tendrea el color de las letras. como vemos en el ejemplo funcionando
            contexto.font=letraTam+"px arial"; //le asignamos el tamaño que tendra la letra. el cual definimos en la parte superior
         
            for(var i=0;i<letras.length;i++)//Estamos diciendo que recorra el tamaño de las posiciones del vector letras
            {
                text=Texto;//Le asignamos a la variable text el Texto que en este caso es "0"
                text2=Texto2;//Le asignamos a la variable text2 el Texto2 que en este caso es "1"
                if(i%2==1){
                    contexto.fillText(text,i*letraTam,letras[i]*letraTam);//La propiedad fillText tiene estos parametros fillText(texto, x ,y)
                    //Como pueden ver tenemos las posiciones X y Y las cuales nos servira para saber donde ubicaremos los numeros o texto
                    //Cada numero representa una posicion. por eso averiguamos el ancho y el alto de la pantalla. asi como
                    //el numero de columnas que se crean para una letra de tamano 15 px.

                }else{
                    contexto.fillText(text2,i*letraTam,letras[i]*letraTam);
                }
                if(letras[i]*letraTam> objCanvas.height && Math.random()>0.975)//Esto me permitira darle aleatoriedad al programa. despues de que se cumpla la actura.
                {
                    letras[i]=0; //Si se cumple esas condiciones. decimos que empieze desde la posicion 0
                }
                letras[i]++;
            }



        }
        setInterval(dibujar,120);//Decimos que se ejecute la funcion dibujar cada 120 milisegundos

        //Con esto hemos terminado el pequeño script

    }
    perdon por lo corto es q ando de rapido
     
    Última modificación: 30 de Enero de 2015
  2. AyuukJaay

    AyuukJaay Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    149
    Me gusta recibidos:
    69
    Puntos de trofeos:
    28
    Género:
    Hombre
    Página web:
    A agusti le gusta esto.

Comparte esta página