pnj

Site/Css/menu.css

@@ -1,3 +1,26 @@
+.bgMenu {
+
+    height: 100vh;
+    width: 100vw;
+    backdrop-filter: blur(10px);
+    z-index: 4000;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: 2s; 
+    visibility: hidden;
+    opacity: 0;
+
+}
+
+.bgMenu.active {
+
+    visibility: visible; 
+    opacity: 1;
+
+}
+
 .menu {
 
     display: flex;
@@ -8,23 +31,13 @@
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 3000;
-    visibility: hidden;
-    opacity: 0;
-    transition: 2s; 
     text-align: center;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 40px;
 
 }
 
-.menu.active {
-
-    visibility: visible; 
-    opacity: 1;
-
-}
-
 .btn {
 
     z-index: 2000;
@@ -44,13 +57,13 @@
 
 }
 
-.menu.active .btn {
+.bgMenu.active .btn {
 
     cursor: pointer;
 
 }
 
-.menu.active .touche {
+.bgMenu.active .touche {
 
     cursor: default;
 

Site/Js/JsGame/play.js

@@ -37,10 +37,6 @@ function animate() {
     nbTopaze.textContent = topaze;
 
     if(menuKeys) {
-        carte.classList.remove("active");
-
-        carteKeys = false;
-
         villagers.forEach(villager => {
             villager.sprite.movingVillager = false;
         })
@@ -390,6 +386,12 @@ function animate() {
         }
     } else
 
+
+
+
+
+
+
     if(base === "home") {
 
         if (musique) {
@@ -463,7 +465,7 @@ function animate() {
                             }}
                         })
                     ) {
-
+                        //villager.sprite.image = villager.sprite.sprites.down;
                         keydialogue(villager);
                     }
                 });
@@ -540,7 +542,7 @@ function animate() {
                             }}
                         })
                     ) {
-
+                        //villager.sprite.image = villager.sprite.sprites.up;
                         keydialogue(villager);
                     }
                 });
@@ -597,6 +599,7 @@ function animate() {
                             }}
                         })
                     ) {
+                        //villager.sprite.image = villager.sprite.sprites.right;
                         keydialogue(villager);
                     }
                 });
@@ -653,6 +656,7 @@ function animate() {
                             }}
                         })
                     ) {
+                        //villager.sprite.image = villager.sprite.sprites.left;
                         keydialogue(villager);
                     }
                 });

Site/Js/JsGame/sprite.js

@@ -1,21 +1,35 @@
 // Player image
 
 const player1 = new Image();
-player1.src = './Site/ImageGame/player1.png';
+player1.src = './Site/ImageGame/Sprites/player1.png';
 
 const player2 = new Image();
-player2.src = './Site/ImageGame/player2.png';
+player2.src = './Site/ImageGame/Sprites/player2.png';
 
 const player3 = new Image();
-player3.src = './Site/ImageGame/player3.png';
+player3.src = './Site/ImageGame/Sprites/player3.png';
 
 const player4 = new Image();
-player4.src = './Site/ImageGame/player4.png';
+player4.src = './Site/ImageGame/Sprites/player4.png';
 
 // Villager image
 
-const vagabondImage = new Image();
-vagabondImage.src = './Site/ImageGame/vagabond.png';
+// Vagabond image
+
+const vagabondImage1 = new Image();
+vagabondImage1.src = './Site/ImageGame/Sprites/vagabond1.png';
+
+const vagabondImage2 = new Image();
+vagabondImage2.src = './Site/ImageGame/Sprites/vagabond2.png';
+
+const vagabondImage3 = new Image();
+vagabondImage3.src = './Site/ImageGame/Sprites/vagabond3.png';
+
+const vagabondImage4 = new Image();
+vagabondImage4.src = './Site/ImageGame/Sprites/vagabond4.png';
+
+
+
 
 const chefImage = new Image();
 chefImage.src = './Site/ImageGame/chef.png';
@@ -24,7 +38,7 @@ const voyageurImage = new Image();
 voyageurImage.src = './Site/ImageGame/voyageur.png';
 
 const georasImage = new Image();
-georasImage.src = './Site/ImageGame/voyageur.png';
+georasImage.src = './Site/ImageGame/georas.png';
 
 // Quete secondaire
 
