Un début de jeu en Canvas

Après mon premier test avec Canvas, aujourd’hui je vous présente mon deuxième test Canvas. Celui-ci va être poussé un peu plus loin, notamment avec les collisions.

Cet article est une archive du 13 Janvier 2016 ( En savoir plus ).

Yop tout le monde !

Après mon premier test avec Canvas et JavaScript, je reviens aujourd’hui vers vous pour vous présenter mon nouveau test en Canvas et JavaScript !

Dans un premier temps, sachez que ce code n’a aucune vraie utilité pour vous, c’est un test dont le but pour moi est vraiment d’apprendre à maîtriser ces technologies.

Je vais maintenant vous lister les « fonctionnalités » de ce fameux test.

Tout d’abord, quand vous allez charger votre page, vous allez vous retrouver avec un petit Père-Noël, des boules de différentes couleurs et tailles, et des carrés noirs.

• Le Père-Noël est un élément que vous allez pouvoir bouger. On va y revenir plus bas.
• Les boules sont en fait des « coins« , avec une valeur et une couleur qui diffèrent en fonction de leurs tailles.
• Les carrés noirs sont des obstacles, rien de plus simple.

Maintenant, passons au personnage du Père-Noël.

Cet élément va vous permettre de récupérer les « coins » en vous déplaçant grâce aux touches de votre clavier ( Par défaut : Haut / Bas / Droite / Gauche ).

Ensuite, vous pouvez retrouver sur la droite du Canvas, différents éléments que voici.

• Le premier : C’est ici que vous retrouverez toutes les infos sur votre « perso » ( Nombre de coins, position X et Y ).
• Le deuxième : Un gros bouton, qui lui vous permettra de reset le Canvas à tout moment.
• Le troisième : Sur celui-là, vous allez pouvoir paramétrer quasiment tout ce que vous voulez sur votre Canvas.
• Le quatrième : Une « Console« , vous y retrouverez toutes les actions effectuées.
• Le dernier : C’est un autre bouton, qui lui va servir à clear le logs si besoin.

Test avec Canvas et JavaScript

J’en ai fini pour ce petit article 😃

Pour vous, il n’aura peut être pas était très intéressant, mais pour moi, il a était très enrichissant à coder.

Et peut être qu’il va servir à un future projet … ( Cc @lennaft_ ) 👀

Si vous souhaitez donner votre avis sur ce code, n’hésitez pas en commentaire ! 😃

Allez, sur ce, bonne continuation à tous !