CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Canvas bug de distance JavaScript

MiKalem898
MiKalem898
Niveau 5
19 juillet 2021 à 13:04:05

J'ai fais un canvas qui bouge avec les flèches du clavier, ça fonctionne mais y a un problème. Plus je passe de temps sur la page, plus la distance "parcourue" est élevée. Genre imaginons ai début il bouge de 1px, 3min plus tard il bouge de 20px ect..

Voilà le code :

const moveTest = document.querySelector('.moveTest'); const c = moveTest.getContext('2d');

Let left = 0;
Let tope = 0;
Let v 0.05;
Let h = 0.05;

function moveKey() {

requestAnimation Frame (moveKey)

c.clearRect(0, 0, moveTest.width, moveTest.height)

c.fillStyle 'red'; c.fillRect(left, tope, 30, 30)

window.addEventListener('keydown', (e) => { if (e.keyIdentifier 'Right') { left += v

}

else if (e.keyIdentifier 'Left') { left +- v;

} else if (e.keyIdentifier 'Up') {

tope += h;

} else if (e.keyIdentifier 'Down') {

tope += h;

}

//console.log(e.keyIdentifier)

})

Quelq'un peut m'aider svp?

cybevil
cybevil
Niveau 27
19 juillet 2021 à 19:16:03

Fourni une démo fonctionnelle qu'on puisse tester t'auras plus de retour.

Puis mets ton code entre les balises code, c'est mieux pour l'indentation sur le forum <code></code>

Test
   Test
      Test
Message édité le 19 juillet 2021 à 19:16:46 par cybevil
SoRoughh
SoRoughh
Niveau 26
19 juillet 2021 à 22:00:51

Salut,

Enleve le addeventlistener de ta fonction, mets le en dehors

Aussi mets le requestAnimationFrame à la fin de ta fonction

En fait ce qu'il se passe selon moi c'est que 60x par secondes tu vérifies si ya une touche d'appuyée, et quand tu en appuis une en fait 60x par secondes tu appliques ta condition, bref ça multiplie considérablement le nombre de pixels que t'ajoutes à tes directions et ça fait pas bien ce que tu veux

Essaye ça :ok:

MiKalem898
MiKalem898
Niveau 5
21 juillet 2021 à 21:16:50

Ça marche pas quand je le mets en dehors

MiKalem898
MiKalem898
Niveau 5
21 juillet 2021 à 21:20:00

@cibevil

Comment je pourrais mettre une démo ?

SoRoughh
SoRoughh
Niveau 26
21 juillet 2021 à 21:34:32

Montre ton code complet avec ma correction

LeDictator
LeDictator
Niveau 10
21 juillet 2021 à 23:11:02

https://jsfiddle.com

MiKalem898
MiKalem898
Niveau 5
22 juillet 2021 à 22:11:37

Tu vas rire😂 Mais en fait ça fonctionne !! J'avais pas remarqué puisque l'événement était dans la fonction j'ai du mettre left et top très bas puisque j'avais changé la taille du canvas et donc si je mettais 2(par exemple) bh ça le faisait beaucoup trop ! Et vu que c'était a 0.05 j'avais même pas remarqué qu'il avait bougé🤦 En tt cas merci tu m'auras beaucoup aidé!

SoRoughh
SoRoughh
Niveau 26
23 juillet 2021 à 00:21:07

Ok bien joué champion

Si jamais, normalement là quand t'appuis sur ton clavier pour bouger, ça met 1 micro seconde à réagir et apres ça s'enchaine

Si tu veux pas que ça arrive et que ça soit plus fluide ya une technique qui permet ça, dis moi si t'es intéressé

MiKalem898
MiKalem898
Niveau 5
23 juillet 2021 à 16:26:26

Oe vzy dis moi ?

Sous forums
  • Aide à l'achat Mac
  • Création de sites web
  • Internet
  • Macintosh
  • Création de Jeux
  • Linux
  • Programmation
  • Steam Deck
  • Hardware
La vidéo du moment