Tablero para crear juegos

Tablero SVG - Aplicación del While

1.  Crear un archivo nuevo de HTML con el siguiente código:

<style>
    * {
        box-sizing: border-box ;
        font-family: Segoe UI Light, "Ubuntu" ;
    }
    svg {
        margin: auto ;
        display:block ;
    }
    rect {
        transition: 300ms all ;
    }
    rect:hover {

    }
    #juego {
        background: url( paisaje.svg ) center center ;
        background-size: cover ;
    }
    body {

    }

</style>
<svg id="juego"></svg>
<script>
    var generarRect = function( id, origen, medidas, colores ) {
        var r = "<rect " ;
        r+= "id='" + id + "' ";
        r+= "x='" + (origen.x||origen[0]) + "' ";
        r+= "y='" + (origen.y||origen[1]) + "' ";
        r+= "width='" + (medidas.ancho||medidas[0]) + "' ";
        r+= "height='" + (medidas.alto||medidas[1]) + "' ";
        r+= "fill='"+(colores.relleno||colores.fill||"black")+"' " ;
        r+= "stroke='"+(colores.stroke||colores.linea||"whie")+"' " ;
        r+="></rect>" ;
        return r ;
    }
</script>
<script id="programando">
</script>

2.  Ahora programamos todo dentro del SCRIPT de nombre programando. Creamos una variable para los datos:
   • Área de dibujo (será para controlar el objeto SVG; igualar al id del SVG)
   • Lado del cuadrado (un escalar; calcular más o menos entre 15 y 40 pixeles, solamente el número)
   • Cuadrados de ancho (un escalar)
   • Cuadrados de alto (un escalar)

var cuadrados = {} ;

|

• Distinguir cuál de los siguientes podría ser el código para cada uno de los puntos anteriores...

cuadrados.deancho = 15

|

var area_dibujo = jueg

|

cuadrados.medida = 30

|

cuadrados.dealto = 10

|

La manera de agregar un rectángulo dentro un objeto SVG es asignando el .innerHTML del objeto el valor del rectángulo. Ejemplo (para dentro de un SCRIPT):

    // Dos ejemplos, dos formas de agregar.
    area_dibujo.innerHTML += generarRect( "rec1", {x: 100, y:25}, {ancho: 50, alto: 50}, {fondo: "red", linea: "blue"} ) ;
    area_dibujo.innerHTML += generarRect( "rec2", [150,25], [50,50], {fondo: "transparent", linea: "grey" ) ;

Es sólo una nota. Todavía no lo hacemos.

Ahora, ya que tenemos las medidas de un cuadrado y la cantidad horizontal de cuadrados haremos lo siguiente.

3. Crear una variable para calcular el total de cuadrados en horizontal. Asignar directamente la multiplicación entre la cantidad de cuadrados en horizontal o ancho por el lado del cuadrado.

var calc = {} ; calc.a

|

4.  Crear una variable para calcular el total de cuadrados en vertical. Se repite lo anterior pero en lo vertical.

calc.alto = cuadrados.

|

5.  Asignarle dos .style al Área de dibujo. Uno será el .width= para el ancho, y el otro .height= para el alto.

    area_dibujo.style.width = xxxxx ;
    area_dibujo.style.height = xxxxx ;

Reemplazar las xxxxx con lo calculado en el punto 3 y 4.

6.  Para probar, generar con estructura while(){} toda una fila de cuadrados. Aquí les pido que piensen cómo controlar el while para que haga la cantidad horizontal de cuadrados del tablero. En el medio de la repetición crearán rectángulos según el método anteriormente mencionado (Ver código siguiente). Sugiero crear la ID según la variable que controle las repeticiones.

var posx = 0 ; while(

|

Luego dentro de la repetición del while() pondremos algo similar a esto (en reemplazo de las xxxxx:

    area_dibujo.innerHTML += generarRect( "r"+posx, {x: posx*cuadrados.medida, y: 0}, [50,50] ) ;

7. ¿Cómo será para generar varias filas de cuadrados? Indagar.

Construyendo al personaje

1. Vamos a crear un conjunto que contiene opciones, preferencias, habilidades y propiedades del personaje. Sea lo que fuera el personaje (Pacman, la viborita, Bomberman, etc.) juntamos todas estas opciones en una variable del tipo conjunto (uso de llaves).

var personaje = {} ;

|

2. Al personaje le agregamos una posición en horizontal y otra en vertical:

personaje.x = 4 ; pers

|

Ahora le agregamos dos habilidades, aquella que le permite crearse y aquella que le permite dibujarse.

3. Para crear la habilidad de crearse debemos al conjunto personajeincorporar la palabra clave crear e igualarla a una function:

personaje.crear = func

|

4. Dentro de la función, hay que generar un rectángulo generarRect() en el área de dibujo (agregar al área); indicándole un nombre propio para poder controlarlo, ubicándolo según la posición x e y del personaje, las medidas de un cuadradito y sus colores. Es decir, realizar lo siguiente:

personaje.crear = func

|

La función generarRect() requería de:

• Nombre o ID para el rectángulo,
• Conjunto para indicar posición dentro del área de dibujo,
• Conjunto para indicar ancho y alto,
• Conjunto para indicar colores, de fondo y de línea.

Entonces modificamos la función anterior para ver en varios renglones:

personaje.crear = function() {
    area_dibujo.innerHTML += generarRect( 
        "cabeza"
        , { 
            x: personaje.x * cuadrados.medida
            , y: personaje.y * cuadrados.medida
        }
        , [ cuadrados.medida, cuadrados.medida ]
        , {
            fondo: "red"
            , linea: "blue"
        }
    ) ;
}

5. Ahora le creamos al personaje la función de dibujarse. En realidad ya está dibujada, y además tiene un nombre. En el caso del código anterior figura como cabeza. Lo que tiene que realizar esta función/habilidad es actualizar la posición.

Pero como cabeza que es un rectángulo SVG, no podemos cambiarle directamente la posición x e y, debemos hacerlo mediante una habilidad de estos rectángulos llamada setAttribute.

personaje.dibujar = function() {
    cabeza.setAttribute( "x", personaje.x*cuadrados.medida ) ;
    cabeza.setAttribute( "y", personaje.y*cuadrados.medida ) ;
}

Si genera un error que indica que cabeza no está definido, reemplazar en el código anterior la palabra cabeza por document.getElementById("cabeza").

6. Probar las dos habilidades, en orden, para ver si se creó el personaje en la pantalla o hubo algún error.

personaje.crear() ; p|

7. Creamos ahora la habilidad de moverse. Para esta habilidad se requiere de indicar cuánto va a sumar en x, y cuánto en y; se actualiza la posición del personaje y se dibuja.

personaje.mover = function( enX, enY ) {
   personaje.x = personaje.x + enX ;
   personaje.y = personaje.y + enY ;
   personaje.dibujar() ;
}

8. Por último procedemos a mover como un ejemplo. Para que se aprecie el movimiento vamos a agregar, por única vez, una función que logra que se repita algo cada cierto tiempo. La función se llama setInterval (definir intérvalo).

    setInterval(
        function() {
            personaje.mover( 1, 0 ) ; // Mover en X +1
        }
        , 1000 // Cada 1000 milisegundos o 1 segundo
    ) ;

Ir arriba...