Add files via upload

avi-friedman-IL · Jan 4, 2024 · b2e8db2 · b2e8db2
1 parent 3965696
commit b2e8db2
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 38 deletions.
diff --git a/css/style.css b/css/style.css
@@ -91,7 +91,7 @@ h3 {
 .win {
     left: auto;
     background-color: #d7e1ea;
-    position:absolute;
+    position: absolute;
     /* margin-top: 5px; */
     border-radius: 25px;
     text-align: center;
@@ -146,4 +146,30 @@ h3 {
 .safe-clicks:hover {
     cursor: pointer;
     color: rgb(228, 210, 196);
-}
+}
+
+.game-rules {
+    display: inline-block;
+    margin-right: 10px;
+    width: 50px;
+    height: 50px;
+    border-radius: 25%;
+}
+
+.game-rules:hover{
+    cursor: pointer;
+    background-color: #c3d8ab;
+}
+
+.game{
+    display: none;
+    background-color: #d7e1ea;
+    position: absolute;
+    /* margin-top: 5px; */
+    border-radius: 25px;
+    text-align: center;
+    padding: 10px 20px;
+    transition: 2000ms;
+
+}
+
diff --git a/index.html b/index.html
@@ -10,15 +10,36 @@
 
 <body onload="onInit()">
 
+    <div class="game-rules" onclick="onGameRules(this)">game rules
+        <p class="game">
+            מטרת המשחק היא לחשוף את כל התאים מבלי לפוצץ מוקשים שמסתתרים שם.
+
+            ישנם 3 רמות למשחק ברמת
+            מתחיל 2 מוקשים
+            בינוני 14 מוקשים
+            מתקדם 32 מוקשים
+
+            בלחיצה על תא יוצג מה מסתתר תחתיו. אם הוא ריק יוצגו כל התאים השכנים שלו עם מספר
+
+            המספר נותן אינדיקציה כמה מוקשים נמצאים בשכנות לתא הממוספר
+
+            יש 3 כפתורים של רמז שבלחיצה על כל אחד מהם ולאחר מכן לחיצה על תא תציג לשניה מה שתחתיו
+
+            בנוסף לכך יש כפתור של לחיצה בטוחה שבלחיצה עליו יוצג לשניה תא שבטוח ללחיצה
+
+            ניצחון: כאשר כל התאים חשופים והמוקשים מסומנים. הסימון מתבצע על ידי קליק ימני של העכבר
+        </p>
+    </div>
+
     <div class="night-mode" onclick="onNightModeClick(this)">Night mode</div>
-    
+
     <div class="level beginner" onclick="onLevelsClick(this)">Beginner</div>
     <div class="level medium" onclick="onLevelsClick(this)">Medium</div>
     <div class="level expert" onclick="onLevelsClick(this)">Expert</div>
 
     <div class="smiley-button" onclick="smileyButton(this)">😀</div>
     <div class="safe-clicks" onclick="safeClicks(this)">safe clicks</div>
-    
+
     <div class="hints" onclick="onHintsClick(this)">🔍</div>
     <div class="hints" onclick="onHintsClick(this)">🔍</div>
     <div class="hints" onclick="onHintsClick(this)">🔍</div>
@@ -33,7 +54,7 @@ <h2>
         <span class="safe">3</span>
 
     </h2>
-    
+
     <div class="game-over">
         <div class="lose"></div>
         <div class="win"></div>
@@ -47,7 +68,7 @@ <h3>avi friedman</h3>
     <script src="js/util.js"></script>
     <script src="js/main.js"></script>
     <script src="js/click.js"></script>
-    
+
 </body>
 
 </html>
diff --git a/js/click.js b/js/click.js
@@ -58,21 +58,16 @@ function onCellClicked(elCell, i, j) {
     if (!currCell.minesAroundCount) expandShown(i, j)
     if (currCell.isMine) checkGameOver(elCell)
     renderSubtitle()
+    checkWin()
 }
 
-function isHint(i, j) {
-    setTimeout(() => {
-        gGame.isHint = false
-        renderCell({ i, j }, ' ')
-    }, 1000);
-}
 
 function onCellMarked(event, elCell, i, j) {
     if (!gGame.isOn) return
     const currCell = gBoard[i][j]
     var mark = currCell.isMarked ? '' : '🚩'
-
     elCell.innerText = mark
+
     currCell.isMarked = !currCell.isMarked
     checkWin()
     event.preventDefault()
@@ -115,10 +110,23 @@ function getSafeClicks() {
     return safes[idx]
 }
 
+function isHint(i, j) {
+    setTimeout(() => {
+        gGame.isHint = false
+        renderCell({ i, j }, ' ')
+    }, 1000)
+}
+
 function onHintsClick(elClick) {
-    if(!gGame.hintsCount) return
+    if (!gGame.hintsCount) return
     gGame.hintsCount--
     elClick.innerText = '💡'
     gGame.isHint = !gGame.isHint
 }
+var gIsGameRules = false
 
+function onGameRules(click) {
+    gIsGameRules = !gIsGameRules
+    const elGame = document.querySelector('.game')
+    elGame.style.display = gIsGameRules ? 'block' : 'none'
+}
diff --git a/js/main.js b/js/main.js
@@ -15,24 +15,28 @@ const gGame = {
     shownCount: 0,
     markedCount: 0,
     secsPassed: 0,
-    hintsCount:3,
+    hintsCount: 3,
     lives: 2,
     safeClicksCount: 3
 }
 
 function onInit() {
-renderSafeAndHintsClicks()
+    renderSafeAndHintsClicks()
+    restartGGame()
+    renderSubtitle()
+    clearInterval(gIntervalSecs)
+
+    gBoard = buildBoard()
+    renderBoard(gBoard, '.board-container')
+}
+
+function restartGGame() {
     gGame.lives = gLevel.SIZE === 4 ? 2 : 3
     gGame.isOn = true
     gGame.shownCount = 0
     gGame.secsPassed = 0
     gGame.safeClicksCount = 3
     gGame.hintsCount = 3
-    renderSubtitle()
-    clearInterval(gIntervalSecs)
-
-    gBoard = buildBoard()
-    renderBoard(gBoard, '.board-container')
 }
 
 function buildBoard() {
@@ -52,14 +56,6 @@ function buildBoard() {
     return board
 }
 
-function renderCell(location, value) {
-    const cellSelector = '.' + getClassName(location)
-    const elCell = document.querySelector(cellSelector)
-    elCell.innerHTML = value
-    elCell.style.backgroundColor = value === ' ' ? 'rgb(155, 205, 249)' : 'azure'
-}
-
-
 function createsMines(board) {
     for (var i = 0; i < gLevel.MINES; i++) {
 
@@ -86,6 +82,7 @@ function setMinesNegsCount(row, col) {
 }
 
 function expandShown(row, col) {
+    checkWin()
     for (var i = row - 1; i <= row + 1; i++) {
         if (i < 0 || i >= gBoard.length) continue
 
@@ -99,11 +96,17 @@ function expandShown(row, col) {
 
             if (gGame.isHint) isHint()
             else renderCell({ i, j }, currCell.minesAroundCount)
-            checkWin()
         }
     }
 }
 
+function renderCell(location, value) {
+    const cellSelector = '.' + getClassName(location)
+    const elCell = document.querySelector(cellSelector)
+    elCell.innerHTML = value
+    elCell.style.backgroundColor = (value === ' ') ? 'rgb(155, 205, 249)' : 'azure'
+}
+
 function renderSubtitle() {
     const live = gGame.lives + '❤️'
     const dead = gGame.lives + '🤍'
@@ -112,26 +115,24 @@ function renderSubtitle() {
     const elTimer = document.querySelector('.timer')
     const elSafe = document.querySelector('.safe')
     const elWin = document.querySelector('.win')
-    
+
     elLives.innerText = gGame.lives ? live : dead
     elTimer.innerText = gGame.secsPassed
     elSafe.innerText = gGame.safeClicksCount
     elWin.style.display = 'none'
-    
+
 }
 
-function renderSafeAndHintsClicks(){
+function renderSafeAndHintsClicks() {
     const elSafeClicks = document.querySelector('.safe-clicks')
     const elHints = document.querySelectorAll('.hints')
-    
+
     elSafeClicks.style.opacity = 1
-    for (var i = 0; i < 3; i++) {        
+    for (var i = 0; i < 3; i++) {
         elHints[i].innerText = '🔍'
     }
 }
 
-
-
 function checkGameOver(elCell) {
     const elSmileyButton = document.querySelector('.smiley-button')
     if (!gGame.isHint) gGame.lives--
@@ -184,7 +185,6 @@ function timer() {
     gGame.secsPassed++;
     elTimer.innerText = gGame.secsPassed
 }
-
 function onNightModeClick(click) {
     const normal = 'Normal mode'
     const night = 'Night mode'