Disparen al objetivo

En la ocasión anterior aprendimos las bases de Socket.io y como comunicarnos a través de él a los distintos jugadores conectados. Sin embargo, seguramente te diste cuenta que aun cuando las mirillas compartían escenario a través de todas las ventanas, cada uno estaba jugando su propio juego independiente. Por tanto, es tiempo de ver como hacer que todos los jugadores estén sincronizados en un mismo juego.

Antes de empezar el código, analicemos un poco la situación. Si pensamos en sincronizar el juego actual, eso indica que uno de los distintos juegos, debe indicarle a los demás la nueva posición. Después, cada vez que el objetivo sea disparado por alguno, enviará actualización a los demás. En algún momento del juego, la conexión no será confiable, algunas respuestas llegarán después de otras, todos estarán en lugares dispersos distintos a los que aparentan en el juego, y los objetivos volando por mil lugares distintos entre cada juego.

Debido a experiencias previas donde ocurría esto, fue que aprendí un secreto de los buenos juegos multijugador masivos en línea: Toda la lógica del juego, se desarrolla del lado del servidor. Los clientes únicamente se encargan de leer las entradas de los dispositivos, y de desplegar los elementos visuales en pantalla.

Teniendo esto en mente, es hora de dar un cambio radical a nuestro juego. Comencemos por el cliente, donde eliminaremos la función "act" (La pasaremos al lado servidor), y modificaremos la función "enableInputs" para que envíe las acciones al servidor:

    function enableInputs() {
        document.addEventListener('mousemove', function (evt) {
            mousex = evt.pageX - canvas.offsetLeft;
            mousey = evt.pageY - canvas.offsetTop;
            emitSight(mousex, mousey, 0);
        }, false);
        canvas.addEventListener('mousedown', function (evt) {
            //lastPress = evt.which;
            emitSight(mousex, mousey, evt.which);
        }, false);
    }

Verás que uso la función "emitSight" en lugar de enviar los datos directamente. Esto para normalizar las coordenadas dentro del lienzo, antes de enviarlas:

    function emitSight(x, y, lastPress) {
        if (x < 0) {
            x = 0;
        }
        if (x > canvas.width) {
            x = canvas.width;
        }
        if (y < 0) {
            y = 0;
        }
        if (y > canvas.height) {
            y = canvas.height;
        }
        
        socket.emit('mySight', {x: x, y: y, lastPress: lastPress});
    }

A la función "Circle" removeremos la función de distancia (Eso ahora será calculado del lado servidor), y agregaremos una variable "score" para almacenar el puntaje de cada jugador de forma individual. Crearemos un arreglo con los colores de cada mirilla:

    var colors = ['#0f0', '#00f', '#ff0', '#f00'];

Para así, en la función "paint" dibujar cada mirilla y su respectivo puntaje del jugador:

        for (i = 0, l = players.length; i < l; i += 1) {
            if (players[i] !== null) {
                players[i].drawImageArea(ctx, spritesheet, 10 * (i % 4), 20, 10, 10);
                ctx.fillStyle = colors[i % 4];
                ctx.fillText('Score: ' + players[i].score, 0, 10 + i * 10);
            }
        }

Al terminar el juego, ya no mostraremos simplemente puntaje, si no que resaltaremos que se trata de TU puntaje. Para eso, tendremos una variable "me" que indicará el número de jugador de cada uno (Que más tarde veremos como obtener este valor desde el servidor), e imprimiremos el puntaje de la siguiente forma:

            ctx.fillText('Your score: ' + players[me].score, 110, 100);

Ahora pasemos a la conexión entre el servidor y el cliente. Para empezar, al conectarse un nuevo jugador, además de avisar a todos de su entrada, responderemos al mismo, indicándole su número de jugador:

        socket.emit('me', {id: socket.playerId});
        io.sockets.emit('sight', {id: socket.playerId, x: 0, y: 0});