@@ -40,6 +54,9 @@ librarianImage.src = './Site/ImageGame/voyageur.png';
 const hyldaImage = new Image();
 hyldaImage.src = './Site/ImageGame/voyageur.png';
 
+const buchQueteImage = new Image();
+buchQueteImage.src = './Site/ImageGame/voyageur.png';
+
 // Map image
 
 const mapBackground = new Image();
@@ -48,7 +65,7 @@ mapBackground.src = './Site/ImageGame/map.png';
 const mapForeground = new Image();
 mapForeground.src = './Site/ImageGame/mapForeground.png';
 
-// Houses image 
+// Home image 
 
 const homeBackground = new Image();
 homeBackground.src = './Site/ImageGame/home.png';
@@ -71,9 +88,7 @@ const player = new Sprite({
         up: player2,
         down: player1,
         left: player4,
-        right: player3,
-        negHeart: player1,
-        posHeart: player2
+        right: player3
     }
 })
 
@@ -82,13 +97,19 @@ const player = new Sprite({
 const vagabond = {
     sprite: new Sprite({
         position: {
-            x: canvas.width / 2 + 35,
-            y: canvas.height / 2 - 25
+            x: canvas.width / 2 + 40,
+            y: canvas.height / 2 + 40
         },
         frames: {
             max: 4
         },
-        image: vagabondImage
+        image: vagabondImage4,
+        sprites: {
+            up: vagabondImage2,
+            down: vagabondImage1,
+            left: vagabondImage4,
+            right: vagabondImage3
+        }
     }),
 };
 
@@ -187,20 +208,49 @@ const hylda = {
     }),
 };
 
-const villagersMap = [ragnerus, dog, voyageur, hylda];
+const buchImage = new Image();
+buchImage.src = './Site/ImageGame/Sprites/player4.png';
+
+    const buch1 = {
+        sprite: new Sprite({
+            position: {
+                x: canvas.width / 2 + 4,
+                y: canvas.height / 2 + 4
+            },
+            frames: {
+                max: 4
+            },
+            image: buchImage
+        })
+    };
+
+    const buch2 = {
+        sprite: new Sprite({
+            position: {
+                x: canvas.width / 2 + 10,
+                y: canvas.height / 2 + 10
+            },
+            frames: {
+                max: 4
+            },
+            image: buchImage
+        })
+    };
+
+const villagersMap = [ragnerus, dog, voyageur, hylda, ];
 const villagersHome = [vagabond , chef, georas, librarian];
 const villagers = [...villagersMap, ...villagersHome];
 const villagersMovable = villagers.map(villager => villager.sprite);
 
 // Enemies creation
 
 const enemyImages = [
-    ["./Site/ImageGame/goat3.png", "./Site/ImageGame/goat4.png"],
-    ["./Site/ImageGame/goat1.png", "./Site/ImageGame/goat2.png"],
-    ["./Site/ImageGame/goat3.png", "./Site/ImageGame/goat4.png"],
-    ["./Site/ImageGame/goat3.png", "./Site/ImageGame/goat4.png"],
-    ["./Site/ImageGame/goat1.png", "./Site/ImageGame/goat2.png"],
-    ["./Site/ImageGame/goat1.png", "./Site/ImageGame/goat2.png"]
+    ["./Site/ImageGame/Sprites/goat3.png", "./Site/ImageGame/Sprites/goat4.png"],
+    ["./Site/ImageGame/Sprites/goat1.png", "./Site/ImageGame/Sprites/goat2.png"],
+    ["./Site/ImageGame/Sprites/goat3.png", "./Site/ImageGame/Sprites/goat4.png"],
+    ["./Site/ImageGame/Sprites/goat3.png", "./Site/ImageGame/Sprites/goat4.png"],
+    ["./Site/ImageGame/Sprites/goat1.png", "./Site/ImageGame/Sprites/goat2.png"],
+    ["./Site/ImageGame/Sprites/goat1.png", "./Site/ImageGame/Sprites/goat2.png"]
 ];
 
 const enemyPositions = [
@@ -231,9 +281,14 @@ for (let i = 0; i < enemyPositions.length; i++) {
                 x: canvas.width / 2 + enemyPositions[i].x,
                 y: canvas.height / 2 + enemyPositions[i].y
             },
+            frames: { 
+                max: 4 
+            },
             image: image1,
-            frames: { max: 4 },
-            sprites: { up: image1, down: image2 },
+            sprites: { 
+                up: image1, 
+                down: image2 
+            },
         }),
         speed: enemySpeeds[i],
         range: enemyRanges[i],

