Parte 4. Interactuando con otros elementos.

Además de poder interactuar nosotros con el juego, el segundo punto importante de un juego es que los elementos puedan interactuar entre si. Para saber si dos elementos “se están tocando” (Es decir, hay una intersección entre ellos), no solo nos basta saber su posición XY, también necesitamos conocer el alto y ancho de los elementos.

En Javascript, las funciones cumplen una doble función. No solo te permiten crear eventos que pueden ser llamados en cualquier momento (como ya hemos visto), si no que además pueden hacer la función de objetos (Esto en otros lenguajes suele ser conocido como “clases”). Por ejemplo, crearemos nuestra propio objeto “rectángulo”, que contendrá una posición en X, en Y, además de un ancho y alto.

Además, las funciones de tipo objeto pueden contener sus propias funciones. Así pues, agregaremos al rectángulo una función “intersección”, que nos dirá si está en una intersección con un segundo elemento, así como una función que rellene de forma más sencilla el rectángulo. Para conocer más a detalle sobre este tema, lee el Apéndice 3: Programación Orientada a Objetos; por ahora, tan solo copiemos al final de nuestro código, la siguiente función:

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);
        }
    };
}

Como podremos ver, la función Rectángulo está diseñada para recibir las cuatro variables en el orden X, Y, Ancho y Alto. Si omitimos enviar alguna, esta automáticamente se volverá “0” para evitar errores, excepto en el caso de la Altura, que automáticamente obtendrá el valor del Ancho (Lo que es práctico para omitir enviar ancho y alto si queremos que ambos tengan el mismo valor).

Ahora haremos unos cambios a nuestro código. Primero eliminaremos las variables “x” y “y” que declaramos en un comienzo, y en su lugar, crearemos una variable “player” nula:

var player = null;

Al cual asignaremos un valor de nuestro nuevo tipo rectángulo dentro de la función “init”:

    // Create player
    player = new Rectangle(40, 40, 10, 10);

Después, cambiaríamos la forma en que se dibuja el rectángulo a la siguiente forma:

    player.fill(ctx);

Por último, y hay que tener mucho cuidado en esto, será que todas nuestras variables “x” y “y” que usamos antes las convertiremos agregando “player.” antes de ellas, de igual forma que hicimos con la forma en que dibujamos el rectángulo.

Ahora, necesitaremos un nuevo elemento con el cual interactuar. Crearemos una nueva variable al que asignaremos un valor tipo rectángulo llamada “food”:

    food = new Rectangle(80, 80, 10, 10);

De igual forma, la dibujaremos, solo que esta la haremos de color rojo:

    // Draw food
    ctx.fillStyle = '#f00';
    food.fill(ctx);

Ahora, analizaremos si ambos están en una intersección. En dado caso, agregaremos un punto a nuestro puntaje, y cambiaremos la posición de la comida a otro lugar al azar. Para ello, primero tendremos que declarar nuestro puntaje:

var score = 0;

También agregaremos esta función que nos será muy útil para facilitar el uso de números enteros al azar:

function random(max) {
    return Math.floor(Math.random() * max);
}

Ahora si, en la función "act", después de mover a nuestro jugador, compararemos si ambos elementos están en una intersección, y de ser así, agregaremos un punto más y cambiaremos de posición la comida:

        // Food Intersects
        if (player.intersects(food)) {
            score += 1;
            food.x = random(canvas.width / 10 - 1) * 10;
            food.y = random(canvas.height / 10 - 1) * 10;
        }

La pequeña ecuación de dividir la pantalla entre 10 dentro del random y multiplicarla al final de nuevo, hace que la comida aparezca en un lugar cada 10 pixeles, de esta forma se ajustará “a la rejilla”. Por último, dibujaremos nuestro puntuaje en pantalla:

    // Draw score
    ctx.fillText('Score: ' + score, 0, 10);

Guardemos y probemos el código. Ahora cada vez que el rectángulo verde toque al rojo, el puntaje subirá.

Código final:

[Canvas not supported by your browser]

var KEY_ENTER = 13,
    KEY_LEFT = 37,
    KEY_UP = 38,
    KEY_RIGHT = 39,
    KEY_DOWN = 40,
    
    canvas = null,
    ctx = null,
    lastPress = null,
    pause = true,
    dir = 0,
    score = 0,
    player = null,
    food = null;

window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 17);
        };
}());

document.addEventListener('keydown', function (evt) {
    lastPress = evt.which;
}, false);

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);
        }
    };
}

function random(max) {
    return Math.floor(Math.random() * max);
}

function paint(ctx) {
    // Clean canvas
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw player
    ctx.fillStyle = '#0f0';
    player.fill(ctx);
    
    // Draw food
    ctx.fillStyle = '#f00';
    food.fill(ctx);

    // Debug last key pressed
    ctx.fillStyle = '#fff';
    //ctx.fillText('Last Press: '+lastPress,0,20);
    
    // Draw score
    ctx.fillText('Score: ' + score, 0, 10);
    
    // Draw pause
    if (pause) {
        ctx.textAlign = 'center';
        ctx.fillText('PAUSE', 150, 75);
        ctx.textAlign = 'left';
    }
}

function act() {
    if (!pause) {
        // Change Direction
        if (lastPress == KEY_UP) {
            dir = 0;
        }
        if (lastPress == KEY_RIGHT) {
            dir = 1;
        }
        if (lastPress == KEY_DOWN) {
            dir = 2;
        }
        if (lastPress == KEY_LEFT) {
            dir = 3;
        }

        // Move Rect
        if (dir == 0) {
            player.y -= 10;
        }
        if (dir == 1) {
            player.x += 10;
        }
        if (dir == 2) {
            player.y += 10;
        }
        if (dir == 3) {
            player.x -= 10;
        }

        // Out Screen
        if (player.x > canvas.width) {
            player.x = 0;
        }
        if (player.y > canvas.height) {
            player.y = 0;
        }
        if (player.x < 0) {
            player.x = canvas.width;
        }
        if (player.y < 0) {
            player.y = canvas.height;
        }

        // Food Intersects
        if (player.intersects(food)) {
            score += 1;
            food.x = random(canvas.width / 10 - 1) * 10;
            food.y = random(canvas.height / 10 - 1) * 10;
        }
    }
    
    // Pause/Unpause
    if (lastPress == KEY_ENTER) {
        pause = !pause;
        lastPress = null;
    }
}

function repaint() {
    window.requestAnimationFrame(repaint);
    paint(ctx);
}

function run() {
    setTimeout(run, 50);
    act();
}

function init() {
    // Get canvas and context
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    
    // Create player and food
    player = new Rectangle(40, 40, 10, 10);
    food = new Rectangle(80, 80, 10, 10);
    
    // Start game
    run();
    repaint();
}

window.addEventListener('load', init, false);

Siguiente parte: Interactuando con varios elementos iguales.