Esto en el lado cliente, será manejado por esta simple función:

        socket.on('me', function (sight) {
            me = sight.id;
        });

El evento de desconexión se mantiene igual. El evento "mySight" es prácticamente igual, exceptuando que ahora enviamos también el último botón presionado, el cual, en caso de ser 1 (clic derecho), llamará a la función "act" en el lado servidor:

        socket.on('mySight', function (sight) {
            players[socket.playerId].x = sight.x;
            players[socket.playerId].y = sight.y;
            if (sight.lastPress === 1) {
                act(socket.playerId);
            }
            io.sockets.emit('sight', {id: socket.playerId, x: sight.x, y: sight.y, lastPress: sight.lastPress});
        });

Del lado servidor, además de la ya usada "nSight", serán necesarias las siguientes variables: Una que nos indique cuanto tiempo falta para que termine el juego, constantes para el ancho y alto del juego (Pues no hay un canvas del lado del servidor) un arreglo para almacenar los jugadores, y una copia del objetivo:

    var gameEnd = 0,
        canvasWidth = 300,
        canvasHeight = 200,
        players = [],
        target = null;

Nota que tenemos una copia de la función Circle del lado servidor para manejar el objetivo y los círculos. A esta versión de la función, le eliminaremos todas las funciones de dibujado que no son necesarias del lado servidor, dejándole únicamente con la necesaria para calcular la distancia.

Ahora que ya tenemos listas las variables necesarias, analicemos la función "act" del lado servidor. Dado que ahora la actualización del juego no se da ahora por lapso de tiempo, si no por acción, sustituimos el deltaTime por gameEnd, que nos indicará el tiempo en que el juego ha de acabar. Por tanto, cuando el juego ya haya acabado (menos el segundo de margen), crearemos un nuevo tiempo de terminado para el juego, siendo el momento en el que comienza, mas diez segundos:

    function act(player) {
        var now = Date.now();
        if (gameEnd - now < -1000) {
            gameEnd = now + 10000;
            io.sockets.emit('gameEnd', {time: gameEnd});
            target.x = random(canvasWidth / 10 - 1) * 10 + target.radius;
            target.y = random(canvasHeight / 10 - 1) * 10 + target.radius;
            io.sockets.emit('target', {x: target.x, y: target.y});
        }

Como podemos ver en el código, una vez calculado el nuevo tiempo, emitimos este valor a los jugadores. Después cambiamos de posición el objetivo, y emitimos dicho valor también. En un momento más, veremos como manipular esto del lado cliente; antes, terminemos de analizar las acciones en el servidor:

        } else if (gameEnd - now > 0) {
            if (players[player].distance(target) < 0) {
                io.sockets.emit('score', {id: player, score: 1});
                target.x = random(canvasWidth / 10 - 1) * 10 + target.radius;
                target.y = random(canvasHeight / 10 - 1) * 10 + target.radius;
                io.sockets.emit('target', {x: target.x, y: target.y});
            }
        }
    }

En esta parte del código, si no ha terminado el tiempo, vemos entonces si el juego está corriendo. Siendo este el caso, comprobamos si el jugador que disparó está en intersección con el objetivo. De ser así, emitimos un punto más para el jugador que le acertó, cambiamos de posición el objetivo y emitimos su nueva posición.

Ahora que ya tenemos listo nuestro servidor, terminemos de analizar los escuchas de las emisiones faltantes en el lado cliente. Los escuchas de "score" y "target" son muy sencillos, ya que el primero solo suma el puntuaje faltante, y el segundo ubica el objetivo en su nueva posición:

        socket.on('score',function(n,score){
            players[n].score+=score;
        });
        socket.on('target',function(x,y){
            target.x=x;
            target.y=y;
        });

Prefiero enviar los puntos a sumar, que el nuevo puntuaje, por que aun cuando tarde en llegar un dato un poco más del debido, el puntuaje siempre será el correcto. Además, puedo enviar distintos valores a sumar, como por ejemplo, si le dan a un objetivo dorado, este podría valer 3 puntos en lugar de 1 (Ya les di la imagen, ustedes lo programarán si así lo desean).

