2
votes

Essayer de faire bouger div à l'écran en appuyant sur

J'essaie de créer un jeu où le joueur doit naviguer avec une souris dans un labyrinthe pour trouver le bloc de fromage. J'ai du mal à faire bouger la division comme je le souhaite. Le problème est que lorsque vous appuyez sur la touche fléchée vers le bas (la touche que j'utilise pour le tester), il ne continuera pas à descendre par incréments de dix comme je le souhaite. J'ai essayé les boucles, tout le shebang, mais je n'arrive pas à comprendre comment le faire fonctionner.

document.onkeydown = function(key){
    if (key.keyCode == 38){
        console.log("up");
    } else if (key.keyCode == 39){
        console.log("right");
    } else if (key.keyCode == 37){
        console.log("left");
    } else if (key.keyCode == 40){
        mouse.style.top = 10 + "px";
    };
};

javascript html css webpage

4 commentaires

Je vais jeter un oeil, si cela résout mon problème, fermez la question, merci.

Pouvez-vous indiquer dans votre code où vous incrémentez quelque chose? Je ne vois que si des déclarations et une affectation.

@MadhawaPriyashantha On dirait que les réponses sont en jQuery, pas en javascript vanille.

@ RokoC.Buljan C'est exactement mon problème, je ne sais pas comment incrémenter chaque fois que la personne clique.

3 Réponses :

0
votes

Vous le définissez à 10 à chaque fois, utilisez split pour obtenir la valeur en premier:

else if (key.keyCode == 40){
    mouse.style.top = parseInt(mouse.style.top.split("px")[0]) + 10 + "px";
}

3 commentaires

Jack me donne toujours exactement ce dont j'ai besoin.

Pas de problème - apprendre à coder, c'est 10% de questions, 90% de réponses et 5% d'expérimentation. Je suis toujours heureux d'aider.

Cela ne semble pas fonctionner, je ne pourrais pas vous dire pourquoi je devrais faire des recherches sur parseInt () et split @Jack Bashford

2
votes

Vous pouvez utiliser un objet Player et modifier ses propriétés x et y .
Créez également un objet K pour définir sur une valeur booléenne les numéros de clés actuellement utilisés.
Que dans une boucle comme requestAnimationFrame déplacez le lecteur:

Click here to focus, and use arrows
<div id="mouse"></div>

#mouse{
  position: absolute;
  left: 0;  top: 0;
  width: 20px;  height: 20px;
  background: #000;  border-radius: 50%;
}

const Player = {
  el: document.getElementById('mouse'),
  x: 0,
  y: 0,
  step: 10,
  move() {
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
  }
};

const keysHandler = (ev) => {
  const k = ev.which;
  if (k>=37 && k<=40) {
    ev.preventDefault();
    ({
      '37' () {Player.x -= Player.step},
      '38' () {Player.y -= Player.step},
      '39' () {Player.x += Player.step},
      '40' () {Player.y += Player.step},
    }[k]());
    Player.move();
  }
}

document.addEventListener('keydown', keysHandler);

Un exemple plus simple , qui déplace l'élément par Npx pas et se répète tant que vous maintenez la touche enfoncée (comme pour taper) serait:

Click here to focus, and use arrows
<div id="mouse"></div>

#mouse{
  position: absolute;
  left: 0;  top: 0;
  width: 20px;  height: 20px;
  background: #000;  border-radius: 50%;
}

const Player = {
  el: document.getElementById('mouse'),
  x: 200,
  y: 100,
  speed: 2,
  move() {
    // If no collision with map or tiles... (TODO!)
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
  }
};
 
const K = {
  fn(ev) {
    ev.preventDefault();
    const k = ev.which;
    if (k >= 37 && k <= 40) K[k] = ev.type === "keydown"; // If is arrow
  }
};
  
const update = () => {
    // 1 / Math.sqrt(2) = 0.7071.. (Diagonal)
    let dist = K[38] && (K[37] || K[39]) || K[40] && (K[37] || K[39]) ? 0.707 : 1;
    dist *= Player.speed;
    if (K[37]) Player.x -= dist;
    if (K[38]) Player.y -= dist;
    if (K[39]) Player.x += dist;
    if (K[40]) Player.y += dist;
    Player.move();
}

document.addEventListener('keydown', K.fn);
document.addEventListener('keyup', K.fn);

(function engine() {
  update();
  window.requestAnimationFrame(engine);
}());

0 commentaires

0
votes

Même si une autre réponse utilisait parseInt , il est préférable de conserver les variables dans le code

<div id="block">

#block
{
  top: 0;
  left: 0;
  position: absolute;
  width: 30px;
  height: 60px;
  background: teal;
}

var x = 0;
var y = 0;

document.onkeydown = function(key){
    if (key.keyCode == 38){
        y -= 10;
    } else if (key.keyCode == 39){
        x += 10;
    } else if (key.keyCode == 37){
        x -= 10;
    } else if (key.keyCode == 40){
        y += 10;
    };
    
    document.getElementById("block").style.left = x+"px";
    document.getElementById("block").style.top = y+"px";
};

0 commentaires