Reconocimiento de teclas usando socket.io

Ferkhis · #1 (**permalink**) 01/02/2015, 21:35

Hola a todos.

Ando desarrollando una aplicación web en la que cada persona que entre en mi página, tenga un vehículo y encima de él, una etiqueta con su nickname. La persona puede usar las flechas del teclado para moverlo por la pantalla, y los demás deben poder verlo, algo así como un multiplayer.

El problema que tengo, es que cuando quiero separar todas esas funciones en dos archivos javascript del cliente, en uno van las funciones que involucran el socket de cada cliente, y en el otro los eventos de teclado. Por alguna razón, es como si el uso de socket.io me bloqueara leer teclas desde javascript, impidiéndome usar document.body.onkeydown, y obligándome a usar <body onkeypress="funcionTeclado(event)", lo cual en el HTML se ve muy impresentable, preferiría poder hacerlo de la primera manera, de tal forma que quede en el archivo javascript dedicado a eventos de teclado.

Estos son mis códigos:

gameclient.js (el socket)

Código Javascript:

Ver originalvar socket = io.connect("201.233.151.12:8080");
 
socket.on("connect", function()
{
    socket.emit("nick", prompt("Ingresa tu nickname:"));
});
 
socket.on("start", function(socketid, htmlID, PosX, PosY, tagID, nick) //Al recibir el mensaje start,se reciben como parámetros la info
{
    addObj(socketid, htmlID, PosX, PosY, tagID, nick);
});
 
socket.on("remove", function(htmlID, tagID) //Al recibir el mensaje remove, se reciben como parámetros las ID HTML de etiqueta y tanque
{
    var tank = document.getElementById(htmlID);
    var tag = document.getElementById(tagID);
    document.body.removeChild(tank);//Se borra el elemento tanque
    document.body.removeChild(tag);//Se borra el elemento etiqueta
});
 
socket.on("update", function(htmlID, PosX, PosY, tagID, dir)
{
    var tank = document.getElementById(htmlID);
    var tag = document.getElementById(tagID);
    tank.style.top = PosY;
    tank.style.left = PosX
    tag.style.top = PosY-50;
    tag.style.left = PosX;
    if(dir == "l")
    {
        tank.src="tleft.bmp";
    }
    else
    {
        if(dir == "r")
        {
            tank.src="tright.bmp";
        }
        else
        {
            if(dir == "u")
            {
                tank.src="tup.bmp";
            }
            else
            {
                if(dir == "d")
                {
                    tank.src="tdown.bmp";
                }
            }
        }
    }
});
 
function movetank(PosX, PosY, dir)
{
    socket.emit("move", PosX, PosY, dir);
}

game.js (teclado)

Código Javascript:

Ver originalfunction addObj(nick, htmlID, PosX, PosY, tagID, nick)
{   
    var newtank = document.createElement("img"); //Declaramos que crearemos una etiqueta <img>
    newtank.src="tup.bmp"; //Asignamos a esa etiqueta el atrobuto src y damos la ruta del archivo
    //newtank.setAttribute("style", "width:65px;height:65px;position: fixed;top:200px;left:200px"); //Definimos las propiedades de style para la etiqueta
    newtank.setAttribute("style", "width:65px;height:65px;position: fixed;top:" + PosY + "px;left:" + PosX + "px");
    newtank.id = htmlID; //Asignamos a la etiqueta el atributo id
    newtank.title = newtank.id;
    document.body.appendChild(newtank); //Se agrega al body del HTML el elemento que creamos
    //Si no se fuera a agregar al body, sino a otra etiqueta creada o existente, sería así:
    //NomVarTag.appendChild(NewTag);
    //NomVarTag sería la variable que apunta a un elemento existente del documento HTML, y NewTag el nuevo elemento creado
    //Para eliminar la etiqueta del documento se usa:
    //document.body.removeChild(newtank);
 
    var newtag = document.createElement("div");
    newtag.id = tagID;
    newtag.innerHTML = nick;
    newtag.setAttribute("style", "border-radius:5px; opacity:0.5; padding:10px; border-width:1px; border-width: 1px; border-color:#FFFFFF; background-color:#FFFFFF; color:#000000; border-style:solid; position: fixed;top:" + (PosY-50) + "px;left:" + PosX + "px");
    document.body.appendChild(newtag);
}
 
function move(PosX, PosY, dir)
{   
    movetank(PosX, PosY, dir);
    
    if(document.getElementById("tankaudio").paused)
    {
        document.getElementById("tankaudio").play();
    }
}
 
//document.body.onkeydown = function(e){moveElement(e)};
function moveElement(e)
{
    var moveBy = 3;
    var dir;
    if(e.keyCode==37)
    {
        dir = "l";
        move(-moveBy, 0, dir);
    }
    else
    {
        if(e.keyCode==39)
        {
            dir = "r";
            move(moveBy, 0, dir);
        }
        else
        {
            if(e.keyCode==38)
            {
                dir = "u";
                move(0, -moveBy, dir);
            }
            else
            {
                if(e.keyCode==40)
                {
                    dir = "d";
                    move(0, moveBy, dir);
                }
            }
        }
    }
}
 
//document.body.onkeyup = function(){pauseMusic()};
function pauseMusic()
{
    document.getElementById("tankaudio").pause();
}

iisstart.htm (página)

Código HTML:

Ver original<html>
    <head>
        <title>Game Test :)</title>
        <link href="pumavatar.ico" rel="shortcut icon" type='image/x-icon'>
        <link rel="stylesheet" href="css2.css" type="text/css" media="all">
        <meta property="og:title" content="PuMaLaND" />
        <meta property="og:description" content="Puma's Official poor site :)" />
        <meta property="og:image" content="http://201.233.151.12:80/pumavatar.jpg" />     
        <meta property="og:url" content="http://201.233.151.12:80/" />
        <script type="text/javascript" src="socket.io/socket.io.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <script type="text/javascript" src="gameclient.js"></script>
 
        <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    </head>
    <body onkeydown="moveElement(event)" onkeyup="pauseMusic()">
    <!-- Los eventos de teclado pueden ser onkeypress, onkeyup, onkeydown -->
        <audio id="tankaudio" controls hidden>
            <source src="taudio.mp3" type="audio/mpeg">
        </audio>
        <audio autoplay controls hidden loop>
            <source src="seed.mp3" type="audio/mpeg">
        </audio>
        <div>
            <h2>-By PuMa SoftLabs-</h2>
        </div>
    </body>
</html>

Así es como tengo todo desde el lado del cliente, y así funciona bien, pero lo que quiero es poder usar los eventos desde javascript de document.body.onkeydown y document.body.onkeyup, que tengo comentados porque no me funcionan, y están siendo invocados desde el HTML. Alguien podría decirme que hay mal en la estructura de mi código que no me permite hacer lo que quiero? Muchas gracias!