[Methode]scrollIntoView appliqué au canvas [Résolu]

Signaler
Messages postés
14
Date d'inscription
jeudi 25 octobre 2018
Statut
Membre
Dernière intervention
19 mars 2020
-
 SouperMario -
Bonjour, je voudrai savoir si il est possible d'utiliser le scrollIntoView dans un canvas pour un jeu. Je voudrais que quand je délace mon personnage est qu'il est à la fin du canvas l'image de fond bouge en même temps je vous mais une image que j'ai fais sur paint pour illustrer mon propos


en gros je voudrais que le suite du canvas s'affiche(quand le perso à fini de traverser le premier canvas)


Configuration: Windows / Chrome 80.0.3987.132

1 réponse

Salut,
quel est le problème?
Il suffit de détecter quand la position dépasse le bord du canvas pour changer d'image.
Ce n'est bien sûr pas un vrai scrolling(défilement en français) mais le changement d'une image donc ce ne sera pas très dynamique.

scrollIntoView est une méthode(fonction propre à un objet) des éléments HTML ce que ne sont pas les contenus d'un canvas.
Il suffit de lire la notice pour comprendre:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Canvas ne contient pas des éléments mais des images(2D ou 3d): du dessin.

La méthode que vous citez n'a aucun rapport avec ce que vous voulez puisque elle concerne les barres de défilement d'un élément(ou de la page). Elle ne fait que centrer l'affichage d'une page web sur un élément(HTML) de la page.

Renseignez vous sur ce qu'est CANVAS afin de l'utiliser.
https://www.w3schools.com/html/html5_canvas.asp

_Citation:
"The HTML <canvas> element is used to draw graphics on a web page."
_traduction :
"L'élément HTML <canvas> est utilisé pour dessiner des scènes/images sur une page web."


Donc puisque que vous parlez de dessin il faut modifier le dessin et utiliser les méthodes associées au dessin.
Commencez donc par faire la première partie de votre projet ça vous aidera à comprendre:

" quand je déplace mon personnage '
donc dessiner à différentes positions une image en effaçant à chaque fois la précédente(et l'ensemble du canvas).

C'est bien d'avoir des projets..mais il faudrait commencer par faire quelque chose. Au départ petit et ensuite vous améliorez pour arriver à ce que vous voulez.

Vous pouvez commencer par apprendre:

https://www.qwant.com/?q=animation+avec+canvas

https://www.qwant.com/?q=faire+des+jeux+avec+canvas&t=web

Ou tout simplement des cours sur JavaScript(voir request animationFrame pour l'animation, la prog évenementielle pour l'interactivité etc...) car CANVAS c'est la visualisation uniquement(et les méthodes de dessin qui vont avec).

Une bonne série de cours sur HTML5 avec en fin de série la réalisation d'un jeu sur canvas:
https://courses.edx.org/courses/course-v1:W3Cx+HTML5.1x+4T2015/course/

Bon travail.