¿Hay alguna forma de llamar a una función en caso de que se presione una tecla? Mi objetivo es hacer un bloque móvil y me preguntaba si podría llamar a la función para mover un bloque <div>. También tengo un problema con hacer que el personaje sea visible, ¡así que sería útil ayudarme con eso!

Javascript

//variables
var player = document.getElementById('player');

var character = {
left: player.style.left + 1,
right: player.style.right + 1,
top: player.style.top + 1,
bottom: player.style.bottom + 1,
body: document.createElement('div'),
}


//functions
 function running() {
    console.log("Running");
    console.log("Program running");
    document.appendChild('div');
 }

 function loop() {
    running();
 }

function moveRight() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}

function moveLeft() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.left = left + 2 + "px";
}

function moveup() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}



//functions called
 loop();

Html

<!DOCTYPE html>
<html>
<head>
    <title>RPG</title>
</head>
<body>
    <div id="allCode">
    <script type="text/javascript" src="index.js"></script>
    <style type="text/css" src="style.css"></style>
    </div>
    <div id="player"></div>
</body>
</html> 
-2
AaronBTW 27 feb. 2021 a las 04:32

2 respuestas

La mejor respuesta

Hay muchos ejemplos sobre cómo lidiar con eventos de manejo de claves en javascript, esto debería ayudarlo a comenzar:

document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37:
            //left function
            break;
        case 38:
            //Up function
            break;
        case 39:
            //Right function
            break;
    }
});

Editar: .keyCode, .which, .charCode son propiedades obsoletas: entonces deberías usar event.key

Por ejemplo:

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      //Up function
      break;

    case "Left": // IE/Edge specific
    case "ArrowLeft":
      //left function
      break;

    case "Right": // IE/Edge specific
    case "ArrowRight":
      //Right function
      break;
   
    default:
      return; // No key event
  }

  event.preventDefault(); // Avoid key handling twice
}, true);
0
A5H1Q 27 feb. 2021 a las 04:30

Quizás esto pueda llevarlo en la dirección correcta. Es un enlace para mover un objeto usando las teclas de flecha.

https://www.includehelp.com/code-snippets/move-object-with-arrow-keys-using-javascript-function.aspx

0
Andreas C 27 feb. 2021 a las 03:13