(Javascript) Multiplayer em Canvas

/*
 * Mover QUADRADOs MULTIPLAYER
 * Protótipo para implementação de jogos Peer-to-Peer em JS e Canvas
 * Simples, mas serve pra estudos
 * [email protected]
 *
*/

<script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>


<script>


// Configurações básicas para uso de JS
var appid = 'gfr5dkuqgyyl23xr';

// Variável para definir quem é o jogador. O convidante ou convidado. Caso for = -1, não está jogando
var convidado = -1;

// Fazer a conexão
var peer = new Peer({

    key:  appid,
    debug: 0,

    config: {'iceServers': [
        { url: 'stun:stun.l.google.com:19302' }
    ]}
});

// Ao conectar, registrar o ID do jogador conectado
peer.on('open', function(id) {
  document.getElementById('seuid').innerHTML = id;
});

// caso Receber alguma conexão, chamar função recebeuConvite
peer.on('connection', function(conn) {
    recebeuConvite(conn);
});


// Ao clicar no link, abrir caixa para convite de jogador
function jogarCom() {

    // caso ele estiver jogando
    if(convidado != -1) return alert("Você já está jogando!");

    // abrir caixa
    var jogarid = prompt("Digite o ID da pessoa com quem deseja jogar:");

    // idc guarda o id com quem está jogando
    idc = jogarid;

    // enviar o convite para o id digitado
    conn = peer.connect(jogarid);

    conn.on('open', function(){
        conn.send("convite");
    });

    // aguardar dois segundos e liberar o jogo pra quem está convindado

    setTimeout(function() { convidado = false; }, 2000);




}


// funcao que recebe os dados

function recebeuConvite(c) {


    c.on('data', function(data) {

        // ao receber um dado, verificar se é convite
        if(data == "convite") {

            // caso ele já for convidado, não fazer nada
            if(convidado != -1) return false;

            // registrar quem convidou
            idc = (c.peer);

            // avisar convite
            alert("Você recebeu um convite!");

            // liberar o jogo
            convidado = true;
        }
        else {

            // caso não for jogo de convite, é para atualizar movimento
            atualizarMovimento(data);

        }

    });

}
</script>

Seu ID de jogo é: <b><span id="seuid"></span></b>

<br/>

Para jogar com alguém, <a href="javascript: jogarCom();">clique aqui</a>

<br/>

<br/>

<canvas style="background-color:black" id='canvas' width=800 height=600></canvas>


<script>
        cnv = document.getElementById('canvas').getContext('2d')

        cnv.fillStyle="white"

        // definir tamanho do quadro
        var w = 800

        var h = 600

        // definir pos inicial dos cara
        var x = new Array(0, 100)

        var y = new Array(100, 200);


        // definir velocidade de cada jogador
        dx = 30
        dy = 30


        // criar os jogadores

        cnv.clearRect(0,0,w,w);

        cnv.fillRect(x[1], y[1], 25, 25);

        cnv.fillRect(x[0], y[0], 25, 25);

        // essa funcao aqui, é chamada quando usuario teclar algo, realiza os movimentos
        function executarMovimento(t) {


                // caso nao estiver jogando, nao fazer nada

                if(convidado == -1) {

        alert("Ainda não começou o jogo!");

        return false;
    }

        // verificar se ele é o jogador 1 ou jogador 2 e proceder o movimento {W,A,S,D}
    if(convidado == true) {
        if(119 == t) y[0] -= dx;
        if(115 == t) y[0] += dx;

        if(100 == t) x[0] += dx;
        if(097 == t) x[0] -= dx;
    }
    else {
        if(119 == t) y[1] -= dx;
        if(115 == t) y[1] += dx;

        if(100 == t) x[1] += dx;
        if(097 == t) x[1] -= dx;

    }

    // verificar se ele ultrapassou os limites do quadros e corrigir
    if(y[0] < 0) y[0] = 0;
    if(x[0] < 0) x[0] = 0;

    if(y[1] < 0) y[1] = 0;
    if(x[1] < 0) x[1] = 0;



    if(y[0] > h) y[0] = h;
    if(x[0] > w) x[0] = w;

    if(y[1] > h) y[1] =h;
    if(x[1] > w) x[1] = w;


    // recriar na nova posição
    cnv.clearRect(0,0,w,w);
    cnv.fillRect(x[0], y[0], 25, 25);
    cnv.fillRect(x[1], y[1], 25, 25);
        }



        // essa funcao é chamada a cada 1 segundo, para enviar os dados para o outro PLAYER informando qual a posição do jogador
        function outroMoveu() {


    // caso ele não estiver jogando nao fazer nada
    if(convidado == -1) return false;

                // realizar conexao
    conn = peer.connect(idc);

                // enviar os dados
    conn.on('open', function(){
        // caso ele for o jogador 1, enviar as informacoes x[0] e y[0]
        if(convidado == true) conn.send(x[0]+"|"+y[0]);

        // caso for o 2, envia x[1] e y[1]
        if(convidado == false) conn.send(x[1]+"|"+y[1]);

    });

    // fechar conexão
    conn.close();

        }


        // essa funcao é chamada quando recebe as informações do outro player
        function atualizarMovimento(s) {


    if(convidado == -1) return false;

    // filtrar X e Y
    a = s.split("|");

                // verificar qual é o jogador, e mover o OUTRO jogador (afinal, as informacoes sao do OUTRO jogador e nao ele)
    if(convidado != true)  {
        x[0] = a[0];
        y[0] = a[1];
    }
    else {
        x[1] = a[0];
        y[1] = a[1];
    }


            // atualizar os quadros
    cnv.clearRect(0,0,w,w);
    cnv.fillRect(x[0], y[0], 25, 25);
    cnv.fillRect(x[1], y[1], 25, 25);

        }


        // verificar tecla pressionada no body
        function tecla_pressionada(){
                executarMovimento( window.event.keyCode) ;
        }

        // atualizar dados a cada 1 seg

        setInterval( function () { outroMoveu(); }, 1000 );
</script>

<body onKeyPress="tecla_pressionada()">