PROGRAMACIÓN DE “FROGGER” EN C++

ANGELA CÁCERES MARTÍNEZ

T.I 98112153470
LINA FERNANDA MEDINA RAMIREZ
T.I. 99120505471
KAREN GISETH ROMERO GRANADOS
T.I 1001280935

UNIVERSIDAD NACIONAL DE COLOMBIA

PROGRAMACIÓN DE COMPUTADORES
GRUPO 7
BOGOTÁ
2018
PROGRAMACIÓN DE “FROGGER” EN C++

ANGELA CÁCERES MARTÍNEZ

C.C 98112153471
LINA FERNANDA MEDINA RAMIREZ
T.I. 99120505471
KAREN GISETH ROMERO GRANADOS
T.I 1001280935

Proyecto final programacion de computadores

Profesor.
Santiago Carvajal

UNIVERSIDAD NACIONAL DE COLOMBIA

PROGRAMACIÓN DE COMPUTADORES
GRUPO 7
BOGOTÁ
2018
 INTRODUCCIÓN

El presente informe expone el proceso para desarrollar un juego llamado “Frogger” a

través del lenguaje de programación de c++, utilizando librerías y conocimientos
adquiridos tanto en clase como de manera autónoma.

La finalidad de "Frogger" es guiar a cada una de las ranas a su hogar. El juego

comienza con una rana que se ubica en la parte inferior de la pantalla, ésta debe
llegar a una de las cinco hojas que se sitúan al otro extremo del punto de partida;
para lograr este objetivo debe atravesar una calle donde transitan vehículos en
diferentes direcciones. Después debe cruzar un río, con la ayuda de troncos y
tortugas que evitan que la rana se sumerja, que de igual modo avanzan en
direcciones diferentes.

Cuando la primera rana llega a su hogar se repite el proceso, hasta lograr que las
cinco ranas lleguen a sus hojas. Cuando esto ocurre la dificultad se hace mayor ya
que la velocidad de todo el juego aumenta. Cuando la rana choca con algún
vehículo o se ahoga en el río, reinicia en el punto de partida y pierde una vida. El
jugador cuenta con un total de tres vidas.

Cada vez que avance la rana se ganan 10 puntos y por cada rana que consiga
llegar a su hogar se acumulan 100 puntos al marcador final.
El jugador cuenta con la teclas de dirección como su único control, que le permite
dar sentido a la trayectoria de la rana y a seleccionar las opciones que se presentan
al principio de juego (jugar, instrucciones y salir).
 LIBRERÍAS UTILIZADAS EN EL PROGRAMA

Para la creación del juego se utilizaron tres librerías, una que ya conocíamos y dos
adicionales, una librería gráfica y una librería que permite que permita imprimir texto.

1. <windows.h>
Es un archivo cabecera específico de Windows para la programación en lenguaje
C/C++ que contiene todas y cada una de las funciones relacionadas con la
programación en el entorno de Windows, todas las macros utilizadas por los
programadores de aplicaciones, desde la creación de ventanas, hasta el acceso al
portapapeles (copiar / pegar), cargar y dibujar mapas de bits, navegar por el sistema
de archivos y todas las estructuras de datos utilizadas en gran cantidad de
funciones y subsistemas.

2. <SDL/SDL.h>

Esta librería ​se utilizó para imprimir y desarrollar todo el juego, permitiendo una
mejor visualización y presentación del programa.

SDL: Simple DirectMedia Layer

Es una librería de desarrollo multiplataforma diseñada para proporcionar acceso de

bajo nivel a hardware de audio, teclado, mouse y gráficos a través de interfaces
para la programación de aplicaciones como OpenGL y Direct3D.
SDL es compatible oficialmente con Windows, Mac OS X, Linux, iOS y Android. El
soporte para otras plataformas se puede encontrar en el código fuente. Está escrito
en C, funciona de forma nativa con C ++, y hay enlaces disponibles para varios
otros idiomas, incluidos C # y Python.

