1

estoy creando un juego. Y estoy haciendo el movimiento del jugador. Aqui esta el codigo:

const player=document.getElementById("player");
document.body.onkeydown=(i)=>{
    const codigo = i.which || i.keyCode;
    var left=player.offsetLeft - player.scrollLeft;
    var top=player.offsetTop - player.scrollTop;
    var h=String.fromCharCode(codigo);
    if(codigo==13){
        h="Enter";
    }
    if(h=="'"){
      left+=30;
      player.style.left=left+"px";

    }
    if(h=="%"){
        left-=30;
        if(left >= 0){
            player.style.left=left+"px";

        }
    }
    if(h=="("){
        top+=3;
        player.style.top=top+"px";

    }
    if(h=="&"){
        top-=3;
        if(top >=0){player.style.top=top+"px"}

    }

    
}

pero quisiera que el jugador ( player ) cuando se mueva tambien el scroll haciendo que el jugador se quede siempre en el centro de la pantalla. ¿es posible eso?

3
  • ¿A qué te refieres con que "esté en el centro del scroll"? ¿A que siempre se centre con respecto a la pantalla el player y no sea él/ella quien se mueva sino la cámara?
    – ben
    Commented el 30 ene. 2021 a las 3:01
  • mi intencion es el el jugador se mueva de su posicion pero se mantenga en el centro de la pantalla.
    – gabriel
    Commented el 30 ene. 2021 a las 3:05
  • Para eso me parece que hay que mover la cámara en lugar que el personaje
    – ben
    Commented el 30 ene. 2021 a las 3:15

1 respuesta 1

1

Primero arreglemos algunas cosas:

1 - keyCode ya esta desprestigiado, por lo que no se debería usar, en su lugar use, event.key.

2 - Los juegos no deben tener barras de desplazamiento, y menos la horizontal, para quitarla, en su archivo CSS llame al body y utilice la siguiente propiedad:

body{
    overflow-x: hidden;
}

3 - Los juegos requieren un bucle principal para su funcionamiento, te recomiendo usar requestAnimationFrame.

4 - Para que trabajes de forma mas organizada usa addEventListener, te regalo esto aunque tu problema no lo pide:

document.addEventListener('keydown', function (e) {
    e.preventDefault();
    switch (e.key.toLowerCase()) {
        case 'a':
            console.log('a')
            break;
        case 'w':
            console.log('w')
            break;
        case 'd':
            console.log('d')
            break;
        case 's':
            console.log('s')
            break;
    }
})

document.addEventListener('keyup', function (e) {
    e.preventDefault();
    switch (e.key.toLowerCase()) {
        case 'a':
            console.log('aLevantada')
            break;
        case 'w':
            console.log('wLevantada')
            break;
        case 'd':
            console.log('dLevantada')
            break;
        case 's':
            console.log('sLevantada')
            break;
    }
});

Ahora si, con respecto a tu problema, debes tener en cuenta lo siguiente, si tu juego utiliza un escenario que abarca toda la pantalla (del juego), es decir, no requiere que dicho escenario se desplace, entonces quien se mueve es el jugador, pero si el escenario supera la pantalla de visualización inicial del juego, es decir, tu problema, entonces, quien se mueve es el escenario, existen muchas maneras para hacerlo, por posición, por tiempo, etc, ya depende del juego.

Probablemente apenas estés iniciando con esto, te recomiendo esta página, probablemente aclare muchas de tus dudas:

http://w3.unpocodetodo.info/index.php

1
  • 1
    A pesar de tener buenas sugerencias, no parece una solución al problema del autor de la pregunta y, si proporcionas enlaces, deben ser específicos a una página que hable del tema, no un compendio de enlaces / tutoriales, no importa qué tan buenos sean.
    – Triby
    Commented el 31 ene. 2021 a las 2:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.