Bonjour, pour mes études j'ai un petit jeu à réaliser en javascript. On a un perso qui se déplace de gauche à droite, pour cela je joue sur les positions css de l’élément ( par exemple lorsque j'appuie sur la fleche de droite , l'element avance de 5px vers la droite) sauf que j'ai l'impression que l'élément ne se déplace pas "fluidement" , les déplacement sont un peu haché , comment faire pour corriger ce problème ?

Je précise que je n'ai pas droit à des frameworks ou librairie de jeux, ni au jquery. Donc ca doit rester que du javascript.

Par avance merci

Salut,

Si tu ne fais que déplacer l'élément par ses positions en CSS via JS (ou non, d'ailleurs), le simple fait de rajouter une transition CSS3 sur les propriétés concernées permettra d'adoucir le mouvement en le faisant déplacer.

Sinon, tu peux regarder en JS comment implémenter des transitions plus réalistes par courbes de bézier (c'est ce qu'utilise la lib easing.js par exemple), mais c'est tout de suite un peu plus compliqué.

Merci pour cette astuce sur les transitions , je regarderais aussi pour les courbes de bézier , merci !

Nous sommes a l'heure d'html5, donc de l'élement canvas
Et le javascript permet de gérer le temps
CQFD

Tu dois tout simplement te déplacer par pas variables, ton mouvement sera plus fluide. Ajoute également une courte phase d'accélération et de décélération. Effectue également tes mouvements tant que tu appuies sur la touche, pas à chaque pression.

PS: Utiliser CSS pour les jeux est dépassé, les canvas permettent de taper directement la carte graphique et d'utiliser des primitives dédiées au jeu. On utilisait CSS lorsqu'on n'avait pas le choix, l'utiliser pour les jeux aujourd'hui a autant de sens que de faire des jeux sous word ou LaTeX :D