Merge pull request #3808 from Yashgabani845/main

candy crush saga added
kunjgit · May 27, 2024 · 66d5622 · 66d5622
2 parents bf7267d + 8038472
commit 66d5622
Show file tree

Hide file tree

Showing 14 changed files with 319 additions and 8 deletions.
diff --git a/Games/Candy_Crush_Saga/Images/blue-candy.png b/Games/Candy_Crush_Saga/Images/blue-candy.png
diff --git a/Games/Candy_Crush_Saga/Images/green-candy.png b/Games/Candy_Crush_Saga/Images/green-candy.png
diff --git a/Games/Candy_Crush_Saga/Images/orange-candy.png b/Games/Candy_Crush_Saga/Images/orange-candy.png
diff --git a/Games/Candy_Crush_Saga/Images/purple-candy.png b/Games/Candy_Crush_Saga/Images/purple-candy.png
diff --git a/Games/Candy_Crush_Saga/Images/red-candy.png b/Games/Candy_Crush_Saga/Images/red-candy.png
diff --git a/Games/Candy_Crush_Saga/Images/yellow-candy.png b/Games/Candy_Crush_Saga/Images/yellow-candy.png
diff --git a/Games/Candy_Crush_Saga/README.md b/Games/Candy_Crush_Saga/README.md
@@ -0,0 +1,46 @@
+# Candy Crush Game
+
+Welcome to Candy Crush Game! This is a simple web-based game inspired by the popular Candy Crush Saga.
+
+## Introduction
+
+Candy Crush Game is a fun and addictive puzzle game where players match colorful candies to progress through various levels. The objective is to match three or more candies of the same color in a row or column, causing them to disappear from the board and earn points.
+
+## Features
+
+- **Colorful Candies:** Enjoy vibrant and visually appealing candy graphics.
+- **Multiple Levels:** Progress through multiple levels of increasing difficulty.
+- **Special Candies:** Discover special candies with unique powers to enhance your gameplay.
+- **Scoreboard:** Keep track of your high scores and compete with friends.
+- **Responsive Design:** Play seamlessly across different devices and screen sizes.
+
+## How to Play
+
+1. Visit the game website or open the game on your device.
+2. Start a new game or continue from where you left off.
+3. Swap adjacent candies to create matches of three or more of the same color.
+4. Clear candies from the board to earn points and progress to the next level.
+5. Use special candies strategically to overcome challenges and achieve higher scores.
+6. Compete with friends and aim for the top spot on the leaderboard!
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript
+
+## Getting Started
+
+To get started with Candy Crush Game:
+
+1. Clone this repository to your local machine.
+2. Open the `index.html` file in your web browser.
+3. Start playing and have fun!
+
+## Contributing
+
+Contributions are welcome! If you have any suggestions, bug fixes, or new features to propose, please open an issue or submit a pull request.
+
+
+
+Feel free to customize this README to suit your specific project requirements and style. Happy gaming! 🍬🎮
diff --git a/Games/Candy_Crush_Saga/candy-crush-background-2.png b/Games/Candy_Crush_Saga/candy-crush-background-2.png
diff --git a/Games/Candy_Crush_Saga/index.html b/Games/Candy_Crush_Saga/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Candy Crush</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" charset="utf-8"></script>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div class="score-board">
+      <h3>score</h3>
+      <h1 id="score"></h1>
+    </div>
+    <div class="grid"></div>
+  </body>
+</html>
diff --git a/Games/Candy_Crush_Saga/script.js b/Games/Candy_Crush_Saga/script.js
@@ -0,0 +1,186 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const grid = document.querySelector('.grid')
+    const scoreDisplay = document.getElementById('score')
+    const width = 8
+    const squares = []
+    let score = 0
+
+    const candyColors = [
+        'url(images/red-candy.png)',
+        'url(images/yellow-candy.png)',
+        'url(images/orange-candy.png)',
+        'url(images/purple-candy.png)',
+        'url(images/green-candy.png)',
+        'url(images/blue-candy.png)'
+      ]
+
+    //create your board
+    function createBoard() {
+      for (let i = 0; i < width*width; i++) {
+        const square = document.createElement('div')
+        square.setAttribute('draggable', true)
+        square.setAttribute('id', i)
+        let randomColor = Math.floor(Math.random() * candyColors.length)
+        square.style.backgroundImage = candyColors[randomColor]
+        grid.appendChild(square)
+        squares.push(square)
+      }
+    }
+    createBoard()
+
+    // Dragging the Candy
+    let colorBeingDragged
+    let colorBeingReplaced
+    let squareIdBeingDragged
+    let squareIdBeingReplaced
+
+    squares.forEach(square => square.addEventListener('dragstart', dragStart))
+    squares.forEach(square => square.addEventListener('dragend', dragEnd))
+    squares.forEach(square => square.addEventListener('dragover', dragOver))
+    squares.forEach(square => square.addEventListener('dragenter', dragEnter))
+    squares.forEach(square => square.addEventListener('drageleave', dragLeave))
+    squares.forEach(square => square.addEventListener('drop', dragDrop))
+
+    function dragStart(){
+        colorBeingDragged = this.style.backgroundImage
+        squareIdBeingDragged = parseInt(this.id)
+        // this.style.backgroundImage = ''
+    }
+
+    function dragOver(e) {
+        e.preventDefault()
+    }
+
+    function dragEnter(e) {
+        e.preventDefault()
+    }
+
+    function dragLeave() {
+        this.style.backgroundImage = ''
+    }
+
+    function dragDrop() {
+        colorBeingReplaced = this.style.backgroundImage
+        squareIdBeingReplaced = parseInt(this.id)
+        this.style.backgroundImage = colorBeingDragged
+        squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced
+    }
+
+    function dragEnd() {
+        //What is a valid move?
+        let validMoves = [squareIdBeingDragged -1 , squareIdBeingDragged -width, squareIdBeingDragged +1, squareIdBeingDragged +width]
+        let validMove = validMoves.includes(squareIdBeingReplaced)
+
+        if (squareIdBeingReplaced && validMove) {
+            squareIdBeingReplaced = null
+        }  else if (squareIdBeingReplaced && !validMove) {
+           squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced
+           squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
+        } else  squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
+    }
+
+    //drop candies once some have been cleared
+    function moveIntoSquareBelow() {
+        for (i = 0; i < 55; i ++) {
+            if(squares[i + width].style.backgroundImage === '') {
+                squares[i + width].style.backgroundImage = squares[i].style.backgroundImage
+                squares[i].style.backgroundImage = ''
+                const firstRow = [0, 1, 2, 3, 4, 5, 6, 7]
+                const isFirstRow = firstRow.includes(i)
+                if (isFirstRow && (squares[i].style.backgroundImage === '')) {
+                  let randomColor = Math.floor(Math.random() * candyColors.length)
+                  squares[i].style.backgroundImage = candyColors[randomColor]
+                }
+            }
+        }
+    }
+
+
+    ///Checking for Matches
+    //for row of Four
+      function checkRowForFour() {
+        for (i = 0; i < 60; i ++) {
+          let rowOfFour = [i, i+1, i+2, i+3]
+          let decidedColor = squares[i].style.backgroundImage
+          const isBlank = squares[i].style.backgroundImage === ''
+
+          const notValid = [5, 6, 7, 13, 14, 15, 21, 22, 23, 29, 30, 31, 37, 38, 39, 45, 46, 47, 53, 54, 55]
+          if (notValid.includes(i)) continue
+
+          if(rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
+            score += 4
+            scoreDisplay.innerHTML = score
+            rowOfFour.forEach(index => {
+            squares[index].style.backgroundImage = ''
+            })
+          }
+        }
+      }
+      checkRowForFour()
+
+    //for column of Four
+      function checkColumnForFour() {
+        for (i = 0; i < 39; i ++) {
+          let columnOfFour = [i, i+width, i+width*2, i+width*3]
+          let decidedColor = squares[i].style.backgroundImage
+          const isBlank = squares[i].style.backgroundImage === ''
+
+          if(columnOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
+            score += 4
+            scoreDisplay.innerHTML = score
+            columnOfFour.forEach(index => {
+            squares[index].style.backgroundImage = ''
+            })
+          }
+        }
+      }
+    checkColumnForFour()
+
+      //for row of Three
+      function checkRowForThree() {
+        for (i = 0; i < 61; i ++) {
+          let rowOfThree = [i, i+1, i+2]
+          let decidedColor = squares[i].style.backgroundImage
+          const isBlank = squares[i].style.backgroundImage === ''
+
+          const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55]
+          if (notValid.includes(i)) continue
+
+          if(rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
+            score += 3
+            scoreDisplay.innerHTML = score
+            rowOfThree.forEach(index => {
+            squares[index].style.backgroundImage = ''
+            })
+          }
+        }
+      }
+      checkRowForThree()
+
+    //for column of Three
+      function checkColumnForThree() {
+        for (i = 0; i < 47; i ++) {
+          let columnOfThree = [i, i+width, i+width*2]
+          let decidedColor = squares[i].style.backgroundImage
+          const isBlank = squares[i].style.backgroundImage === ''
+
+          if(columnOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
+            score += 3
+            scoreDisplay.innerHTML = score
+            columnOfThree.forEach(index => {
+            squares[index].style.backgroundImage = ''
+            })
+          }
+        }
+      }
+    checkColumnForThree()
+
+    // Checks carried out indefintely - Add Button to clear interval for best practise, or clear on game over/game won. If you have this indefinite check you can get rid of calling the check functions above.
+    window.setInterval(function(){
+        checkRowForFour()
+        checkColumnForFour()
+        checkRowForThree()
+        checkColumnForThree()
+        moveIntoSquareBelow()
+      }, 100)
+    })
diff --git a/Games/Candy_Crush_Saga/style.css b/Games/Candy_Crush_Saga/style.css
@@ -0,0 +1,61 @@
+.grid {
+    height: 560px;
+    min-width: 560px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: 80px;
+    margin-top: 50px;
+    background-color: rgba(109, 127, 151, 0.5);
+    padding:5px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
+    color: #85796b;
+}
+
+.grid div {
+    height: 70px;
+    width: 70px;
+}
+
+h3 {
+ font-family: "Montserrat", sans-serif;
+ text-transform: uppercase;
+}
+
+h1 {
+ font-family: "Montserrat", sans-serif;
+ text-transform: uppercase;
+ margin-top: -10px;
+}
+
+.invisible {
+    background-color: white;
+}
+
+body {
+  background-image: url("candy-crush-background-2.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  max-width: 100vh;
+  display: flex;
+  height: 100%;
+  padding-bottom: 70px;
+}
+
+.score-board {
+  background-color: pink;
+  border-radius: 10px;
+  margin-top: 40%;
+  margin-left: 200px;
+  margin-bottom: 350px;
+  min-width: 200px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background-image: linear-gradient(#FFB6C1, #FFC0CB);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
+  color: #85796b;
+}
diff --git a/README.md b/README.md
@@ -246,7 +246,7 @@ This repository also provides one such platforms where contributers come over an
 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)                             | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)                | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who)                                   | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon)                               | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack)                                                                                                         | 
 | [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game)                                       | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics)                  | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian)                       | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game)                       |  
 | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game)                     | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) |