Con respecto a gameEnd, hay que analizar con un poco más de detalle el escucha:

        socket.on('score', function (sight) {
            players[sight.id].score += sight.score;
        });
        
        socket.on('target', function (t) {
            target.x = t.x;
            target.y = t.y;
        });

Notarás que originalmente asignaba time a la variable "gameEnd" del lado cliente, pero lo he cambiado por hacer el mismo proceso de sumar 10 segundos al tiempo actual en su lugar. Lo mas lógico a primera vista, parece ser controlar el tiempo desde el servidor para asegurarse que todos los jugadores estén sincronizados. Pero hay que tener en cuenta que cada computadora tiene su propia hora, y (en el mejor de los casos) puede haber diferencias de segundos entre cada una y con el servidor. Eso, en un juego que dura tan solo 10 segundos, puede ser una diferencia de tiempo crucial para su jugabilidad. Además habría que ajustar también la diferencia horaria entre los jugadores del mundo.

Por ello calculamos mejor el tiempo del lado cliente, que resulta una solución sencilla para este juego. Si en tu juego es imprescindible la sincronización entre el servidor y el cliente, es posible calcular la diferencia de tiempo entre ellos repitiendo varias veces una sustracción entre el tiempo del servidor y el del cliente, para asegurarse de tener el valor correcto. En este ejemplo, imprimo en la consola del cliente, la diferencia de tiempo entre el servidor y el cliente cada vez que se comienza un nuevo juego, para propósitos ilustrativos:

            if (window.console) {
                window.console.log('Diff: ' + (gameEnd - end.time) / 1000);
            }

Del lado cliente, siempre hay que comprobar que la consola de javascript exista, ya que los navegadores que no la tienen integrada, podrían provocar un error fatal con ello.

Teniendo comprendido todo esto, podemos ya probar nuestro juego finalizado. Como detalle extra antes de concluir, me gustaría agregar una solución rápida para manejar los jugadores.

Si has probado intensamente el juego hasta ahora, habrás ya notado que cada vez que entras de nuevo al juego, los jugadores siguen aumentando indefinidamente, y eso sigue incrementando mientras el servidor no se cierre. Para manejar este problema he creado una sencilla solución, que si bien no es la mas óptima, nos ayudará a manejar de mejor forma a los jugadores.

La idea es que, cada vez que se desconecte un jugador, guardemos su identificador en un arreglo de nombre "stack", de la siguiente forma:

        stack.push(socket.playerId);

Así, al conectarse un nuevo jugador, primero buscamos si hay identificadores pendientes sin usar. De ser así, agarramos uno de la lista, y en caso contrario, le asignamos el identificador siguiente de la variable "nSight" como lo hemos hecho hasta ahora:

        if (stack.length) {
            socket.playerId = stack.pop();
        } else {
            socket.playerId = nSight;
            nSight += 1;
        }

Para optimizar aun mejor el manejo de los jugadores, agregaremos una variable "totalPlayers" a la cual agregaremos 1 cada que se conecta un jugador, y restaremos 1 cada que se desconecta un jugador. Al final se comprueba cada que se desconecta un jugador, si esta variable es cero de nuevo (todos se han desconectado), y de ser así, vaciamos el arreglo "stack" y regresamos el valor de "nSight" a cero:

            if (totalPlayers < 0) {
                stack.length = 0;
                nSight = 0;
                console.log('Sights were reset to zero.');
            } else {
                stack.push(socket.playerId);
            }

Con esto, se manejará de forma más optimizada a los jugadores. Y de esta forma, hemos concluido nuestro primer juego multijugador masivo en línea con la ayuda de node.js y socket.io. ¡Felicidades!