Instalación el programa:
1.​ Para obtener la librería SDL se descarga
desde la página web
https://www.libsdl.org/download-1.2.php​ ​y
dentro de “Development Libraries:” la opción
que se selecciona es
SDL-devel-1.2.15-mingw32.tar.gz​ (Mingw32),
ya que este corresponde a nuestro sistema
operativo.
 2. ​Se descomprime la carpeta descargada, luego
vamos a code blocks donde se encuentra el código del
juego, y en la barra de herramientas se selecciona
“project” y luego “Build options”.

3.​ Se abre una ventana y en esta seleccionamos” Search directories” y “compiler”

4.​ En “Add” agregamos la carpeta “SDL” que se encuentra en “include” que se a su

vez está en la carpeta que descargamos y descomprimimos previamente

5.​ Finalmente al lado de “compiler” se encuentra “linker”, aquí se hace el mismo

proceso anterior pero se agrega la carpeta “Lib”. Finalmente debe quedar agregadas
las dos carpetas así:
6​. El programa está listo para ejecutar las funciones que trae ésta librería.

3. SDL/SDL_ttf.h:

La otra librería permite utilizar diferentes fuentes de texto que ayudan a la estética
del juego, fue utilizada para imprimir el menú del juego y las instrucciones de este,

Esta librería es un complemento de la anterior, esta permite dibujar texto en la

pantalla, algo que no trae la librería SDL/SDL.h. Permite escribir texto en la pantalla
gráfica directamente. Nos ofrece dibujar el texto que queramos en una superficie
SDL utilizando el tipo de letra que deseemos.
Para poder utilizar esta librería auxiliar también debe estar instalada.

Instalación el programa:
1. ​Para obtener la librería SDL_ttf.h se descarga desde la página web
https://sites.google.com/site/sdlinvc2010/installation/sdl_ttf​. Y luego se descomprime
este archivo.
2. ​Este archivo cuenta con dos carpetas “include” y “lib”,
dentro de include se encuentra un documento llamado
“SDL_ttf.h”, este lo copiamos y pegamos en la carpeta
SDL, que para la anterior librería habíamos descargado.
3. ​Para cargar esta librería en el código del juego, vamos de nuevo a la carpeta de
herramientas, Project y build options.

4. ​En linker settings se carga el

archivo SDL_ttf.lib que se
encuentra en la carpeta lib de el
archivo que descargamos
 DESCRIPCIÓN DE LAS FUNCIONES Y EL INT MAIN

1. bool colision( SDL_Rect A, SDL_Rect B )

Esta función sirve para realizar colisiones entre dos objetos (rectángulos en el mapa
del juego), permite que la rana muera en el momento que “choca” contra un carro,
es decir, compara la superposición de dos rectángulos.

● El parámetro que solicita es “SDL_Rect” que define un área rectangular de

píxeles.
int izquierdaA, izquierdaB, derechaA, derechaB, arribaA, arribaB, abajoA,
abajoB;
● Se declaran las variables que definen las dimensiones del rectángulo.
izquierdaA = A.x;
derechaA = A.x + A.w;
arribaA = A.y;
abajoA = A.y + A.h;

● Para calcular los lados del rectángulo, SDL_Rect cuenta con los
siguientes datos de estructura:
· ​x, y Posición de la esquina superior izquierda del rectángulo
· w, h El ancho y alto del rectángulo respectivamente
● Esto se hace igualmente para el rectángulo B.
A continuación el condicional if, retorna ​false si alguno de los lados de A está fuera
de B y ​true​ si sucede lo contrario.

2. La primera observación que se puede encontrar en el main,es que este tiene

argumentos, ​(int argc, char* args[]) ​estos argumentos son utilizados
respectivamente para contar el número de argumentos utilizados y array de
punteros a caracteres.
En las líneas posteriores se encuentran las imágenes de los elementos que servirán
para la construcción del mapa, esto se realiza con la ayuda de la estructura
SDL_Surface que contiene una colección de píxeles y que representa áreas de
memoria "gráfica", memoria a la que se puede recurrir, para cada variable se carga
una imagen con la función ​SDL_LoadBMP

