Programación orientada a objetos

En programación se llama "objeto" a un conjunto de propiedades y métodos que definen su comportamiento. Al conjunto de características definidas en base al cual se crea un objeto, se llama "clase".

Los lenguajes de programación permiten crear clases personalizadas además de aquellas que vienen predefinidas. Para comprender mejor lo aquí explicado, crearemos de ejemplo una clase para objetos de tipo rectángulo.

JavaScript, a diferencia de otros lenguajes, no tiene clases como tal. Pero se pueden definir funciones que actúan como clases, tal como mostramos en el siguiente código:

function Rectangle(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

Mediante la función anterior, podemos crear ahora objetos de tipo rectángulo, como se muestra en el ejemplo siguiente:

var rect1 = new Rectangle(50, 50, 100, 60);

De esta forma, hemos creado un objeto de tipo rectángulo, al cual especificamos sus propiedades x (50), y (50), ancho (100) y alto (60).

Sin embargo, si por error se creara un objeto sin especificar todas sus propiedades, las propiedades faltantes obtendrían un valor nulo o indefinido, lo cual podría causar problemas posteriormente en nuestro código. Para prevenir ello, es recomendado que se asigne un valor predefinido en caso que no se especifique el valor indicado:

this.x = (x == null) ? 0 : x;

En esta línea, asignamos a this.x uno de dos valores. Se comprueba mediante (x == null) ? si su valor es nulo o indefinido. Si es así, se asigna el valor antes de los dos puntos (0), y en caso contrario, se asigna el valor posterior a los dos puntos (x).

Esta asignación predefinida se repite para los demás valores. Personalmente, me gusta hacer algo distinto con la altura; en caso de que su valor sea nulo o indefinido, en lugar de asignarle 0, le asigno el mismo valor que el ancho. De esta forma, si envío solo tres valores al rectángulo en lugar de 4, me creará un cuadrado perfecto cuyo ancho y alto será el tercer y último valor asignado:

this.height = (height == null) ? this.width : height;

Nota que se asigna this.width y no width directamente, pues de esta forma, se obtiene ya su valor después de comprobarse si era nulo o no. De lo contrario, podríamos asignar un valor nulo por error a la altura, en caso que el ancho enviado haya sido nulo también.

Antes de la programación orientada a objetos, cada propiedad de un objeto debía almacenarse en una variable independiente. Si bien esto no parece gran cosa para uno o dos objetos en el código, cuando se maneja decenas o cientos de estos, se vuelve una tarea complicada el no hacer estos programas sin la ayuda de objetos.

Otra propiedad importante de los objetos, es que tienen métodos propios. Por ejemplo, agregaremos este método a la clase Rectángulo, la cual nos permitirá saber cuando dicho rectángulo esté en intersección con otro:

    this.intersects = function (rect) {
        if (rect == null) {
            window.console.warn('Missing parameters on function intersects');
        } else {
            return (this.x < rect.x + rect.width &&
                this.x + this.width > rect.x &&
                this.y < rect.y + rect.height &&
                this.y + this.height > rect.y);
        }
    };

Para llamar a este método, lo haríamos de la siguiente forma:

    if (rect1.intersects(rect2)) {
     
    }

Analicemos ahora la función intersects paso a paso. Para empezar, se recibe una variable rect, que será un objeto de tipo rectángulo. En la siguiente línea, comprobamos si el rectángulo es nulo, y si se da el caso, advertimos sobre el parámetro faltante, pues en caso de no enviar nada, si esta validación no se efectuara, provocaría un error. Por el contrario, si el rectángulo existe, se ejecuta una comparación de los cuatro puntos de ambos rectángulos, para comprobar si el contenido ambos rectángulos se intersecta en algún momento, y se retorna el valor de si esta comparación es cierta o falsa.

Otro método útil para nuestro rectángulo, es que este se dibuje automáticamente en nuestro lienzo. Mediante esta función, solo debemos indicarle el contexto donde se dibujará el rectángulo, y este se dibujará de forma automática en donde sus valores indiquen, haciéndolo con una instrucción más sencilla y con menor probabilidad de errar en los valores dados:

    this.fill = function (ctx) {
        if (ctx == null) {
            window.console.warn('Missing parameters on function fill');
        } else {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    };

Usar rectángulos y otros objetos en los códigos de tus juegos, facilitarán muchas de las tareas que necesitas para llevarles a cabo. Con esto, concluimos la explicación básica sobre programación orientada a objetos. Para conocer más a profundidad sobre objetos en JavaScript, puedes hacerlo en el siguiente enlace: http://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos.

Código final:

function Rectangle(x, y, width, height) {
    this.x = (x == null) ? 0 : x;
    this.y = (y == null) ? 0 : y;
    this.width = (width == null) ? 0 : width;
    this.height = (height == null) ? this.width : height;

    this.intersects = function (rect) {
        if (rect == null) {
            window.console.warn('Missing parameters on function intersects');
        } else {
            return (this.x < rect.x + rect.width &&
                this.x + this.width > rect.x &&
                this.y < rect.y + rect.height &&
                this.y + this.height > rect.y);
        }
    };

    this.fill = function (ctx) {
        if (ctx == null) {
            window.console.warn('Missing parameters on function fill');
        } else {
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    };
}

Regresa al índice.