Aller au contenu

Cours 4

Un voyage pixelisé

Exercice sur le déplacement par pixel, la détection des bords du canvas ainsi que le contrôle des touches du clavier.

Résultat attendu

Consignes

  • Veuillez effectuer un fork du Codepen de départ.
  • Dans la fonction create(), ajoutez une variable de vitesse de déplacement. Assignez la valeur 3.
  • Dans la fonction create(), ajoutez 4 variables de détection de clavier pour les touches: W, A, S et D.
  • Dans la fonction create(), affichez l'image de fond d'écran.
  • Dans la fonction create(), affichez l'image du personnage au centre du canvas.
  • Dans la fonction move(), déplacez le personnage avec les touches W, A, S, D (W = Haut, A = Gauche, S = Bas, D = Droite)
  • Dans la fonction setConstraint(), limitez le déplacement du personnage aux contours du canvas. Astuce : pensez à l'origin et aux dimensions de l'image. Celle-ci doit être entièrement contenue entre les contours du canvas.