gerardooscarjt

22 septiembre [2008]

Desenterrando código: Juego de coches

Filed under: CODIGO,MANUAL — gerardooscarjt @ 22:25 (pm)
Tags: , , ,

Hace unos días, en plena época de exámenes (el mejor momento para hacer este tipo de cosas), me dí una vuelta por la carpeta en la que se apilan los proyectos que hice hace algún tiempo, y me encontré con un gracioso juego de coches. En realidad, hay que llegar a un nivel de abstracción muy alto para poder llamar ‘coche’ a un cuadrado de color negro con una línea verde.

La versión que encontré está escrita en Visual Basic 6. Aunque sin utilizar funciones de la API de Windows la potencia gráfica es muy limitada, la principal ventaja de vb6 es que permite desarrollar aplicaciones de forma rápida.

A lo largo del artículo voy a modificar el juego (de hecho ya he retocado parte del código varias veces) para mejorarlo, pero antes de empezar explicaré el funcionamiento. El recuadro negro que se observa es nuestro ‘coche’. Este vehículo en forma de píxel gigante tiene una tecla de aceleración (flecha arriba), una de frenado (flecha abajo) y dos teclas (flecha izquierda y derecha) para modificar la dirección de avance. Si todavía no lo has conducido probablemente te preguntarás para qué es la línea verde que parte del centro. Sirve para indicar la dirección de avance. Además tiene una tecla de hiperaceleración (espacio) que pone el coche de forma instantánea a una velocidad de 200 píxeles por segundo.

La primera versión relumbra en la captura de pantalla siguiente:

Primera versión del juego. El enlace para descargar los fuentes
y el ejecutable es éste: http://www.sinos.es/others/wp-res/2/juego-v1.zip

En esta versión hay multitud de detalles que voy a listar a continuación para tenerlos en cuenta y compararlos con las versiones sucesivas:

  1. La apariencia gráfica está, en general, muy poco cuidada.
  2. La combinación de colores no es muy agradable.
  3. Al redimensionar la ventana, no se ajusta el tamaño del cuadro en el que se juega.
  4. Las dimensiones de las cajas verdes no tienen restricciones prácticamente.
  5. Las cajas verdes no tienen bordes y al solaparse no se distinguen unas de otras.
  6. No hay icono de la aplicación.

Vistas las deficiencias de esta versión, que data del sábado 22 de mayo de 2004, voy a intentar aplicarle unas sencillas mejoras en la siguente versión.

Antes de empezar voy a describir a grandes rasgos las partes del código de la aplicación:

  • El evento Load() del formulario, que carga los valores por defecto en las variables globales.
  • Los eventos KeyUp() y KeyDown() del formulario que detectan las pulsaciones de tecla y las almacena en variables globales.
  • El evento Resize() del formulario, que redimensiona el ancho del control picture en el que se mueven los cuadrados.
  • Un timer para crear muchos controles picture (las cajas verdes).
  • Otro timer para calcular las colisiones del coche con los bordes y con las cajas y para mover todas las cajas según las variables cinemáticas.
  • Una función para aplicar los cambios en las variables cinemáticas de las cajas al producirse un choque.

La forma de capturar las pulsaciones del teclado es muy sencilla. Una variable almacena la dirección, (es decir, si se ha pulsado izquierda o derecha) y otra variable almacena la aceleración (si se está acelerando o se está frenando). El timer se encarga de mover el coche y controlar la velocidad y el ángulo en función de los valores que haya almacenados en las variables de dirección y aceleración.

La captura de pantalla de la siguiente versión:

Segunda versión del juego. El enlace para descargar los fuentes
y el ejecutable es éste: http://www.sinos.es/others/wp-res/2/juego-v2.zip

A continuación listo los cambios de esta nueva versión:

  1. La apariencia gráfica está más cuidada que la versión anterior. La zona de juego utiliza dos tonos de azul y la zona de datos utiliza tonos rojos.
  2. La combinación de colores es más agradable que en la versión anterior.
  3. Al redimensionar la ventana el cuadro de juego (azul) se ajusta tanto al ancho como al alto de la ventana, y el cuadro de datos (rojo) se ajusta al ancho.
  4. Las dimensiones de las cajas son múltiplos de 50 píxeles.
  5. Las cajas ya no tienen un número impreso y se les ha añadido un borde. Éste se pinta con código en el instante en el que se crean las cajas.
  6. Se ha añadido un icono de aplicación.
  7. Además se ha modificado el comportamiento para que cuando choque contra una caja a menos de 20 píxeles por segundo, no rebote y parezca que empuja a la caja.

La siguiente versión se va a centrar en dos puntos:

  • Diseñar un algoritmo de choque sin errores (hay ocasiones en las que el coche se superpone con las cajas sin producirse ninguna colisión).
  • Programar colisiones entre las cajas.

– CONTINUARÁ –

Anuncios

1 comentario »

  1. Por fin algo que poder utilizar los del nivel usuario-1. Bueniiiisimo!

    Comentario por ANA — 23 septiembre [2008] @ 13:20 (pm) | Responder


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Crea un blog o un sitio web gratuitos con WordPress.com.

A %d blogueros les gusta esto: