Cómo escribir código en pilas engine 2

En este tutorial me centraré en la teoría y compartiré lo que fui aprendiendo sobre JavaScript y programación, que, aunque es poco, es lo justo y necesario para usar pilas de formas interesantes. Sólo compartiré lo que creo es super básico y esencial, si quieren aprender más sobre JavaScript les recomiendo el siguiente libro web:

Introdución a JavaScript por Javier Eguiluz

Lo indispensable para usar pilas y darle rienda suelta a la imaginación es saber:

  • Variables.
  • Condicionales if.
  • Funciones.

Veamos un poco de aburrida, pero necesaria teoría

Variables

Las variables permiten almacenar valores, pueden ser de varios tipos: cadena de texto (string), booleanas (boolean) y números (number) y otras más, pero estas son las que nos interesan para hacer juegos en pilas. Es recomendable que cuando creamos una variable especificar qué tipo de variable es, aunque no es necesario.

¿Cómo creo una variable en pilas? Muy fácil, nos vamos a un actor, el proyecto o escena y en su código antes de la función iniciar() podemos crear variables y desde la función iniciar o cualquier otra podemos asignarle un valor:

// @ts-ignore
class actor extends Actor {

  nombre_de_la_variable: Tipo_de_varaible

  iniciar() {
    this.nombre_de_la_varaible = valor_segun_tipo
    //siempre se le debe poner la palabra this. cuando se quiere referir
    //a una variable definida con anterioridad.
  }

  actualizar() {}
}

Se les puede poner casi cualquier nombre, pero lo mejor es ponerle nombres descriptivos para así recordar su utilidad. Veamos mejor cuales son los tipos variables con ejemplos:

    detener_cronometro: boolean

Es una variable booleana, es decir, admite sólo dos valores: true o false. Desde una función sólo puedo darle uno de esos dos valores. Este tipo de variables las usaremos mucho debido a su facilidad de recordar y entender a simple vista su utilidad. 

  dificultad: string

Es una variable del tipo texto, almacena cadena de texto la cual debe ser escrita entre comillas o comillas dobles:

  //aquí le asigne un valor desde la función inciar() pero podría hacerlo
  //desde cualquier función.
  iniciar() {
    this.dificultad = "facil"
  }

El último tipo de variable que usaremos son las numéricas:

  vida: number

  iniciar() {
    this.vida = 100
  }

Algunas cosas a tener  en cuenta:

  • En pilas cuando te quieres referir a una variable debes escribir siempre this.nombre_variable.
  • Los signos igual y demás deben estar separados por un espacio.
  • Hay que evitar el uso de mayúsculas y acentos, a veces dará error.

Condicionales if() {}.

En javaScript y en muchos otros lenguajes de programación se usan estas cadenas lógicas que traducidas serían: 

si(se cumple la condición que aquí se ponga) entonces{

se ejecutan las instrucciones de aquí dentro

}.

Un if ejecuta las instrucciones si la condición es verdadera y las saltea si es falsa. Para escribir condiciones en los if es útil usar los operadores lógicos de comparación: 

  • Menor que: su símbolo es < y devuelve verdadero si el valor a su izquierda es menor que el valor a su derecha, sólo compara números y variables del tipo number.
  • Mayor que: su símbolo es >.
  • Igual que: Su símbolo es == y devuelve verdadero si a su derecha y a su izquierda hay cosas iguales. Puede comparar números, textos y valores booleanos entre si.
  • Distinto que o desigual que: Su símbolo es != y devuelve verdadero si a su derecha e izquierda hay cosas distintas.
  • Mayor o igual: Su símbolo es => y funciona similar al mayor que, sólo que además devolverá verdadero si también son iguales ambos miembros.
  • Menor o igual que: Su símbolo es =<.

Estos comparadores comparan variables o valores. Si bien la mayoría puede comparar entre si variables de distinto tipo, para hacer juegos es de muy poca utilidad hacer así, por lo que debemos prestar atención de que las variables o valores a comparar sean del mismo tipo.

Veámoslo con ejemplos para entender mejor:

Imaginen que hacemos un cronómetro y queremos que se detenga si la variable detener_cronometro es true, o sea verdadera. Para ello primero declaramos la variable diciendo que es del tipo boolean y luego usaremos un condicional if como el siguiente:

    //un error típico es olvidarse de poner el doble signo igual
    if(detener_cronometro == true) {
      //aquí irían las instrucciones que
      //detienen el cronómetro
    }

