Aller au contenu principal

TP4 - Pixel Art interactif

Objectifs
  1. Comprendre la structure d’une page web interactive ;
  2. Manipuler le DOM avec JavaScript ;
  3. Créer dynamiquement des éléments HTML ;
  4. Gérer des événements utilisateur ;
  5. Mettre en place un historique d’actions (undo).
Memento HTML

Un mémento sur les balises HTML et leurs attributs est disponible ici :
https://ducom.me/hema/creation-site/Topics/02a-body.html

Memento CSS

Un mémento des propriétés CSS est disponible ici :
http://www.robot24.fr/wp-content/3eme/siteweb/chapitre4/memento-des-proprietes-css.html

Memento JavaScript

Un mémento de l’utilisation du JavaScript est disponible ici :
https://ens-info.irem.univ-mrs.fr/wp-content/uploads/aide_memoire_javascript.pdf

Documents à télécharger

Télécharger l'archive ici.
Dans le dossier Téléchargements, faire un clic droit sur le fichier, puis décompresser (ou extraire tout).

Contexte​

Vous allez créer une application de Pixel Art en JavaScript.

L’utilisateur pourra :

  • choisir une couleur dans une palette ;
  • colorier une grille de pixels ;
  • annuler la dernière action (Undo) ;
  • effacer complètement le dessin (Reset).

⚠️ Contraintes importantes :

  • La grille de dessin doit être créée dynamiquement en JavaScript ;
  • La grille doit être construite avec les balises table, tr, td ;

Découverte de la structure HTML​

  1. Ouvrez le fichier index.html fourni.
  2. Repérez les éléments suivants :
    • la zone de la palette ;
    • la zone affichant la couleur sélectionnée ;
    • la balise <table> destinée à accueillir la grille ;
    • les boutons Undo et Reset.

✏️ Questions :

  • Pourquoi la balise <table> est-elle vide dans le HTML ?
  • Quel fichier sera chargé de créer la grille ?

Création de la palette de couleurs​

🎯 Objectif : permettre à l’utilisateur de choisir une couleur.

  1. Dans script.js, créez un tableau JavaScript contenant plusieurs couleurs.
  2. À l’aide d’une boucle :
    • créez dynamiquement un élément HTML pour chaque couleur ;
    • affichez ces éléments dans la palette.
  3. Lorsqu’un utilisateur clique sur une couleur :
    • cette couleur devient la couleur active ;
    • la couleur active s’affiche dans la zone prévue.

✏️ Questions :

  • Pourquoi est-il préférable d’utiliser un tableau pour stocker les couleurs ?
  • Quelle propriété CSS permet de modifier la couleur de fond d’un élément ?

Création dynamique de la grille​

🎯 Objectif : créer une grille de 10 × 10 pixels.

  1. Dans script.js, écrivez le code permettant de :
    • créer des lignes (<tr>) ;
    • créer des cellules (<td>).
  2. Chaque cellule doit être ajoutée dans une ligne, puis chaque ligne dans la table.
  3. Vérifiez que la grille s’affiche correctement dans le navigateur.

✏️ Questions :

  • Combien de boucles sont nécessaires pour créer une grille 10 × 10 ?
  • Quelle balise HTML représente une cellule de pixel ?

Colorier les pixels​

🎯 Objectif : permettre le dessin.

  1. Ajoutez un événement click sur chaque cellule du tableau.
  2. Lorsqu’une cellule est cliquée :
    • sa couleur de fond devient la couleur sélectionnée.

✏️ Question :

  • Quelle instruction JavaScript permet de modifier le style d’un élément HTML ?

Bouton Reset​

🎯 Objectif : effacer complètement le dessin.

  1. Lorsqu’on clique sur le bouton Reset :
    • toutes les cellules de la grille doivent redevenir blanches.

✏️ Questions :

  • Comment récupérer toutes les cellules du tableau ?
  • Pourquoi est-il nécessaire d’utiliser une boucle ?

Bouton Undo​

🎯 Objectif : annuler la dernière action effectuée.

  1. Créez un tableau JavaScript servant d’historique.
  2. À chaque coloriage d’une cellule :
    • mémorisez la cellule concernée ;
    • mémorisez sa couleur précédente.
  3. Lorsqu’on clique sur Undo :
    • la dernière action est annulée.

✏️ Questions :

  • Pourquoi doit-on mémoriser l’ancienne couleur ?
  • Quelle méthode de tableau permet de supprimer le dernier élément ajouté ?

Améliorations (facultatif)​

  • Modifier la taille de la grille (ex : 15 × 15).
  • Ajouter une couleur « gomme ».
  • Limiter le nombre d’actions annulables.
  • Colorier plusieurs cases en maintenant le clic de la souris.

💡 Conseil : utilisez la console du navigateur (F12) pour observer les erreurs et tester vos variables avec console.log().