ajouter systeme de dessin, membre par membre

science-quest/src/components/jeux/pendu/PenduDessin.vue

@@ -3,87 +3,110 @@ export default{
     props:["vieRestantes"], //maximum 10
     data(){
         return {
-
+            viesEpuisees:10-(this.vieRestantes??10),
+            ordreDessin:[
+                this.potenceBas,
+                this.potenceVertical,
+                this.potencePoutre,
+                this.potenceEquerre,
+                this.corde,
+                this.tete,
+                this.corps,
+                this.brasGauche,
+                this.brasDroit,
+                this.jambeDroite,
+                this.jambeGauche
+            ],
+            ctx:null
         }
     },
+    mounted(){
+        this.$refs.pendu.width=200
+        this.$refs.pendu.height=200
+        this.ctx = this.$refs.pendu.getContext("2d");
+    },
     methods:{
-        dessiner: function(){
+        dessiner(){
-            // Récupérer le contexte de dessin 2D
+            if(this.viesEpuisees<=10){
-            this.$refs.pendu.width=200
+                this.ordreDessin[this.viesEpuisees]()
-            this.$refs.pendu.height=200
+                this.viesEpuisees++;
-            
+            }
-const ctx = this.$refs.pendu.getContext("2d");
+        },
-
+        potenceBas: function(){
-// Tracer la potence (trait bas)
+            // Tracer la potence (trait bas)
-ctx.beginPath();
+            this.ctx.beginPath();
-ctx.moveTo(50, 200);
+            this.ctx.moveTo(50, 200);
-ctx.lineTo(150, 200);
+            this.ctx.lineTo(150, 200);
-ctx.stroke();
+            this.ctx.stroke();
-
+        },
-// Tracer la potence (trait vertical)
+        potenceVertical: function(){
-ctx.beginPath();
+            // Tracer la potence (trait vertical)
-ctx.moveTo(100, 200);
+            this.ctx.beginPath();
-ctx.lineTo(100, 50);
+            this.ctx.moveTo(100, 200);
-ctx.stroke();
+            this.ctx.lineTo(100, 50);
-
+            this.ctx.stroke();
-// Tracer la potence (poutre)
+        },
-ctx.beginPath();
+        potencePoutre: function(){
-ctx.moveTo(100, 50);
+            // Tracer la potence (poutre)
-ctx.lineTo(150, 50);
+            this.ctx.beginPath();
-ctx.stroke();
+            this.ctx.moveTo(100, 50);
-
+            this.ctx.lineTo(150, 50);
-// Tracer la potence (equerre)
+            this.ctx.stroke();
-ctx.beginPath();
+        },
-ctx.moveTo(100, 70);
+        potenceEquerre: function(){
-ctx.lineTo(130, 50);
+            // Tracer la potence (equerre)
-ctx.stroke();
+            this.ctx.beginPath();
-
+            this.ctx.moveTo(100, 70);
-// Tracer la corde
+            this.ctx.lineTo(130, 50);
-ctx.beginPath();
+            this.ctx.stroke();
-ctx.moveTo(150, 50); // Déplacer le point de départ au sommet de la potence
+        },
-ctx.lineTo(150, 75); // Tracer une ligne verticale jusqu'à la tête du pendu
+        corde: function(){
-ctx.stroke(); // Dessiner le trait
+            // Tracer la corde
-
+            this.ctx.beginPath();
-// Tracer l'équerre
+            this.ctx.moveTo(150, 50); // Déplacer le point de départ au sommet de la potence
-ctx.beginPath();
+            this.ctx.lineTo(150, 75); // Tracer une ligne verticale jusqu'à la tête du pendu
-ctx.moveTo(150, 100);
+            this.ctx.stroke(); // Dessiner le trait
-ctx.lineTo(150, 150);
+        },
-ctx.stroke();
+        tete: function(){
-
+            // Tracer la tête
-// Tracer la tête
+            this.ctx.beginPath();
-ctx.beginPath();
+            this.ctx.arc(150, 87, 12, 0, Math.PI * 2);
-ctx.arc(150, 87, 12, 0, Math.PI * 2);
+            this.ctx.stroke();
-ctx.stroke();
+        },
-
+        corps: function(){
-// Tracer le corps
+            // Tracer le corps
-ctx.beginPath();
+            this.ctx.beginPath();
-ctx.moveTo(150, 100);
+            this.ctx.moveTo(150, 100);
-ctx.lineTo(150, 150);
+            this.ctx.lineTo(150, 150);
-ctx.stroke();
+            this.ctx.stroke();
-
+        },
-// Tracer le bras gauche
+        brasGauche: function(){
-ctx.beginPath();
+            // Tracer le bras gauche
-ctx.moveTo(150, 110);
+            this.ctx.beginPath();
-ctx.lineTo(130, 130);
+            this.ctx.moveTo(150, 110);
-ctx.stroke();
+            this.ctx.lineTo(130, 130);
-
+            this.ctx.stroke();
-// Tracer le bras droit
+        },
-ctx.beginPath();
+        brasDroit: function(){
-ctx.moveTo(150, 110);
+            // Tracer le bras droit
-ctx.lineTo(170, 130);
+            this.ctx.beginPath();
-ctx.stroke();
+            this.ctx.moveTo(150, 110);
-
+            this.ctx.lineTo(170, 130);
-// Tracer la jambe gauche
+            this.ctx.stroke();
-ctx.beginPath();
+        },
-ctx.moveTo(150, 150);
+        jambeGauche: function(){
-ctx.lineTo(130, 180);
+            // Tracer la jambe gauche
-ctx.stroke();
+            this.ctx.beginPath();
-
+            this.ctx.moveTo(150, 150);
-// Tracer la jambe droite
+            this.ctx.lineTo(130, 180);
-ctx.beginPath();
+            this.ctx.stroke();
-ctx.moveTo(150, 150);
+        },
-ctx.lineTo(170, 180);
+        jambeDroite: function(){
-ctx.stroke();
+            // Tracer la jambe droite
+            this.ctx.beginPath();
+            this.ctx.moveTo(150, 150);
+            this.ctx.lineTo(170, 180);
+            this.ctx.stroke();
         }
     }
 }