Site/Js/JsSite/menu.js

@@ -7,7 +7,7 @@ document.addEventListener("contextmenu", function (event) {
 });
 
 const body = document.querySelector("body");
-const menu = document.querySelector(".menu");
+const bgMenu = document.querySelector(".bgMenu");
 const reprendre = document.querySelector(".reprendre");
 const inputSizes = document.querySelectorAll(".inputSize");
 const musiqueBtn = document.querySelector(".musique");
@@ -18,18 +18,18 @@ let menuKeys = false;
 
 document.addEventListener('keydown', function(event) {
     if (event.keyCode === 81) {
-        menu.classList.toggle("active");
+        bgMenu.classList.toggle("active");
 
-        menuKeys = menu.classList.contains('active');
+        menuKeys = bgMenu.classList.contains('active');
 
-        body.style.cursor = menu.classList.contains('active') ? "default" : "none";
+        body.style.cursor = bgMenu.classList.contains('active') ? "default" : "none";
     } 
 });
 
 reprendre.onclick = function() {
-    menu.classList.remove("active");
+    bgMenu.classList.remove("active");
     body.style.cursor = "none";
-    menuKeys = menu.classList.contains('active');
+    menuKeys = bgMenu.classList.contains('active');
 };
 
 inputSizes.forEach((input, index) => {

index.html

@@ -39,33 +39,35 @@
     <body>
         <div class="bgHeartLess"></div>
 
-        <div class="menu">
-            <div class="reprendre btn">Reprendre</div>
-            <div class="size">
-                <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Largeur" min="1" max="100" inputmode="numeric">
-                <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Hauteur" min="1" max="100" inputmode="numeric" >
-            </div>
-            <div class="musique btn">Musique activé</div>
-            <div class="ecran btn">Plein écran désactivé</div>
-            <div class="btn recommencer">Recommencez</div>
-            <div class="touche btn">
-                <div class="progressBlock">
-                    <p>Pourcentage du jeu fini:  <p class="progressScore">0</p>%</p>
+        <div class="bgMenu">
+            <div class="menu">
+                <div class="reprendre btn">Reprendre</div>
+                <div class="size">
+                    <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Largeur" min="1" max="100" inputmode="numeric">
+                    <input type="number" class="inputSize btn" pattern="[0-9]*" placeholder="Hauteur" min="1" max="100" inputmode="numeric" >
                 </div>
-                <div class="progressBarBlock">
-                    <div class="progressBar"></div>
-                    <div class="progressBar"></div>
+                <div class="musique btn">Musique activé</div>
+                <div class="ecran btn">Plein écran désactivé</div>
+                <div class="btn recommencer">Recommencez</div>
+                <div class="touche btn">
+                    <div class="progressBlock">
+                        <p>Pourcentage du jeu fini:  <p class="progressScore">0</p>%</p>
+                    </div>
+                    <div class="progressBarBlock">
+                        <div class="progressBar"></div>
+                        <div class="progressBar"></div>
+                    </div>
+                </div>
+                <div class="touche btn">
+                    <p>q = ouvrir le menu</p>
+                    <p>w = avancer</p>
+                    <p>s = reculer</p>
+                    <p>a = se deplacer à gauche</p>
+                    <p>d = se deplacer à droite</p>
+                    <p>e = ouvrir les cartes</p>
+                    <p>f = boire les potions de rapidité</p>
+                    <p>r = boire les potions de régénération</p>
                 </div>
-            </div>
-            <div class="touche btn">
-                <p>q = ouvrir le menu</p>
-                <p>w = avancer</p>
-                <p>s = reculer</p>
-                <p>a = se deplacer à gauche</p>
-                <p>d = se deplacer à droite</p>
-                <p>e = ouvrir les cartes</p>
-                <p>f = boire les potions de rapidité</p>
-                <p>r = boire les potions de régénération</p>
             </div>
         </div>