diff --git a/17_candy_crush(game)/app-old.js b/17_candy_crush(game)/app-old.js
new file mode 100644
index 0000000..fef7404
--- /dev/null
+++ b/17_candy_crush(game)/app-old.js
@@ -0,0 +1,230 @@
+// Define an array containing the types of candies available in the game.
+var candies = ["Blue", "Orange", "Green", "Yellow", "Red", "Purple"];
+
+// Initialize an empty board array.
+var board = [];
+
+// Define the number of rows and columns for the game board.
+var rows = 9;
+var columns = 9;
+
+// Initialize the score variable to keep track of the player's score.
+var score = 0;
+
+// Execute the startGame function when the window loads.
+window.onload = function() {
+ startGame();
+
+ //1/10th of a second
+ window.setInterval(function() {
+ crushCandy();
+ slideCandy();
+ generateCandy();
+ }, 100)
+};
+
+// Define a function to randomly select a candy type from the candies array.
+function randomCandy() {
+ return candies[Math.floor(Math.random() * candies.length)]; //0-5.99
+};
+
+// Define the startGame function responsible for initializing the game board.
+function startGame() {
+ // Iterate through each row.
+ for (let r = 0; r < rows; r++) {
+ let row = []; // Create an empty array to represent the current row.
+
+ // Iterate through each column.
+ for (let c = 0; c < columns; c++) {
+ // Create a new image element representing a candy tile.
+ let tile = document.createElement("img");
+
+ // Set the id of the tile based on its position in the grid (row and column).
+ tile.id = r.toString() + "-" + c.toString();
+
+ // Set the source of the tile's image to a randomly selected candy type.
+ tile.src = "./images/" + randomCandy() + ".png";
+
+
+ //Drag Functionality
+ tile.addEventListener("dragstart", dragStart); //click on a candy, intialize drag process
+ tile.addEventListener("dragover", dragOver); //clicking on candy, moving mouse to drag the candy
+ tile.addEventListener("dragenter", dragEnter); //dragging candy into another candy
+ tile.addEventListener("dragleave", dragLeave); // leaving a candy over another candy
+ tile.addEventListener("drop", dragDrop); //dropping a candy over another candy
+ tile.addEventListener("dragend", dragEnd); //after drag process completed, we swap candies
+
+ // Append the tile to the HTML element with the id "board".
+ document.getElementById("board").append(tile);
+
+ // Add the tile to the current row array.
+ row.push(tile);
+ }
+
+ // Add the current row array to the board array.
+ board.push(row);
+ }
+ // Output the populated board array to the console for debugging purposes.
+ console.log(board);
+};
+
+// Variables to hold reference of tiles involved in drag and drop
+let currTile = null;
+let otherTile = null;
+
+function dragStart() {
+ //this refers to tile that was clicked for dragging
+ currTile = this;
+}
+
+function dragOver(e) {
+ e.preventDefault();
+}
+
+function dragLeave() {
+
+}
+
+
+function dragDrop() {
+ //this refers target tile that was dropped on
+ otherTile = this;
+}
+
+function dragEnter() {
+ e.preventDefault();
+}
+
+function dragEnd() {
+
+ if(currTile.src.includes("blank") || otherTile.src.includes("blank")) {
+ return;
+ }
+
+ let currCoords = currTile.id.split("-"); //id="0-0" -> ["0", "0"]
+ let r = parseInt(currCoords[0]);
+ let c = parseInt(currCoords[1]);
+
+ let otherCoords = otherTile.id.split("-"); //id="0-0" -> ["0", "0"]
+ let r2 = parseInt(otherCoords[0]);
+ let c2 = parseInt(otherCoords[1]);
+
+ let moveLeft = c2 == c-1 && r == r2;
+ let moveRight = c2 == c+1 && r == r2;
+
+ let moveUp = r2 == r-1 && c == c2;
+ let moveDown = r2 == r+1 && c == c2;
+
+ let isAdjacent = moveLeft || moveRight || moveUp || moveDown;
+
+ if(isAdjacent) {
+ let currImg = currTile.src;
+ let otherImg = otherTile.src;
+ currTile.src = otherImg;
+ otherTile.src = currImg;
+
+ let validMove = checkValid();
+ if(!validMove) {
+ let currImg = currTile.src;
+ let otherImg = otherTile.src;
+ currTile.src = otherImg;
+ otherTile.src = currImg;
+ }
+ }
+};
+
+function crushCandy() {
+ crushThree();
+ // crushFour();
+ // crushFive();
+ document.getElementById("score").innerText = score;
+}
+
+function crushThree() {
+ // check rows
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns-2; c++) {
+ let candy1 = board[r][c];
+ let candy2 = board[r][c+1];
+ let candy3 = board[r][c+2];
+
+ if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
+ candy1.src = "./images/blank.png"
+ candy2.src = "./images/blank.png"
+ candy3.src = "./images/blank.png"
+ score += 3;
+ }
+ }
+ }
+
+ //check columns
+ for (let c = 0; c < columns; c++) {
+ for(let r = 0; r < rows - 2; r++) {
+ let candy1 = board[r][c];
+ let candy2 = board[r+1][c];
+ let candy3 = board[r+2][c];
+
+ if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
+ candy1.src = "./images/blank.png"
+ candy2.src = "./images/blank.png"
+ candy3.src = "./images/blank.png"
+ score += 3;
+ }
+ }
+ }
+}
+
+function checkValid() {
+ // check rows
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns-2; c++) {
+ let candy1 = board[r][c];
+ let candy2 = board[r][c+1];
+ let candy3 = board[r][c+2];
+
+ if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
+ return true;
+ }
+ }
+}
+
+//check columns
+for (let c = 0; c < columns; c++) {
+ for(let r = 0; r < rows - 2; r++) {
+ let candy1 = board[r][c];
+ let candy2 = board[r+1][c];
+ let candy3 = board[r+2][c];
+
+ if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+};
+
+// for sliding the candies
+function slideCandy() {
+ for (let c = 0; c < columns; c++) {
+ let ind = rows - 1;
+ for (let r = columns - 1; r >= 0; r--) {
+ if(!board[r][c].src.includes("blank")) {
+ board[ind][c].src = board[r][c].src;
+ ind -= 1;
+ }
+ }
+
+ for (let r = ind; r >= 0; r--) {
+ board[r][c].src = "./images/blank.png";
+ }
+ }
+}
+
+function generateCandy() {
+ for (let c = 0; c < columns; c++) {
+ if(board[0][c].src.includes("blank")) {
+ board[0][c].src = "./images/" + randomCandy() + ".png";
+ }
+ }
+}
\ No newline at end of file
diff --git a/17_candy_crush(game)/app.js b/17_candy_crush(game)/app.js
index f1c9061..854c3b8 100644
--- a/17_candy_crush(game)/app.js
+++ b/17_candy_crush(game)/app.js
@@ -45,14 +45,6 @@ function startGame() {
// Set the source of the tile's image to a randomly selected candy type.
tile.src = "./images/" + randomCandy() + ".png";
- //Drag Functionality
- tile.addEventListener("dragstart", dragStart); //click on a candy, intialize drag process
- tile.addEventListener("dragover", dragOver); //clicking on candy, moving mouse to drag the candy
- tile.addEventListener("dragenter", dragEnter); //dragging candy into another candy
- tile.addEventListener("dragleave", dragLeave); // leaving a candy over another candy
- tile.addEventListener("drop", dragDrop); //dropping a candy over another candy
- tile.addEventListener("dragend", dragEnd); //after drag process completed, we swap candies
-
// Append the tile to the HTML element with the id "board".
document.getElementById("board").append(tile);
@@ -63,94 +55,140 @@ function startGame() {
// Add the current row array to the board array.
board.push(row);
}
+
// Output the populated board array to the console for debugging purposes.
console.log(board);
-};
-// Variables to hold reference of tiles involved in drag and drop
-let currTile = null;
-let otherTile = null;
+ // Check if the device is a touch-enabled device
+ if (isTouchDevice()) {
+ // Touch Event Listeners
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns; c++) {
+ let tile = board[r][c];
+ tile.addEventListener("touchstart", touchStart); // Tap on a candy, initialize touch process
+ tile.addEventListener("touchmove", touchMove); // Moving finger while touching the candy
+ tile.addEventListener("touchend", touchEnd); // After touch process completed, handle the result
+ }
+ }
+ } else {
+ // Drag Event Listeners
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns; c++) {
+ let tile = board[r][c];
+ tile.draggable = true;
+ tile.addEventListener("dragstart", dragStart); // Click on a candy, initialize drag process
+ tile.addEventListener("dragover", dragOver); // Clicking on candy, moving mouse to drag the candy
+ tile.addEventListener("dragenter", dragEnter); // Dragging candy into another candy
+ tile.addEventListener("dragleave", dragLeave); // Leaving a candy over another candy
+ tile.addEventListener("drop", dragDrop); // Dropping a candy over another candy
+ tile.addEventListener("dragend", dragEnd); // After drag process completed, swap candies
+ }
+ }
+ }
+}
+
+// Function to check if the device is touch-enabled
+function isTouchDevice() {
+ return 'ontouchstart' in window || navigator.maxTouchPoints;
+}
-function dragStart() {
- //this refers to tile that was clicked for dragging
+// Touch event functions
+function touchStart(event) {
currTile = this;
}
-function dragOver(e) {
- e.preventDefault();
+function touchMove(event) {
+ event.preventDefault();
+}
+
+function touchEnd(event) {
+ otherTile = this;
+ performSwap();
+}
+
+// Drag event functions
+function dragStart(event) {
+ currTile = this;
}
-function dragLeave() {
+function dragOver(event) {
+ event.preventDefault();
+}
+function dragEnter(event) {
+ event.preventDefault();
}
+function dragLeave(event) {
+ // Leave empty or add any desired behavior
+}
-function dragDrop() {
- //this refers target tile that was dropped on
+function dragDrop(event) {
otherTile = this;
+ performSwap();
}
-function dragEnter() {
- e.preventDefault();
+function dragEnd(event) {
+ // Leave empty or add any desired behavior
}
-function dragEnd() {
-
- if(currTile.src.includes("blank") || otherTile.src.includes("blank")) {
+// Function to perform the swap of candies after touch or drag events
+function performSwap() {
+ if (currTile.src.includes("blank") || otherTile.src.includes("blank")) {
return;
}
- let currCoords = currTile.id.split("-"); //id="0-0" -> ["0", "0"]
+ let currCoords = currTile.id.split("-");
let r = parseInt(currCoords[0]);
let c = parseInt(currCoords[1]);
-
- let otherCoords = otherTile.id.split("-"); //id="0-0" -> ["0", "0"]
+
+ let otherCoords = otherTile.id.split("-");
let r2 = parseInt(otherCoords[0]);
let c2 = parseInt(otherCoords[1]);
- let moveLeft = c2 == c-1 && r == r2;
- let moveRight = c2 == c+1 && r == r2;
-
- let moveUp = r2 == r-1 && c == c2;
- let moveDown = r2 == r+1 && c == c2;
+ let moveLeft = c2 == c - 1 && r == r2;
+ let moveRight = c2 == c + 1 && r == r2;
+ let moveUp = r2 == r - 1 && c == c2;
+ let moveDown = r2 == r + 1 && c == c2;
let isAdjacent = moveLeft || moveRight || moveUp || moveDown;
- if(isAdjacent) {
+ if (isAdjacent) {
let currImg = currTile.src;
let otherImg = otherTile.src;
currTile.src = otherImg;
otherTile.src = currImg;
let validMove = checkValid();
- if(!validMove) {
- let currImg = currTile.src;
- let otherImg = otherTile.src;
- currTile.src = otherImg;
- otherTile.src = currImg;
+ if (!validMove) {
+ currTile.src = currImg;
+ otherTile.src = otherImg;
}
}
-};
+}
+
+// Function to crush candies
function crushCandy() {
crushThree();
- // crushFour();
- // crushFive();
+ // CrushFour(); // Uncomment if you have this function
+ // CrushFive(); // Uncomment if you have this function
document.getElementById("score").innerText = score;
}
+// Function to crush candies in sets of three
function crushThree() {
- // check rows
+ // Check rows
for (let r = 0; r < rows; r++) {
- for (let c = 0; c < columns-2; c++) {
+ for (let c = 0; c < columns - 2; c++) {
let candy1 = board[r][c];
- let candy2 = board[r][c+1];
- let candy3 = board[r][c+2];
+ let candy2 = board[r][c + 1];
+ let candy3 = board[r][c + 2];
- if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- candy1.src = "./images/blank.png"
- candy2.src = "./images/blank.png"
- candy3.src = "./images/blank.png"
+ if (candy1.src === candy2.src && candy2.src === candy3.src && !candy1.src.includes("blank")) {
+ candy1.src = "./images/blank.png";
+ candy2.src = "./images/blank.png";
+ candy3.src = "./images/blank.png";
score += 3;
}
}
@@ -187,42 +225,45 @@ function checkValid() {
}
}
-//check columns
-for (let c = 0; c < columns; c++) {
- for(let r = 0; r < rows - 2; r++) {
- let candy1 = board[r][c];
- let candy2 = board[r+1][c];
- let candy3 = board[r+2][c];
+ // Check columns
+ for (let c = 0; c < columns; c++) {
+ for (let r = 0; r < rows - 2; r++) {
+ let candy1 = board[r][c];
+ let candy2 = board[r + 1][c];
+ let candy3 = board[r + 2][c];
- if(candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- return true;
+ if (candy1.src === candy2.src && candy2.src === candy3.src && !candy1.src.includes("blank")) {
+ candy1.src = "./images/blank.png";
+ candy2.src = "./images/blank.png";
+ candy3.src = "./images/blank.png";
+ score += 3;
+ }
}
}
- }
-
- return false;
-};
+}
-// for sliding the candies
+// Function to slide candies
function slideCandy() {
for (let c = 0; c < columns; c++) {
let ind = rows - 1;
- for (let r = columns - 1; r >= 0; r--) {
- if(!board[r][c].src.includes("blank")) {
+ for (let r = rows - 1; r >= 0; r--) {
+ if (!board[r][c].src.includes("blank")) {
board[ind][c].src = board[r][c].src;
- ind -= 1;
+ ind--;
}
}
+ // Fill the remaining top rows with new candies
for (let r = ind; r >= 0; r--) {
- board[r][c].src = "./images/blank.png";
+ board[r][c].src = "./images/" + randomCandy() + ".png";
}
}
}
+// Function to generate new candies at the top
function generateCandy() {
for (let c = 0; c < columns; c++) {
- if(board[0][c].src.includes("blank")) {
+ if (board[0][c].src.includes("blank")) {
board[0][c].src = "./images/" + randomCandy() + ".png";
}
}
diff --git a/17_candy_crush(game)/app3.js b/17_candy_crush(game)/app3.js
new file mode 100644
index 0000000..e69de29
diff --git a/17_candy_crush(game)/candy.css b/17_candy_crush(game)/candy.css
index 4e592bc..ef12927 100644
--- a/17_candy_crush(game)/candy.css
+++ b/17_candy_crush(game)/candy.css
@@ -23,7 +23,17 @@ body {
flex-wrap: wrap;
}
-#board img {
+/* #board {
+ border: 1px solid red;
+ display: grid;
+ grid-template-columns: repeat(9, 50px);
+ grid-template-rows: repeat(9, 50px);
+ margin: 20px auto;
+ gap: 5px;
+ width: 400px;
+} */
+
+.candy, #board img {
height: 50px;
width: 50px;
}
diff --git a/17_candy_crush(game)/index.html b/17_candy_crush(game)/index.html
index e88d8d2..3d021a2 100644
--- a/17_candy_crush(game)/index.html
+++ b/17_candy_crush(game)/index.html
@@ -5,7 +5,7 @@
Candy Crush Using Javascript
-
+
Score: