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 Creación de un mini Juego part.1

Tema en 'Tutoriales de Javascript' comenzado por gammafp, 5 de Octubre de 2015.

?

¿Queréis seguir con esta serie de tutoriales?

  1. SÍ.

    4 votos
    100,0%
  2. No gracias yo ya soy un genio.

    0 votos
    0,0%
  1. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    ¡SALUDOS!
    Viendo por la web he visto algunos códigos que estaría interesante aplicarlo, y entonces quería practicar su implementación y decidí hacerlo por este medio.

    Vista previa de como quedará:
    [​IMG]

    Hoy solo dibujaremos un cuadrado en un lienzo (canvas).
    Lo que necesitamos tener claro son las cosas que vamos a usar (la tecnología), para este capitulo usaremos esto:
    document.getElementById() = sirve para para obtener la referencia de un objeto del HTML.
    .getContext("2d") = nos servirá para obtener la referncia 2D del lienzo (canvas).
    .fillStyle = nos servirá para definir el color de un objeto que crearemos (en este caso será un cuadrado).
    .fillRect() = nos servirá para crear el cuadrado, el cual dentro de los paréntesis se le pasan cuatro parámetros los cuales serian (posiciónX, posiciónY, tamañoX, tamañoY).
    Y con esto ya tendríamos todo lo necesario para crear el cuadrado dentro del lienzo, claro que tenemos que saber como funcionan las funciones valga la redundancia, pues empecemos con el código.

    NOTA: contaminaremos un poco la zona global para ver el ejemplo mas claro y rápido, en algo real podríamos usar el patrón modulo.
    -----------------------------------------------------------------------------------------------------------
    Primero crearemos el HTML que llamaremos "index.html" que será la base donde estará el canvas (acá no hay mucha explicación solo se agrega la etiqueta <canvas></canvas> y linkaremos el archivo javascript).

    HTML:

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>es</title>
        <style>
           #canvas {
                background-color: orangered;
            }
        </style>
    <!-- Acá se linkea el JavaScript -->
        <script src="app.js"></script>[/COLOR]
    </head>
    <body>
         <canvas width="800" height="400" id="canvas"></canvas>
    </body>
    </html>
     

    Vale ya tenemos creado el HTML que le hemos llamado index.html y ahora procederemos a crear un archivo app.js el cual contendrá todo el código del canvas y usaremos este código:

    Primero creamos un evento que estará constantemente a la escucha para que cuando cargue la página este cargue el JavaScript de último.
    Código (Javascript):

    // Las variables irán hasta arriba y el addEventListener irá hasta abajo.
    var canv = null;
    var ctx = null;
    /* ... Acá irá el resto del código... */
    window.addEventListener('load', inicio, false);
     
    Luego en la función inicio() crearemos el contexto del canvas:
    Código (Javascript):

    var canv = null;
    var ctx = null;

       function inicio() {
            canv = document.getElementById("canvas");  
            ctx = canv.getContext("2d");
            dibujar(ctx);
        }

    window.addEventListener('load', inicio, false);
     
    Y por ultimo dibujamos el cuadro con fillRect y le damos color con fillStyle:
    Código (Javascript):

    var canv = null;
    var ctx = null;
      function dibujar(ctx) {
            ctx.fillStyle = 'blue';
            ctx.fillRect(100, 80, 20, 20);
        }

    function inicio() {
            canv = document.getElementById("canvas");  
            ctx = canv.getContext("2d");
            dibujar(ctx);
        }
    window.addEventListener('load', inicio, false);
     
    Y acá está todo el código del JavaScript unido (final):
    Código (Javascript):

    var canv = null;
    var ctx = null;
    function dibujar(ctx) {
        ctx.fillStyle = 'blue';
        ctx.fillRect(100, 80, 20, 20);
    }
    function inicio() {
        canv = document.getElementById("canvas");  
        ctx = canv.getContext("2d");
        dibujar(ctx);
    }
        window.addEventListener('load', inicio, false);
     
    Y con esto ya tenemos el primer ejemplo de como dibujar un cuadrado.
    En el próximo capitulo aprenderemos a animarlo o a crear un bucle el cual nos ayudará a animarlo.

    Y acá la muestra de como queda:

    [​IMG]

    EJEMPLO EN CODEPEN AQUÍ
    DESCARGA EL CÓDIGO COMPLETO ABAJO.
     

    Archivos adjuntos:

    • juego.zip
      Tamaño de archivo:
      601 bytes
      Visitas:
      2
    Última modificación: 6 de Octubre de 2015
    A fede5426 y RodrigoT les gusta esto.
  2. Heissun V.R.

    Heissun V.R. Nuevo Miembro

    Se incorporó:
    28 de Agosto de 2015
    Mensajes:
    18
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Perú-Piura:Paita
    Hola saludos desde Perú, necesito tu ayuda, quiero crear una página web multilenguaje y no quiero que el navegador suspenda la página...
    Ayúdame...
     
  3. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    Y esto no viene a cuento en este tema, si necesitas ayuda publica el post. Saludos.
     
  4. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Yo quiero que traigas mas tutoriales sobre esto esta interesante pero una cosa cuando pones
    Y dices que es todo el codigo porque ya no pone lo de color?
    y ademas en ese mismo cuadro pone lo mismo que abajo quitando lo de color o_O no entiendo XD
     
  5. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    Lo de
    Código (Text):
    [color=#000000]...[/color]
    no le hagas caso ya lo he corregido, eso me lo puso el editor del post, lo que pasó es que le habia puesto en color rojo pero afuera de code y luego al copiar y pegarlo dentro se me pegó el formato ese raro que es del foro, pero eso no va en el código javascript, ya lo he corregido.
     
  6. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Ahh vale jajaj pero aun así no tienes dos veces el mismo codigo jajaj???
     
  7. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    387
    Puntos de trofeos:
    63
    Género:
    Hombre
    Si de hecho el código final y el código anterior es el mismo solo que siguiendo los pasos en uno se agrega el fillStyle y fillRect y el otro es el código terminado, aunque sean lo mismo en el momento de ir explicando el código son cosas distintas, uno es la muestra de donde iria el fill... y el otro es el ya terminado, ero los dos te valen para el final, lo que he hecho es agregarle un spoiler así no hay confusión.
     
  8. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Ahh vale es que te lo decía que como ponías el codigo unido pues eso como ponía los dos igual me había confundido :) gracias por el tutorial ;)
     
    A gammafp le gusta esto.
  9. Heissun V.R.

    Heissun V.R. Nuevo Miembro

    Se incorporó:
    28 de Agosto de 2015
    Mensajes:
    18
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Perú-Piura:Paita
    Disculpa....
    Ya publiqué en post
    Ójala me ayuden...
     

Comparte esta página