Lo anterior se lee: Si la variable detener_cronometro es igual a true, entonces se ejecutan las instrucciones que detienen el cronometro. La condición en el anterior caso devolverá verdadero si el valor que almacena detener_cronometro es true, sino devolverá falso y no ejecutará ninguna instrucción para detener el cronómetro. 

Para el caso de las variables booleanas, podemos omitir el == true, por ejemplo el siguiente condicional es equivalente al anterior:

    if(detener_cronometro) {
      //aquí irían las instrucciones que
      //detienen el cronómetro
    }

Funciones

Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente. Esto último es la verdadera utilidad de las funciones: Se pueden reutilizar fácilmente. En sí funcionan igual que las variables, pero almacenan instrucciones y no pueden cambiárselas.

¿Como creo una función? Antes de responder debemos saber la sintaxis o estructura:

nombre_de_la_funcion (parámetros) { instrucciones a ejecutar }

Entonces para crear una función le ponemos un nombre y especificamos las instrucciones que se ejecutan, los parámetros podemos dejarlo en blanco pues su uso es un poco más complejo.

Pero ¿en dónde creo la función? En cualquier parte del código y debe estar fuera de cualquier otra función o if, lo recomendable es hacerlo luego de las funciones iniciar()actualizar(). Cuando creamos una función se dice que la estamos declarando, por ejemplo declaremos la función temporizador.

Antes necesitamos de una variable a la que llamaremos tiempo que será del tipo number y su valor inicial sea cero.

    temporizador() {
      if(this.tiempo =< 5) {
        this.tiempo += 1;
      }
      else { //else se traduce como sino
        this.tiempo = 0;
      }
    }

Analicemos un poco qué dicen las instrucciones. Primero cuando pongo this.tiempo += 1 lo que hago es sumarle 1 al valor que tenga la variable tiempo, es una manera abreviada de sumar sino tendría que escribir algo como this.tiempo = this.tiempo + 1. Notar que puedo sumarle 1 pues la variable tiempo es del tipo number si fuera de otro tipo no podría y daría error. 

Lo otro a destacar es la palabra else, dijimos que si la condición del if es verdadera, entonces se ejecutan las instrucciones y que si  no lo es entonces no hace nada. Si queremos que se ejecuten ciertas instrucciones cuando la condición es falsa entonces usaremos palabra else inmediatamente después de cerrar las llaves del if como sigue:

else {instrucciones a ejecutar si la condicion es falsa}

también puedo hacer que se ejecute otro if:

else if(condicion2) {instrucciones si la condicion2 es verdadera}

Y así podría hacer una cadena larga de if() {} else if() {} else if() {} else {} y en el momento que una de las condiciones sea verdadera se ejecutarán las instrucciones correspondientes y se saltearán el resto de elses.

Volviendo a la función temporizador, su código dice algo como: Si la variable tiempo es menor o igual que 5, entonces súmele uno, sino haga a la variable tiempo igual a 0. Con estas instrucciones hacemos que la variable tiempo vaya de 0 a 5 constantemente. ¿por qué? si la variable tiempo es menor o igual que 5 entonces se le suma 1, pero cuando llegue a 6 la condición del if será falsa y entonces se ejecutarán las instrucciones del else.

Para hacer que una función se ejecute la invocaremos o llamaremos desde otras funciones, ¿cómo? muy fácil, solamente ponemos su nombre seguido del doble paréntesis en las instrucciones de la otra función, por ejemplo llamemos a la función temporizador desde la función cada_segundo():

    cada_segundo(){
      this.temporizador();
    }

Esto hará que a cada segundo el temporizador ejecute sus instrucciones. Más específicamente, cada vez que se ejecute la función cada_segundo() se ejecutará la función temporizador().

Antes dijimos que inciar() y actualizar() son funciones, al igual que cuando_comienza_una_colision() o cada_segundo() y efectivamente lo son, solamente que las trae pilas por defecto y tienen características especiales:

  • iniciar() es llamada o invocada ni bien entra en juego el actor o la escena, aquí pondremos el valor de las variables que antes creamos.
  • actualizar() se invoca 30 o 60 veces por segundo, aquí pondremos la mayoría de nuestras instrucciones como la de hacer que se mueva con las flechas del teclado.
  • cuando_comienza_una_colision() se invoca cuando dos actores con figuras dinámicas se chocan.
  • cada_segundo() se invoca a cada segundo.

Pilas trae muchas otras funciones pero con saber estas ya podemos empezar hacer juegos elaborados.

¡Gracias por leer!

Comentarios

Entradas populares de este blog

Comenzando en Pilas Engine 2

Movimientos en círculos