3. ​Luego se utiliza la variable ​bool game_over = false, ​para crear un ciclo infinito
que vaya imprimiendo el juego​; ​cuando esta variable sea verdadera el juego habrá
terminado.
Se utiliza ​bool ranamurio = false; ​y como su nombre lo expresa se utiliza para
indicar cuando muere la rana.
bool ranallego = false; ​Esta variable es usada para indicar que la rana ha llegado a
su hoja​, cuando esto ocurra, la rana se quedará en su hoja y se imprimirá la
siguiente rana como se explicará posteriormente.
adicionalmente tenemos dos arreglos tipo ​Char ​para imprimir el puntaje, ya que la
función utilizada recibe datos tipo char, pero para el juego se necesitan tipo enteros.

4. Se utiliza ​posicionrana.x ​y posicionrana.y, ​para indicar la posición de la

esquina superior izquierda del rectangulo de “la superficie” que contiene a la rana,
posicionrana.h ​para indicar la altura y ​posicionrana.w​, para indicar el ancho del
rectángulo.
La posición inicial establecida de la rana es la siguiente:

posicionrana.x=377;
posicionrana.y=634;
posicionrana.h=26;
posicionrana.w=37;

la posición inicial del mapa en x y y será 0,0; dado que tomamos en cuenta la
esquina superior izquierda
Luego se utiliza un arreglo.​int* x = new int[27]; ​para guardar la posición en x de
cada uno de los elementos móviles en el programa.
También crearemos un arreglo bool* ranahoja = new bool[5]; ​para indicar si la
rana llegó a la hoja (en este caso la hoja 5),se utiliza una variable tipo bool​, en
cada posición el arreglo iniciara en false, ya que cuando las 5 ranas lleguen a las
hojas, es decir el arreglo de ranahoja en cada posición sea true; el juego avanzará
de nivel aumentando su velocidad.

5. A continuación la estructura SDL_LoadBMP ​carga una superficie desde un

archivo Windows BMP con nombre, estas superficies son las que conformarán el
mapa y elementos de juego, como el césped, el río, los arbustos y los obstáculos
como los vehículos, troncos y tortugas. Estos archivos gráficos fueron descargados
de ​http://www.classicgaming.cc/classics/frogger/graphics y es estrictamente
necesario que se encuentren en la misma carpeta de la ejecución del juego.

