[Methode]scrollIntoView appliqué au canvas
Résolu
BabaProg
Messages postés
71
Date d'inscription
Statut
Membre
Dernière intervention
-
SouperMario -
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)
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
A voir également:
- Js scrollintoview
- Arrondi js ✓ - Forum Windows
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Js/kryptik.ad ✓ - Forum Virus
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.
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.
