Utiliser Vue avec du SVG comme base de jeu
Comme premier exemple pratique de l'utilisation de vue, je vous propose une petite expérience faite pour montrer le fonctionnement de vue à quelqu'un. L'objectif ici est de déplacer le petit carre noir que vous voyez au milieu de l'écran avec les flèches du clavier, et bien évidemment d'utiliser pour cela Vue.js et des composants.
En quelques mots, le composant littlecar utilise le composant Mousetrap pour lui permettre de gérer la vitesse de notre bolide avec les flèches de directions de votre clavier, ainsi qu'un composant timer permettant de mettre à jour la vitesse de notre composant toutes les x secondes (pour notre exemple, x est de 50 millisecondes). Le contenu de la fonction updatePosition peut etre un peu complexe à comprendre si vous avez quelques lacunes en maths,
Comme vous pouvez le voir, il est assez simple d'obtenir des résultats sympathiques avec très peu de travail en utilisant des composants permettant un support des raccourcis claviers ou un timer.
Attention, ce dernier exemple serait perfectible en de nombreux points : il serait par exemple interessant d'utiliser Window.requestAnimationFrame() en lieu et place du timer, pour avoir un déplacement plus souple et pouvoir utiliser le delta t. De plus, à partit du moment ou nous avons de multiples éléments en mouvement, le SVG va commencer à souffrir énormément, ce qui ferait de Canvas un choix plus judicieux pour ce genre d'exercices.
C'est tout pour aujourd'hui ! Je vous donne rendez-vous jeudi pour la dernière étape tout publique de notre voyage sur Vue : la création de fichiers .vue ou .js pour permettre le déplacement de vos composants de projets en projets.