SDL_SetColorKey esta función se emplea para establecer la clave de color (píxel

transparente) en una superficie, en este caso es en la superficie que imprime en el
mapa la rana.Esta función utiliza tres parámetros, ​superficie,SDL_SRCCOLORKEY
y el ultimo parametro que recibe la estructura anterior es ​SDL_MapRGB, ​que se
encarga de asignar el valor de color RGB al formato de píxel especificado y
devuelve el valor de píxel como int de 32 bits.
6. ​El juego como tal empieza con un ​while(game_over == false){ ​dentro de este
while mediante la función ​screen = SDL_SetVideoMode ​se imprime la pantalla;
SDL_BlitSurface se imprimen los graficos. Luego se asignan las variables de las
teclas para permitir el movimiento de la rana.
Para lograr que la rana se mueva en las cuatro direcciones por medio de las flechas
del teclado se usó la siguiente función SDL_GetKeyState(NULL)​, también se usó,
dentro de un if teclas[SDLK_UP], teclas[SDLK_DOWN], teclas[SDLK_LEFT] y
teclas[SDLK_RIGHT], ​para desplazar la rana; al mover la rana se realiza un cambio
de superficie, en lugar de la rana inicial aparecerá una rana girada utilizando el
siguiente fragmento de código.

de igual manera se realiza para la rana hacia la derecha, la izquierda y hacia abajo.

7. ​Para realizar el mapa se realizó una matriz donde a cada número se le asignó
una superficie como se muestra a continuación, se declaró un ​for dentro del
while​,este for recorre la matriz e imprime las superficies en ese mismo orden, donde
0,1,2,3,4 son respectivamente; hoja, arbusto, agua ,césped y carretera
fuera de este while se se usaron diferentes for para asignar las posiciones iniciales
de los carros, a continuación se mostrará,el for para el primer carro en la primera
línea de la carretera:
for (int i = 0; i < 3; i++){
posiciones[i].y = 577;
posiciones[i].h = 45;
posiciones[i].w = 86;
x[i] = (i*200) + 300;
}
de manera análoga se realizan los for de los demás vehículos, al igual que de los
tronquitos y las tortugas.
Para simular el movimiento de estos obstáculos también se realizó un for, se
explicara con el for del primer aunto.

8. ​Se creó otro while para imprimir lograr el movimiento de los autos, dentro de
este while ​SDL_BlitSurface(rana, NULL, screen, &posicionrana) Imprime rana en
su posición inicial

​for(int i = 0; i < 3; i++){

​if(x[i] > 780){
​ x[i] = -86;
}else{
x[i]+=2*nivel;
 }
posiciones[i].x = x[i];
SDL_SetColorKey(carro1,
SDL_SRCCOLORKEY, SDL_MapRGB(carro1->format, 0, 0, 0));
SDL_BlitSurface(carro1, NULL, screen, &posiciones[i]);
La primera línea de este asigna la posición x de cada carro, las siguientes líneas se
encargan de que el carro vuelva a aparecer en la posición inicial luego de terminar
su recorrido y la siguiente línea se encarga de el aumento de la velocidad según el
nivel. ​posiciones[i].x = x[i]; ​Crea el movimiento de cada carro, ya que la posición
en x de este va cambiando, la siguiente función queta el fondo del carro y la última
línea imprime el carro.

9. SDL_SetVideoMode
Configura un modo de video con el ancho, altura y bits por píxel especificados. Los
parámetros que éste recibe son cuatro:
· Width (w): ​El ancho deseado en píxeles del modo de video para establecer
· Height (h)​ La altura deseada en píxeles del modo de video para establecer.
· Bitsperpixel: Los bits deseados por píxel del modo de video para establecer.
El empleado en el programa fue 16 bits.
· SDL_NOFRAME: ​lo que hace es que SDL cree una ventana sin barra de título
ni decoración de marco.
SDL_BlitSurface ​es una función que se utiliza para copiar una superficie a otra, es
decir imprime en pantalla con los cuatro parámetros que recibe el primero de ellos
es el parámetro superficie, seguido de posición mapa, que indica la posición en el
mapa.
Funcionamiento del programa
 Dificultades

La primera dificultad que se encontró fue cómo imprimir las imágenes que se
requerían para hacer del juego, un juego atractivo a la vista. Se incluyó una librería
gráfica para realizarlo, una librería que no fue vista en clase, fue necesario
aprender tanto a instalarla como a entender su funcionamiento.
Todo el código se trabajó con la librería gráfica hasta cuando se quiso agregar el
sistema de puntos y las vidas, que claramente, son variables, no se podía usar una
imagen. Esto llevó a necesitar una nueva librería, esta es un complemento de la
librería SDL (la librería gráfica) que permite imprimir textos, esta librería recibe
variables tipo ​char​, tanto las vidas como el puntaje son variables tipo ​int; ​Esta fue la
siguiente dificultad que se encontró.

Para la realización del juego,los conocimientos adquiridas en clase aplicados fueron,

matrices; se utilizaron principalmente para todo lo que tenía que ver con el mapa del
juego, arreglos; se utilizaron principalmente para el movimiento de los obstáculos,
también se emplearon los conocimiento tanto de ciclos como de condicionales (if y
else), se usó principalmente variables tipo ​bool.
 REFERENCIAS:

https://wiki.libsdl.org/FrontPage
http://www.losersjuegos.com.ar/referencia/articulos/instalar_devcpp
http://www.losersjuegos.com.ar/_media/referencia/libros/capitulo_01/capitulo_01.pdf
https://www.libsdl.org/release/SDL-1.2.15/docs/html/sdlrect.html
https://wiki.libsdl.org/SDL_Surface
https://www.libsdl.org/release/SDL-1.2.15/docs/html/sdlsurface.html
https://www.badprog.com/c-type-what-are-uint8-t-uint16-t-uint32-t-and-uint64-t
https://www.libsdl.org/release/SDL-1.2.15/docs/html/sdlloadbmp.html
https://www.libsdl.org/projects/SDL_ttf/