Capítulo 54. Moviendo una figura en Small Basic

Diario de un programador.- Dia 99

Moviendo un cuadrado con el teclado

99 días desde que empecé con esto de la programación, bueno hay que reconocer que son muchos más días ya en una oportunidad mencioné que hay veces en que no escribo ni una sola línea de código por tener que atender otros asuntos como son familia, trabajo etc.

En esta oportunidad voy a hacer que la figura que se muestra a continuación, sea posible moverla en cuatro direcciones diferentes, usando las flechas direccionales del teclado.

Es un simple cuadrado de 50 x 50 ubicado en la posición 0,0. Como es sabido, para dibujar un cuadrado en la ventana gráfica, se hace de la siguiente manera

GraphicsWindow.DrawRectangle(Posicion X,Posicion Y , Ancho,Alto)

La idea es crear un programa que permita modificar la posición X,Y de la figura. Para ello voy a crear eventos que permitan agregar o quitar valores a esas posiciones, por ejemplo, cada vez que presione la flecha direccional derecha, se agrega +1 a la posición X, o si presiono la flecha direccional izquierda, se quitara -1 a la posición X, y así con los demás valores. Para poder jugar con esos valores, crearé una variable que represente cada posición.

x = 0

y = 0

Lo siguiente será crear una subrutina que muestre la figura

Sub cuadrado

  GraphicsWindow.DrawRectangle(x,y, 50,50)

EndSub

Ahora voy a crear el evento que permita generar una acción cada vez que se presiona una tecla

GraphicsWindow.KeyDown = presionar

Posteriormente voy a crear las subrutinas que modifiquen los valores de las posiciones. Empezaré por crear la que modifique la posición X

Sub derecha

  GraphicsWindow.Clear()

  x = x + 5

  cuadrado()

EndSub

Esta subrutina, lo que primero que hará será limpiar la pantalla con la finalidad de que se elimine la antigua posición que tenía. Lo siguiente es el valor de X que aumentará en 5, si primero X valía 0, esta función hará que X sea igual a 5 y cada vez que se llame ese valor aumentará en 5. Por último, se llamará a la subrutina para que dibuje la figura con su nuevo valor. Ya que está lista la primera subrutina, haré lo mismo para cada posición que quiero modificar.

Sub izquierda

  GraphicsWindow.Clear()

  x = x - 5

  cuadrado()

EndSub

Sub abajo

  GraphicsWindow.Clear()

  y = y + 5

  cuadrado()

EndSub

Sub arriba

  GraphicsWindow.Clear()

  y = y - 5

  cuadrado()

EndSub

Ahora, lo que me falta es crear la subrutina que permita realizar alguna acción cuando presiono una tecla, en este caso las flechas direccionales del teclado

Sub presionar

  flecha = GraphicsWindow.LastKey

El inicio de la subrutina. En la segunda línea es creado el evento que permite detectar la última tecla que se presiona y ese valor es guardado en la variable "flecha". Ahora, lo que sigue  de la subrutina queda de la siguiente manera:

  If flecha = "Right" Then

    derecha()

  EndIf

 

Aquí este instrucción dice "Si la útima tecla presionada es "Right" (flecha derecha) entonces, ejecuta la subrutina "derecha()". Ya creado esto, haré lo mismo para las demás.

  If flecha = "Left" Then

    izquierda()

  EndIf

 

  If flecha = "Down" Then

    abajo()

  EndIf

 

  If flecha = "Up" Then

    arriba()

  EndIf

 

EndSub

Ya por último queda llamar a la subrutina "cuadrado()" para dar inicio al programa

cuadrado()

Con esto ya está listo el programa. El código completo es el siguiente:

x = 0

y = 0

Sub cuadrado

  GraphicsWindow.DrawRectangle(x,y, 50,50)

EndSub

GraphicsWindow.KeyDown = presionar

Sub derecha

  GraphicsWindow.Clear()

  x = x + 5

  cuadrado()

EndSub

Sub izquierda

  GraphicsWindow.Clear()

  x = x - 5

  cuadrado()

EndSub

Sub abajo

  GraphicsWindow.Clear()

  y = y + 5

  cuadrado()

EndSub

Sub arriba

  GraphicsWindow.Clear()

  y = y - 5

  cuadrado()

EndSub

Sub presionar

  flecha = GraphicsWindow.LastKey

 

  If flecha = "Right" Then

    derecha()

  EndIf

 

  If flecha = "Left" Then

    izquierda()

  EndIf

 

  If flecha = "Down" Then

    abajo()

  EndIf

 

  If flecha = "Up" Then

    arriba()

  EndIf

 

EndSub

cuadrado()

Al ejecutar el programa se tendrá un cuadrado que puede ser controlado por las flechas direccionales del teclado.

Esto es todo por ahora. Saludos

Gustavo J. Cerda Nilo

Febrero 2016, última actualización Julio 2016