Je viens juste de commencer avec un jeu que j'essaie de faire pour un petit projet amusant. Je suis encore nouveau sur la toile et je me demandais juste comment je pourrais faire bouger ce carré rouge via les touches fléchées? Je comprends l'événement keyup mais je ne savais pas exactement comment l'intégrer à canvas. Merci d'avance

<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(120,120);
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.translate(0,0);
}
1
Michael Kheong 14 mars 2019 à 08:40

2 réponses

Meilleure réponse

J'ai mis la forme que vous dessinez dans une fonction afin que je puisse l'appeler à nouveau après avoir effacé le canevas sur la touche enfoncée. De plus, puisque vous traduisez le contexte, vous devez effacer (-120, -120). J'espère que ça aide.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.translate(120,120);
myShape()

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(-120, -120, canvas.width + 120, canvas.height + 120);
  ctx.translate(-120,-120);
  myShape()
}});


function myShape(){
ctx.beginPath();
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();}
<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>
1
enxaneta 14 mars 2019 à 09:48
  • Premièrement : vous devez restituer le canevas à chaque fois que quelque chose a changé (au moins la partie qui a changé).

  • Deuxièmement, bien que la touche enfoncée se rallume pendant que vous maintenez le bouton enfoncé, vous voudriez un cycle de mise à jour plus cohérent ; comme requestAnimationFrame ou setInterval. Et puis plus tard, vous pouvez également tenir compte des petites incohérences dans ces intervalles en prenant en compte le temps écoulé depuis le dernier appel/mise à jour de fonction.

  • Ensuite, vous voudriez introduire un keyState qui stocke l'état actuel de plusieurs boutons, afin que vous puissiez le vérifier en dehors de l'événement réel keydown/keyup.

    const isKeyDown = {};
    document.onkeydown = document.onkeyup = function(e){ 
        isKeyDown[e.which] = isKeyDown[e.key] = e.type === "keydown";
    };
    
  • et dans un deuxième temps, vous pouvez introduire de la vitesse sur l'objet avec du frottement ou de la gravité. Ainsi, vos pressions sur les boutons ne déterminent pas le mouvement réel, mais "exercent une force" sur le mouvement actuel de votre objet.

1
Thomas 14 mars 2019 à 06:09