Si te quedaron dudas sobre lo aquí explicado, revisa los códigos finales, y si aun tienes más dudas en el tema, no dudes en dejar tu comentario. Gracias una vez más por acompañarme en estos pequeños cursos. ¡Felices códigos!

Código final:

server.js

/*global console, process, require */
(function () {
    'use strict';
    var serverPort = process.env.PORT || 5000,
        server = null,
        io = null,
        nSight = 0,
        gameEnd = 0,
        canvasWidth = 300,
        canvasHeight = 200,
        totalPlayers = 0,
        players = [],
        stack = [],
        target = null;

    function Circle(x, y, radius) {
        this.x = (x === undefined) ? 0 : x;
        this.y = (y === undefined) ? 0 : y;
        this.radius = (radius === undefined) ? 0 : radius;
    }

    Circle.prototype = {
        constructor: Circle,

        distance: function (circle) {
            if (circle !== undefined) {
                var dx = this.x - circle.x,
                    dy = this.y - circle.y;
                return (Math.sqrt(dx * dx + dy * dy) - (this.radius + circle.radius));
            }
        }
    };

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

    function act(player) {
        var now = Date.now();
        if (gameEnd - now < -1000) {
            gameEnd = now + 10000;
            io.sockets.emit('gameEnd', {time: gameEnd});
            target.x = random(canvasWidth / 10 - 1) * 10 + target.radius;
            target.y = random(canvasHeight / 10 - 1) * 10 + target.radius;
            io.sockets.emit('target', {x: target.x, y: target.y});
        } else if (gameEnd - now > 0) {
            if (players[player].distance(target) < 0) {
                io.sockets.emit('score', {id: player, score: 1});
                target.x = random(canvasWidth / 10 - 1) * 10 + target.radius;
                target.y = random(canvasHeight / 10 - 1) * 10 + target.radius;
                io.sockets.emit('target', {x: target.x, y: target.y});
            }
        }
    }

    function MyServer(request, response) {
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.end('<h1>It\'s working!</h1>');
    }

    target = new Circle(100, 100, 10);

    server = require('http').createServer(MyServer);
    server.listen(parseInt(serverPort, 10), function () {
        console.log('Server is listening on port ' + serverPort);
    });

    io = require('socket.io').listen(server);
    io.sockets.on('connection', function (socket) {
        if (stack.length) {
            socket.playerId = stack.pop();
        } else {
            socket.playerId = nSight;
            nSight += 1;
        }
        totalPlayers += 1;
        players[socket.playerId] = new Circle(0, 0, 5);
        socket.emit('me', {id: socket.playerId});
        io.sockets.emit('sight', {id: socket.playerId, x: 0, y: 0});
        console.log(socket.id  + ' connected as player' + socket.playerId);

        socket.on('mySight', function (sight) {
            players[socket.playerId].x = sight.x;
            players[socket.playerId].y = sight.y;
            if (sight.lastPress === 1) {
                act(socket.playerId);
            }
            //socket.broadcast.volatile.emit('sight', {id: socket.playerId, x: sight.x, y: sight.y, lastPress: sight.lastPress});
            io.sockets.emit('sight', {id: socket.playerId, x: sight.x, y: sight.y, lastPress: sight.lastPress});
        });

        socket.on('disconnect', function () {
            io.sockets.emit('sight', {id: socket.playerId, x: null, y: null});
            console.log('Player' + socket.playerId + ' disconnected.');
            totalPlayers -= 1;
            if (totalPlayers < 1) {
                stack.length = 0;
                nSight = 0;
                console.log('Sights were reset to zero.');
            } else {
                stack.push(socket.playerId);
            }
        });
    });
}());

game.js

