contact@luc-mergault.fr

Un début de jeu en Canvas

Je partage à travers ce blog mes projets et ma passion pour l'informatique en général.

Mon test de jeu avec Canvas et JavaScript

Un début de jeu en Canvas

5
(2)

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 ).


Informations
Début de réalisation : 25 Février 2016
Fin de réalisation : 27 Février 2016

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 !

  • Bitcoin
  • Ethereum
  • Binance coin
  • MetaMask
Scan to Donate Bitcoin to bc1qrunuqqs7e8e5x7lctmgflvde8claupv44qa9fg

Soutenez moi en envoyant des Bitcoin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Bitcoin 😃

Scan to Donate Ethereum to 0x81D56c63Df07ef938425e53185984DC5670E206C

Soutenez moi en envoyant des Ethereum !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Ethereum 😃

Scan to Donate Binance coin to bnb18dy3mv3f6y7h4uems5d8emn8g7zgfq7vlslkpk

Soutenez moi en envoyant des Binance coin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Binance coin 😃

Donner avec MetaMask

Si vous utilisez Metamask, vous pouvez me soutenir très simplement en cliquant sur ce bouton !

Donnez une note à cet article 😉

Note moyenne 5 / 5. Nombre de vote : 2

Pas encore de note, soyez le premier à donner une note !

Merci ! Partage cet article !

Je suis désolé que cet article ne te plaise pas

Améliorons cet article !

Dis moi ce que je peux améliorer !

 

Aucun commentaire

Ajoutez votre commentaire