ajout tp2mvc, tp3 et update des tp 1 et 2

DEV.4.1/tp/tp2/src/ex1/script.js

@@ -26,13 +26,16 @@ function peep() {
     const time = randomTime(1000, 1500);
     const  hole = randomHole(holes);
 
-	// TODO
+	const mole = hole.querySelector('.mole');
+    mole.classList.add('up');
+    mole.classList.remove('whacked');
 	
     setTimeout(() => {
-
-	// TODO
-		//
-     	   }}, time);
+        mole.classList.remove('up');
+        if(!timeUp) {
+            peep();
+        }
+    }, time);
 }
 
 function startGame() {
@@ -40,13 +43,31 @@ function startGame() {
     score = 0;
     timeUp = false;
 
-	// TODO
+    moles.forEach(mole => {
+        mole.classList.remove('up');
+        mole.classList.remove('whacked');
+    });
+
+    peep();
+    setTimeout(()=>{
+        timeUp = true;
+    }, duration * 1000)
 }
 
 function bonk(e) {
+    if(!this.classList.contains('up')) {
+        return;
+    }
 
-	// TODO
-	
+    score ++;
+    scoreBoard.textContent = score;
+    
+    this.classList.remove('up');
+    this.classList.add('whacked');
+
+    setTimeout(()=>{
+        this.classList.remove('whacked');
+    }, 800);
 }
 
 moles.forEach(mole => mole.addEventListener('click', bonk));

DEV.4.1/tp/tp2/src/ex1/styles.css

@@ -4,7 +4,7 @@ body {
 	align-items: center;
 	height: 100vh;
 	background-color: #f0f0f0;
-/*	font-family: Arial, sans-serif;*/
+	font-family: Arial, sans-serif;
 }
 
 .game {
@@ -24,7 +24,7 @@ body {
 	background : radial-gradient(rgb(150,250,150), #00ee00);
 
 	/*    background-color: red;/*#8b4513;*/
-	/*	background-image : url('img/mole2.png');*/
+		/*background-image : url('img/mole2.png');*/
 	position: relative;
 	border-radius: 50%;
 	margin: 10px;
@@ -43,9 +43,9 @@ body {
 }
 
 .mole.up img{
-/*	background-image : url('img/mole2.png');
+	background-image : url('img/mole2.png');
 	background-size:contain;
-	background-repeat: no-repeat;*/
+	background-repeat: no-repeat;
 	width:90px;
 	height:90px;
 
@@ -54,9 +54,9 @@ body {
 
 .mole.whacked img {
 	content: url('img/mole-whacked.png');
-/*	background-image : url('img/mole-whacked.png');
+	background-image : url('img/mole-whacked.png');
     background-size:contain;
-    background-repeat: no-repeat;*/
+    background-repeat: no-repeat;
     width:90px;
     height:90px;