/*jslint es5: true */
/*global io */
(function (window, undefined) {
    'use strict';
    var socket = io.connect('http://localhost:5000'),
        canvas = null,
        ctx = null,
        mousex = 0,
        mousey = 0,
        gameEnd = 0,
        me = 0,
        players = [],
        colors = ['#0f0', '#00f', '#ff0', '#f00'],
        target = null,
        spritesheet = new Image();

    function Circle(x, y, radius) {
        this.x = (x === undefined) ? 0 : x;
        this.y = (y === undefined) ? 0 : y;
        this.radius = (radius === undefined) ? 0 : radius;
        this.score = 0;
    }

    Circle.prototype = {
        constructor: Circle,
        
        stroke: function (ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.stroke();
        },

        drawImageArea: function (ctx, img, sx, sy, sw, sh) {
            if (img.width) {
                ctx.drawImage(img, sx, sy, sw, sh, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
            } else {
                this.stroke(ctx);
            }
        }
    };

    function enableSockets() {
        socket.on('me', function (sight) {
            me = sight.id;
        });
        
        socket.on('sight', function (sight) {
            if (sight.lastPress === 1) {
                canvas.style.background = '#333';
            }
            if (sight.x === null && sight.y === null) {
                players[sight.id] = null;
            } else if (!players[sight.id]) {
                players[sight.id] = new Circle(sight.x, sight.y, 5);
            } else {
                players[sight.id].x = sight.x;
                players[sight.id].y = sight.y;
            }
        });
        
        socket.on('gameEnd', function (end) {
            var i = 0,
                l = 0;
            //gameEnd = end.time;
            gameEnd = Date.now() + 10000;
            for (i = 0, l = players.length; i < l; i += 1) {
                if (players[i] !== null) {
                    players[i].score = 0;
                }
            }
            if (window.console) {
                window.console.log('Diff: ' + (gameEnd - end.time) / 1000);
            }
        });
        
        socket.on('score', function (sight) {
            players[sight.id].score += sight.score;
        });
        
        socket.on('target', function (t) {
            target.x = t.x;
            target.y = t.y;
        });
    }

    function emitSight(x, y, lastPress) {
        if (x < 0) {
            x = 0;
        }
        if (x > canvas.width) {
            x = canvas.width;
        }
        if (y < 0) {
            y = 0;
        }
        if (y > canvas.height) {
            y = canvas.height;
        }

        socket.emit('mySight', {
            x: x,
            y: y,
            lastPress: lastPress
        });
    }

    function enableInputs() {
        document.addEventListener('mousemove', function (evt) {
            mousex = evt.pageX - canvas.offsetLeft;
            mousey = evt.pageY - canvas.offsetTop;
            emitSight(mousex, mousey, 0);
        }, false);
        canvas.addEventListener('mousedown', function (evt) {
            //lastPress = evt.which;
            emitSight(mousex, mousey, evt.which);
        }, false);
    }

    function paint(ctx) {
        var counter = 0,
            i = 0,
            l = 0;
        
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = '#f00';
        target.drawImageArea(ctx, spritesheet, 0, 0, 20, 20);
        ctx.strokeStyle = '#0f0';
        for (i = 0, l = players.length; i < l; i += 1) {
            if (players[i] !== null) {
                players[i].drawImageArea(ctx, spritesheet, 10 * (i % 4), 20, 10, 10);
                ctx.fillStyle = colors[i % 4];
                ctx.fillText('Score: ' + players[i].score, 0, 10 + i * 10);
            }
        }

        ctx.fillStyle = '#fff';
        counter = gameEnd - Date.now();
        if (counter > 0) {
            ctx.fillText('Time: ' + (counter / 1000).toFixed(1), 250, 10);
        } else {
            ctx.fillText('Time: 0.0', 250, 10);
        }
        if (counter < 0) {
            ctx.fillText('Your score: ' + players[me].score, 110, 100);
            if (counter < -1000) {
                ctx.fillText('CLICK TO START', 100, 120);
            }
        }
        canvas.style.background = '#000';
    }

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

    function init() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 200;
        
        target = new Circle(100, 100, 10);
        spritesheet.src = 'targetshoot.png';

        enableInputs();
        enableSockets();
        run();
    }

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