version 4, game board and score added

Project/index.html

@@ -8,20 +8,40 @@
 <script type="text/javascript" src="main.js"></script>
 <h1>Вас приветствует игра "Камень, Ножницы, Бумага"</h1>
 
-<div class="card-imgs">
+<div class="game-board">
-    <div class="card-img", id="sci">
+
-        <img src="img/ножницы.png", onclick="game(2)">
+    <div class="box">
+        <img id="player-img">
     </div>
 
-    <div class="card-img", id="pap", onclick="game(1)">
+    <div class="box" id="result-box">
+        <img id="result-img" src="">
+    </div>
+    
+    <div class="box">
+        <img id="npc-img">
+    </div>
+
+</div>
+
+<div class="card-imgs">
+
+    <div class="card-img" id="rock" onclick="game(3)">
+        <img src="img/камушек.png">
+    </div>
+
+    <div class="card-img" id="pap" onclick="game(1)">
         <img src="img/бумага.png">
     </div>
 
-    <div class="card-img", id="rock", onclick="game(3)">
+    <div class="card-img" id="sci" onclick="game(2)">
-        <img src="img/камушек.png">
+        <img src="img/ножницы.png">
     </div>
+
 </div>
 
+<div id="score"></div>
+
 </body>
 
 </html>

Project/main.js

@@ -12,17 +12,29 @@ function save() {
     localStorage.setItem("stats", JSON.stringify(stats));
 }
 
-console.log(npc);
+function updateScore() {
-console.log(hum);
+    document.getElementById("score").textContent =
+        "Ваши победы-" + stats.wins +
+        ", Ваши проигрыши-" + stats.looses +
+        ", Ваши ничьи-" + stats.draws;
+}
 
-const Stone = { num: 3, Name: 'камень' };
+const images = ["", "бумага", "ножницы", "камушек"];
+
+const Stone = { num: 3, Name: 'камушек' };
 const Scissors = { num: 2, Name: 'ножницы' };
 const Paper = { num: 1, Name: 'бумага' };
 
 function game(hum) {
 
+    document.getElementById("result-img").src = "";
+
     let npc = Math.floor(Math.random() * 3) + 1;
 
+    document.getElementById("player-img").src = "img/" + images[hum] + ".png";
+
+    document.getElementById("npc-img").src = "img/" + images[npc] + ".png";
+
     if (npc === 1 && hum === 3) {
         npc = 4
     }
@@ -31,24 +43,28 @@ function game(hum) {
     }
 
     if (npc > hum) {
+        document.getElementById("result-img").src = "img/знак меньше.png";
         console.log("Вы проиграли");
-        alert("Вы проиграли");
         stats.looses++;
-        save()
+        save();
-    } else if (npc === hum) {
+        updateScore();
+    }
+    else if (npc === hum) {
+        document.getElementById("result-img").src = "img/знак равно.png";
         console.log("Ничья");
-        alert("Ничья");
         stats.draws++;
-        save()
+        save();
-    } else if (npc < hum) {
+        updateScore();
+    }
+    else if (npc < hum) {
+        document.getElementById("result-img").src = "img/знак больше.png";
         console.log("Вы выиграли");
-        alert("Вы выиграли");
         stats.wins++;
-        save()
+        save();
-    } else {
+        updateScore();
-        console.log("Пользователь написал какую-то фигню");
     }
 
 }
 
+updateScore();
 console.log("wins-" + stats.wins + ",looses-" + stats.looses + ",draws-" + stats.draws);

Project/style.css

@@ -1,19 +1,52 @@
+h1 {
+    text-align: center;
+}
+
+#score {
+    text-align: center;
+    font-size: 30px;
+}
+
+
 .game-board {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 600px;
+    margin: 20px auto;
+}
+
+.box {
+    width: 200px;
+    height: 250px;
+
+    border: 5px solid black;
+
     display: flex;
     justify-content: center;
-    gap: 20px;
+    align-items: center;
-    flex-wrap: wrap;
+}
+
+.box img {
+    width: 150px;
 }
 
 
 .card-img {
     width: 200px;
     height: 200px;
-    overflow: hidden;
 }
 
 .card-img img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
+}
+
+.card-imgs {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 20px;
 }