-
+ [Candy_Crush_Saga](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Crush_Saga)                  |
 
 | [Rock_paper_scissor](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_paper_scissor)                  |
 | [City_Builder_Game](https://github.com/kunjgit/GameZone/tree/main/Games/City_Builder_Game)                  |

diff --git a/assets/images/Candy_Crush_Saga.png b/assets/images/Candy_Crush_Saga.png
diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json
@@ -1970,7 +1970,7 @@
     "thumbnailUrl": "Dice_Roller.png"
 
   },
-  "393":{
+  "392":{
     "gameTitle": "Dragon Tower",
     "gameUrl": "Dragon_Tower",
     "thumbnailUrl": "Dragon_Tower.png"
@@ -1997,7 +1997,7 @@
     "thumbnailUrl": "Brick_and_Ball.png"
 
   },
-"392":{
+"396":{
     "gameTitle": "Dot Connect",
     "gameUrl": "Dot_Connect",
     "thumbnailUrl": "Dot_Connect.png"
@@ -2010,17 +2010,13 @@
   "thumbnailUrl": "Pop_My_Balloon.png"
 
 },
-"394":{
+"397":{
   "gameTitle": "Tower Stack",
   "gameUrl": "Tower_Stack",
   "thumbnailUrl": "Tower_Stack.png"
 
 },
 "395":{
-  "gameTitle": "Virtual Pet Game",
-  "gameUrl": "Virtual_Pet_Game",
-  "thumbnailUrl": "Virtual_Pet_Game.png"
-=======
   "gameTitle": "path finder puzzle",
   "gameUrl": "path_finder",
   "thumbnailUrl": "pathfinder.png"
@@ -2038,6 +2034,11 @@
   "gameTitle": "Shrek Vs Wild",
   "gameUrl": "Shrek_Vs_Wild",
   "thumbnailUrl": "Shrek_Vs_Wild.png"
+},
+"405":{
+  "gameTitle": "Candy_Crush_Saga",
+  "gameUrl": "Candy_Crush_Saga",
+  "thumbnailUrl": "Candy_Crush_Saga.png"
 }