From cc0c45bb8726a9054f0ef96f94fcf13de20b3889 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Wed, 22 Jan 2025 19:40:26 +0500 Subject: [PATCH 1/7] Added 30-Simon-Says-Game --- 30-Simon-Says-Game/index.html | 41 +++++++ 30-Simon-Says-Game/script.js | 196 ++++++++++++++++++++++++++++++++++ 30-Simon-Says-Game/style.css | 110 +++++++++++++++++++ README.md | 64 +++++------ 4 files changed, 380 insertions(+), 31 deletions(-) create mode 100644 30-Simon-Says-Game/index.html create mode 100644 30-Simon-Says-Game/script.js create mode 100644 30-Simon-Says-Game/style.css diff --git a/30-Simon-Says-Game/index.html b/30-Simon-Says-Game/index.html new file mode 100644 index 0000000..81c8447 --- /dev/null +++ b/30-Simon-Says-Game/index.html @@ -0,0 +1,41 @@ + + + + + + Talha - Simon Says Game + + + + + + + + + + + + + +

Simon Says Game

+ + + +

+ + + + diff --git a/30-Simon-Says-Game/script.js b/30-Simon-Says-Game/script.js new file mode 100644 index 0000000..4d4bea9 --- /dev/null +++ b/30-Simon-Says-Game/script.js @@ -0,0 +1,196 @@ +const colors = ["green", "red", "yellow", "blue"]; +let gamePattern = []; +let userPattern = []; +let level = 0; +let clickCount = 0; +let gameStarted = false; + +document.getElementById("start-btn").addEventListener("click", startGame); + +function startGame() { + if (!gameStarted) { + gameStarted = true; + level = 0; + gamePattern = []; + userPattern = []; + clickCount = 0; + document.getElementById("status").textContent = `Level ${level}`; + document.getElementById("click-count").textContent = clickCount; + + showMyTexts(); + nextSequence(); + } +} + +function nextSequence() { + userPattern = []; + clickCount = 0; + document.getElementById("click-count").textContent = clickCount; + level++; + document.getElementById("status").textContent = `Level ${level}`; + + // Clear the sequence display at the start of each level + document.getElementById("sequence-display").textContent = "-"; + + // Generate a random color and push it to the gamePattern + const randomColor = colors[Math.floor(Math.random() * colors.length)]; + gamePattern.push(randomColor); + + animateSequence(); +} + +function animateSequence() { + let i = 0; + const interval = setInterval(() => { + flashButton(gamePattern[i]); + i++; + if (i === gamePattern.length) { + clearInterval(interval); + enableUserInput(); + } + }, 600); +} + +function flashButton(color) { + const button = document.getElementById(color); + button.classList.add("active"); + setTimeout(() => { + button.classList.remove("active"); + }, 300); +} + +function enableUserInput() { + colors.forEach((color) => { + document.getElementById(color).addEventListener("click", handleUserClick); + }); +} + +function disableUserInput() { + colors.forEach((color) => { + document + .getElementById(color) + .removeEventListener("click", handleUserClick); + }); +} + +function handleUserClick(event) { + const clickedColor = event.target.id; + userPattern.push(clickedColor); + flashButton(clickedColor); + clickCount++; + document.getElementById("click-count").textContent = clickCount; + + // Update the current sequence display and set the text color to the box clicked + const sequenceDisplay = document.getElementById("sequence-display"); + sequenceDisplay.innerHTML = ""; // Clear the previous content + + // Iterate through the userPattern and display each color with its own color + userPattern.forEach((color) => { + const span = document.createElement("span"); + span.style.color = color; // Set the color of the span to match the button color + span.textContent = color.toUpperCase() + " "; // Convert the color name to uppercase + sequenceDisplay.appendChild(span); // Append the span to the display + }); + + checkAnswer(userPattern.length - 1); +} + +function checkAnswer(currentLevel) { + if (userPattern[currentLevel] === gamePattern[currentLevel]) { + if (userPattern.length === gamePattern.length) { + disableUserInput(); + setTimeout(() => { + // Show the congrats message when the level is passed + showCongratsMessage(); + setTimeout(() => { + hideCongratsMessage(); + setTimeout(() => {}, 1000); // Delay before starting the next level + nextSequence(); + }, 2000); // Hide congrats message after 2 seconds + }, 1000); + } + } else { + document.getElementById("status").textContent = `Game Over!`; + + setTimeout(() => { + flashButton(missedColor); + }, 1000); + setTimeout(() => { + hideMyTexts(); + }, 1000); + + showLoseMessage(); + setTimeout(() => { + hideLoseMessage(); + }, 2000); + + // Disable further input + gameStarted = false; + + // Reset the game state after a brief delay + setTimeout(() => { + level = 0; + gamePattern = []; + document.getElementById("sequence-display").textContent = "-"; + document.getElementById("click-count").textContent = 0; + }, 1500); + } +} + +function showCongratsMessage() { + const message = `Congrats! You passed level ${level}!`; + const congratsMessageElement = document.getElementById("level-message"); + congratsMessageElement.textContent = message; + congratsMessageElement.style.display = "block"; // Ensure it's displayed + setTimeout(() => { + congratsMessageElement.classList.add("show"); // Show the message with animation + }, 50); // Small delay to trigger the animation +} + +function hideCongratsMessage() { + const congratsMessageElement = document.getElementById("level-message"); + congratsMessageElement.classList.remove("show"); // Remove animation class + setTimeout(() => { + congratsMessageElement.style.display = "none"; // Hide the message after animation + }, 1000); // Delay hiding it after the fade-out effect +} + +function showLoseMessage() { + const message = `Game Over! Correct color was ${ + gamePattern[userPattern.length - 1] + }.`; + const loseMessageElement = document.getElementById("level-message"); + loseMessageElement.textContent = message; + // set color to red + loseMessageElement.style.color = "red"; + loseMessageElement.style.display = "block"; // Ensure it's displayed + setTimeout(() => { + loseMessageElement.classList.add("show"); // Show the message with animation + }, 50); // Small delay to trigger the animation +} + +function hideLoseMessage() { + const loseMessageElement = document.getElementById("level-message"); + loseMessageElement.classList.remove("show"); // Remove animation class + setTimeout(() => { + loseMessageElement.style.display = "none"; // Hide the message after animation + }, 1000); // Delay hiding it after the fade-out effect +} + +function showMyTexts() { + const texts = document.getElementsByClassName("my-text"); + + for (let i = 0; i < texts.length; i++) { + texts[i].style.display = "block"; + texts[i].classList.add("show"); + } +} + +function hideMyTexts() { + const texts = document.getElementsByClassName("my-text"); + + for (let i = 0; i < texts.length; i++) { + texts[i].classList.remove("show"); + texts[i].style.display = "none"; + } +} diff --git a/30-Simon-Says-Game/style.css b/30-Simon-Says-Game/style.css new file mode 100644 index 0000000..cce15f0 --- /dev/null +++ b/30-Simon-Says-Game/style.css @@ -0,0 +1,110 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f9; + text-align: center; + padding: 50px; +} + +h1 { + font-size: 3rem; + margin-bottom: 30px; + color: #333; +} + +#game-container { + display: flex; + justify-content: center; + margin-bottom: 30px; +} + +.color-btn { + width: 100px; + height: 100px; + border-radius: 10px; + margin: 10px; + cursor: pointer; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + transition: transform 0.2s; +} + +#green { + background-color: green; +} + +#red { + background-color: red; +} + +#yellow { + background-color: yellow; +} + +#blue { + background-color: blue; +} + +.color-btn.active { + transform: scale(1.1); +} + +#game-status { + margin-top: 20px; + font-size: 1.2rem; + color: #333; +} + +#start-btn { + margin-top: 20px; + padding: 10px 20px; + font-size: 1.2rem; + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#start-btn:hover { + background-color: #45a049; +} + +#status { + font-weight: bold; +} + +#level-message { + font-size: 24px; + font-weight: bold; + color: green; + text-align: center; + margin-top: 20px; + opacity: 0; /* Initially hidden */ + transition: opacity 0.5s ease-in-out; + display: none; /* Make sure it's hidden initially */ +} + +#level-message.show { + opacity: 1; /* Fade in the message */ + display: block; /* Make it visible */ +} + +.my-text { + font-size: 1.5rem; + margin-top: 20px; + color: #333; + opacity: 0; + transition: opacity 0.5s ease-in-out; + display: none; +} +.my-text.show { + opacity: 1; + display: block; + transition: opacity 0.5s ease-in-out; +} diff --git a/README.md b/README.md index cd7759c..d0f3aae 100644 --- a/README.md +++ b/README.md @@ -2,37 +2,38 @@ This repository contains a collection of HTML, CSS, and JavaScript games. 🎯🕹 -| # | Game | Live Demo | -| :-: | ---------------------------------------------- | --------- | -| 01 | [Candy Crush Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/01-Candy-Crush-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/01-Candy-Crush-Game/) | -| 02 | [Archery Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/02-Archery-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/02-Archery-Game/) | -| 03 | [Speed Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/03-Speed-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/03-Speed-Typing-Game/) | -| 04 | [Breakout Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/04-Breakout-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/04-Breakout-Game/) | -| 05 | [Minesweeper Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/05-Minesweeper-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/05-Minesweeper-Game/) | -| 06 | [Tower Blocks Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/06-Tower-Blocks) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/06-Tower-Blocks/) | -| 07 | [Ping Pong Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/07-Ping-Pong-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/07-Ping-Pong-Game/) | -| 08 | [Tetris Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/08-Tetris-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/08-Tetris-Game/) | -| 09 | [Tilting Maze Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/09-Tilting-Maze-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/09-Tilting-Maze-Game/) | -| 10 | [Memory Card Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/10-Memory-Card-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/10-Memory-Card-Game/) | -| 11 | [Rock Paper Scissors Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/11-Rock-Paper-Scissors) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/11-Rock-Paper-Scissors/) | -| 12 | [Type Number Guessing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/12-Type-Number-Guessing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/12-Type-Number-Guessing-Game/) | -| 13 | [Tic Tac Toe Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/13-Tic-Tac-Toe) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/13-Tic-Tac-Toe/) | -| 14 | [Snake Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/14-Snake-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/14-Snake-Game/) | -| 15 | [Connect Four Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/15-Connect-Four-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/15-Connect-Four-Game/) | -| 16 | [Insect Catch Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/16-Insect-Catch-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/16-Insect-Catch-Game/) | -| 17 | [Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/17-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/17-Typing-Game/) | -| 18 | [Hangman Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/18-Hangman-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/18-Hangman-Game/) | -| 19 | [Flappy Bird Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/19-Flappy-Bird-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/19-Flappy-Bird-Game/) | -| 20 | [Crossy Road Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/20-Crossy-Road-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/20-Crossy-Road-Game/) | -| 21 | [2048 Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/21-2048-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/21-2048-Game/) | -| 22 | [Dice Roll Simulator](https://github.com/he-is-talha/html-css-javascript-games/tree/main/22-Dice-Roll-Simulator) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/22-Dice-Roll-Simulator/) | -| 23 | [Shape Clicker Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/23-Shape-Clicker-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/23-Shape-Clicker-Game/) | -| 24 | [Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/24-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/24-Typing-Game/) | -| 25 | [Speak Number Guessing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/25-Speak-Number-Guessing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/25-Speak-Number-Guessing-Game/) | -| 26 | [Fruit Slicer Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/26-Fruit-Slicer-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/26-Fruit-Slicer-Game/) | -| 27 | [Quiz Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/27-Quiz-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/27-Quiz-Game/) | -| 28 | [Emoji Catcher Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/28-Emoji-Catcher-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/28-Emoji-Catcher-Game/) | -| 29 | [Whack A Mole Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/29-Whack-A-Mole-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/29-Whack-A-Mole-Game/) | +| # | Game | Live Demo | +| :-: | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | +| 01 | [Candy Crush Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/01-Candy-Crush-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/01-Candy-Crush-Game/) | +| 02 | [Archery Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/02-Archery-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/02-Archery-Game/) | +| 03 | [Speed Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/03-Speed-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/03-Speed-Typing-Game/) | +| 04 | [Breakout Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/04-Breakout-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/04-Breakout-Game/) | +| 05 | [Minesweeper Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/05-Minesweeper-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/05-Minesweeper-Game/) | +| 06 | [Tower Blocks Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/06-Tower-Blocks) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/06-Tower-Blocks/) | +| 07 | [Ping Pong Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/07-Ping-Pong-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/07-Ping-Pong-Game/) | +| 08 | [Tetris Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/08-Tetris-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/08-Tetris-Game/) | +| 09 | [Tilting Maze Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/09-Tilting-Maze-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/09-Tilting-Maze-Game/) | +| 10 | [Memory Card Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/10-Memory-Card-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/10-Memory-Card-Game/) | +| 11 | [Rock Paper Scissors Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/11-Rock-Paper-Scissors) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/11-Rock-Paper-Scissors/) | +| 12 | [Type Number Guessing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/12-Type-Number-Guessing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/12-Type-Number-Guessing-Game/) | +| 13 | [Tic Tac Toe Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/13-Tic-Tac-Toe) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/13-Tic-Tac-Toe/) | +| 14 | [Snake Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/14-Snake-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/14-Snake-Game/) | +| 15 | [Connect Four Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/15-Connect-Four-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/15-Connect-Four-Game/) | +| 16 | [Insect Catch Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/16-Insect-Catch-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/16-Insect-Catch-Game/) | +| 17 | [Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/17-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/17-Typing-Game/) | +| 18 | [Hangman Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/18-Hangman-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/18-Hangman-Game/) | +| 19 | [Flappy Bird Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/19-Flappy-Bird-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/19-Flappy-Bird-Game/) | +| 20 | [Crossy Road Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/20-Crossy-Road-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/20-Crossy-Road-Game/) | +| 21 | [2048 Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/21-2048-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/21-2048-Game/) | +| 22 | [Dice Roll Simulator](https://github.com/he-is-talha/html-css-javascript-games/tree/main/22-Dice-Roll-Simulator) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/22-Dice-Roll-Simulator/) | +| 23 | [Shape Clicker Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/23-Shape-Clicker-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/23-Shape-Clicker-Game/) | +| 24 | [Typing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/24-Typing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/24-Typing-Game/) | +| 25 | [Speak Number Guessing Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/25-Speak-Number-Guessing-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/25-Speak-Number-Guessing-Game/) | +| 26 | [Fruit Slicer Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/26-Fruit-Slicer-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/26-Fruit-Slicer-Game/) | +| 27 | [Quiz Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/27-Quiz-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/27-Quiz-Game/) | +| 28 | [Emoji Catcher Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/28-Emoji-Catcher-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/28-Emoji-Catcher-Game/) | +| 29 | [Whack A Mole Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/29-Whack-A-Mole-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/29-Whack-A-Mole-Game/) | +| 30 | [Simon Says Game](https://github.com/he-is-talha/html-css-javascript-games/tree/main/30-Simon-Says-Game) | [Live Demo](https://he-is-talha.github.io/html-css-javascript-games/30-Simon-Says-Game/) | ## Games Description @@ -65,6 +66,7 @@ This repository contains a collection of HTML, CSS, and JavaScript games. 🎯 27. **Quiz Game**: Test your knowledge on various topics by answering trivia questions and aiming for a high score in this quiz game. 🧠📚 28. **Emoji Catcher Game**: Catch falling emojis with a basket or container while avoiding bombs and other obstacles in this emoji-catching game. 🎯😄 29. **Whack-a-Mole Game**: Test your reaction speed by hitting randomly appearing moles with a mallet before they disappear in this classic arcade game. 🕹️ +30. **Simon Says Game**: Follow the color sequence and repeat it correctly to advance through levels. Test your memory and speed in this classic memory game! 🎮💡 ## License From 7f7a10c6531e5f338827b229968c88ab266c2566 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sat, 8 Mar 2025 23:49:43 +0500 Subject: [PATCH 2/7] Update index.html with Mode Selection --- 01-Candy-Crush-Game/index.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/01-Candy-Crush-Game/index.html b/01-Candy-Crush-Game/index.html index 20454e5..0959a24 100644 --- a/01-Candy-Crush-Game/index.html +++ b/01-Candy-Crush-Game/index.html @@ -19,10 +19,20 @@ + +

Choose Game Mode

+ + +

score

0

- \ No newline at end of file + From 7fe6a9bd92c95922e1e865e237bfe00e6357e8f3 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sat, 8 Mar 2025 23:50:22 +0500 Subject: [PATCH 3/7] Update style.css with mode selection --- 01-Candy-Crush-Game/style.css | 174 +++++++++++++++++++++++----------- 1 file changed, 120 insertions(+), 54 deletions(-) diff --git a/01-Candy-Crush-Game/style.css b/01-Candy-Crush-Game/style.css index 1b371c4..73ca005 100644 --- a/01-Candy-Crush-Game/style.css +++ b/01-Candy-Crush-Game/style.css @@ -1,55 +1,121 @@ +/* General Styling */ +body { + background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + font-family: 'Montserrat', sans-serif; + color: #85796b; +} + .grid { - display: flex; - flex-wrap: wrap; - height: 560px; - min-width: 560px; - margin-left: 80px; - margin-top: 50px; - background-color: rgba(109, 127, 151, 0.5); - padding: 5px; - color: #85796b; - border-radius: 10px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; - } - - .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('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); - max-width: 100vh; - display: flex; - } - - .scoreBoard { - background-color: cyan; - border-radius: 20px; - margin-top: 200px; - margin-left: 200px; - width: auto; - height: 120px; - padding: 20px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - text-align: center; - color: #85796b; - } \ No newline at end of file + display: flex; + flex-wrap: wrap; + height: 560px; + width: 560px; + 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; + margin-left: 80px; + margin-top: 50px; +} + +.grid div { + height: 70px; + width: 70px; + background-size: cover; + background-position: center; + border-radius: 5px; + transition: transform 0.2s ease; /* Smooth animation for interactions */ +} + +/* Hover effect for interactivity */ +.grid div:hover { + transform: scale(1.05); /* Slightly enlarge on hover */ +} + +/* Scoreboard Styling */ +.scoreBoard { + background-color: cyan; + border-radius: 20px; + margin-top: 200px; + margin-left: 200px; + width: auto; + height: 120px; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + color: #85796b; +} + +h3, h1 { + font-family: 'Montserrat', sans-serif; + text-transform: uppercase; + margin: 0; +} + +h1 { + margin-top: -10px; +} + +.grid div:hover { + transform: scale(1.05); /* Slightly enlarge on hover */ +} + +/* Mode Selection Styling */ +#modeSelection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #f0f0f0; + font-family: 'Montserrat', sans-serif; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 10; +} + +#modeSelection h2 { + margin-bottom: 20px; + color: #333; +} + +#modeSelection button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #87ceeb; + border: none; + border-radius: 5px; + color: white; +} + +/* Timer and Change Mode Button */ +#timer { + font-size: 18px; + margin-top: 10px; +} + +#changeMode { + margin-top: 10px; + padding: 5px 10px; + background-color: #ff6347; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +/* Initially Hide Game Elements */ +.grid, .scoreBoard { + display: none; +} From 5a715bbf5ac2dbc9fa146eead1050b2da282c4fc Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sat, 8 Mar 2025 23:50:58 +0500 Subject: [PATCH 4/7] Update script.js with mdoe selection --- 01-Candy-Crush-Game/script.js | 284 +++++++++++++++------------------- 1 file changed, 128 insertions(+), 156 deletions(-) diff --git a/01-Candy-Crush-Game/script.js b/01-Candy-Crush-Game/script.js index 1267c5e..b9f0417 100644 --- a/01-Candy-Crush-Game/script.js +++ b/01-Candy-Crush-Game/script.js @@ -3,11 +3,23 @@ document.addEventListener("DOMContentLoaded", () => { }); function candyCrushGame() { + // DOM Elements const grid = document.querySelector(".grid"); const scoreDisplay = document.getElementById("score"); + const timerDisplay = document.getElementById("timer"); + const modeSelection = document.getElementById("modeSelection"); + const endlessButton = document.getElementById("endlessMode"); + const timedButton = document.getElementById("timedMode"); + const changeModeButton = document.getElementById("changeMode"); + + // Game State Variables const width = 8; const squares = []; let score = 0; + let currentMode = null; + let timeLeft = 0; + let gameInterval = null; + let timerInterval = null; const candyColors = [ "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/red-candy.png)", @@ -18,8 +30,10 @@ function candyCrushGame() { "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)", ]; - // Creating Game Board + // Create the Game Board function createBoard() { + grid.innerHTML = ""; // Clear existing grid + squares.length = 0; // Clear squares array for (let i = 0; i < width * width; i++) { const square = document.createElement("div"); square.setAttribute("draggable", true); @@ -29,32 +43,21 @@ function candyCrushGame() { grid.appendChild(square); squares.push(square); } + // Add drag event listeners + 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("dragleave", dragLeave)); + squares.forEach(square => square.addEventListener("drop", dragDrop)); } - 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)); + // Drag and Drop Functions + let colorBeingDragged, colorBeingReplaced, squareIdBeingDragged, squareIdBeingReplaced; function dragStart() { colorBeingDragged = this.style.backgroundImage; squareIdBeingDragged = parseInt(this.id); - // this.style.backgroundImage = '' } function dragOver(e) { @@ -66,20 +69,18 @@ function candyCrushGame() { } function dragLeave() { - this.style.backgroundImage = ""; + // No action needed } function dragDrop() { colorBeingReplaced = this.style.backgroundImage; squareIdBeingReplaced = parseInt(this.id); this.style.backgroundImage = colorBeingDragged; - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingReplaced; + squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced; } function dragEnd() { - //Defining, What is a valid move? + // Define valid moves (adjacent squares: left, up, right, down) let validMoves = [ squareIdBeingDragged - 1, squareIdBeingDragged - width, @@ -89,186 +90,157 @@ function candyCrushGame() { let validMove = validMoves.includes(squareIdBeingReplaced); if (squareIdBeingReplaced && validMove) { - squareIdBeingReplaced = null; + squareIdBeingReplaced = null; // Move is valid, keep the swap } else if (squareIdBeingReplaced && !validMove) { - squares[ - squareIdBeingReplaced - ].style.backgroundImage = colorBeingReplaced; - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingDragged; - } else - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingDragged; + // Invalid move, revert the swap + squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced; + squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; + } else { + // No drop occurred, revert to original + squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; + } } - //Dropping candies once some have been cleared + // Move Candies Down function moveIntoSquareBelow() { - for (i = 0; i < 55; i++) { + // Fill empty squares in the first row + for (let i = 0; i < width; i++) { + if (squares[i].style.backgroundImage === "") { + let randomColor = Math.floor(Math.random() * candyColors.length); + squares[i].style.backgroundImage = candyColors[randomColor]; + } + } + // Move candies down to fill gaps + for (let i = 0; i < width * (width - 1); i++) { if (squares[i + width].style.backgroundImage === "") { - squares[i + width].style.backgroundImage = - squares[i].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 + // Check for Matches function checkRowForFour() { - for (i = 0; i < 60; i++) { + for (let i = 0; i < 60; i++) { + if (i % width >= width - 3) continue; // Skip if not enough columns left 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 - ) - ) { + if (rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 4; scoreDisplay.innerHTML = score; - rowOfFour.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + 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]; + for (let i = 0; i < 40; i++) { + let columnOfFour = [i, i + width, i + 2 * width, i + 3 * width]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; - - if ( - columnOfFour.every( - (index) => - squares[index].style.backgroundImage === decidedColor && - !isBlank - ) - ) { + if (columnOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 4; scoreDisplay.innerHTML = score; - columnOfFour.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + columnOfFour.forEach(index => squares[index].style.backgroundImage = ""); } } } - checkColumnForFour(); - //For Row of Three function checkRowForThree() { - for (i = 0; i < 61; i++) { + for (let i = 0; i < 62; i++) { + if (i % width >= width - 2) continue; // Skip if not enough columns left 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 - ) - ) { + if (rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 3; scoreDisplay.innerHTML = score; - rowOfThree.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + 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]; + for (let i = 0; i < 48; i++) { + let columnOfThree = [i, i + width, i + 2 * width]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; - - if ( - columnOfThree.every( - (index) => - squares[index].style.backgroundImage === decidedColor && - !isBlank - ) - ) { + if (columnOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 3; scoreDisplay.innerHTML = score; - columnOfThree.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + columnOfThree.forEach(index => squares[index].style.backgroundImage = ""); } } } - checkColumnForThree(); - - window.setInterval(function () { + // Game Loop + function gameLoop() { checkRowForFour(); checkColumnForFour(); checkRowForThree(); checkColumnForThree(); moveIntoSquareBelow(); - }, 100); -} \ No newline at end of file + } + + // Start the Game + function startGame(mode) { + currentMode = mode; + modeSelection.style.display = "none"; + grid.style.display = "flex"; + scoreDisplay.parentElement.style.display = "flex"; // Show scoreboard + createBoard(); + score = 0; + scoreDisplay.innerHTML = score; + gameInterval = setInterval(gameLoop, 100); + + if (mode === "timed") { + timeLeft = 120; // 2 minutes in seconds + updateTimerDisplay(); + timerInterval = setInterval(() => { + timeLeft--; + updateTimerDisplay(); + if (timeLeft <= 0) { + clearInterval(timerInterval); + endGame(); + } + }, 1000); + } else { + timerDisplay.innerHTML = ""; // Clear timer in Endless Mode + } + } + + // Update Timer Display + function updateTimerDisplay() { + if (currentMode === "timed") { + let minutes = Math.floor(timeLeft / 60); + let seconds = timeLeft % 60; + timerDisplay.innerHTML = `Time Left: ${minutes}:${seconds.toString().padStart(2, "0")}`; + } else { + timerDisplay.innerHTML = ""; + } + } + + // End Game (Timed Mode) + function endGame() { + clearInterval(gameInterval); + squares.forEach(square => square.setAttribute("draggable", false)); + alert(`Time's Up! Your score is ${score}`); + } + + // Change Mode + function changeMode() { + clearInterval(gameInterval); + if (currentMode === "timed") { + clearInterval(timerInterval); + } + grid.style.display = "none"; + scoreDisplay.parentElement.style.display = "none"; + modeSelection.style.display = "flex"; // Show mode selection screen + } + + // Event Listeners + endlessButton.addEventListener("click", () => startGame("endless")); + timedButton.addEventListener("click", () => startGame("timed")); + changeModeButton.addEventListener("click", changeMode); +} From b45c0c321778a3ee23f06a9776ce46f868862bf3 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sat, 8 Mar 2025 23:54:30 +0500 Subject: [PATCH 5/7] Update style.css with new design From 0c0417154cb88f8241966933dfb60b7490bb46b5 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sun, 9 Mar 2025 00:07:11 +0500 Subject: [PATCH 6/7] Old Candy Crush Push --- 01-Candy-Crush-Game/index.html | 14 +- 01-Candy-Crush-Game/script.js | 284 ++++++++++++++++++--------------- 01-Candy-Crush-Game/style.css | 114 +++---------- 3 files changed, 182 insertions(+), 230 deletions(-) diff --git a/01-Candy-Crush-Game/index.html b/01-Candy-Crush-Game/index.html index 0959a24..20454e5 100644 --- a/01-Candy-Crush-Game/index.html +++ b/01-Candy-Crush-Game/index.html @@ -19,20 +19,10 @@ - -

Choose Game Mode

- - -

score

0

- +

- + \ No newline at end of file diff --git a/01-Candy-Crush-Game/script.js b/01-Candy-Crush-Game/script.js index b9f0417..1267c5e 100644 --- a/01-Candy-Crush-Game/script.js +++ b/01-Candy-Crush-Game/script.js @@ -3,23 +3,11 @@ document.addEventListener("DOMContentLoaded", () => { }); function candyCrushGame() { - // DOM Elements const grid = document.querySelector(".grid"); const scoreDisplay = document.getElementById("score"); - const timerDisplay = document.getElementById("timer"); - const modeSelection = document.getElementById("modeSelection"); - const endlessButton = document.getElementById("endlessMode"); - const timedButton = document.getElementById("timedMode"); - const changeModeButton = document.getElementById("changeMode"); - - // Game State Variables const width = 8; const squares = []; let score = 0; - let currentMode = null; - let timeLeft = 0; - let gameInterval = null; - let timerInterval = null; const candyColors = [ "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/red-candy.png)", @@ -30,10 +18,8 @@ function candyCrushGame() { "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)", ]; - // Create the Game Board + // Creating Game Board function createBoard() { - grid.innerHTML = ""; // Clear existing grid - squares.length = 0; // Clear squares array for (let i = 0; i < width * width; i++) { const square = document.createElement("div"); square.setAttribute("draggable", true); @@ -43,21 +29,32 @@ function candyCrushGame() { grid.appendChild(square); squares.push(square); } - // Add drag event listeners - 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("dragleave", dragLeave)); - squares.forEach(square => square.addEventListener("drop", dragDrop)); } + createBoard(); + + // Dragging the Candy + let colorBeingDragged; + let colorBeingReplaced; + let squareIdBeingDragged; + let squareIdBeingReplaced; - // Drag and Drop Functions - let colorBeingDragged, colorBeingReplaced, squareIdBeingDragged, 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) { @@ -69,18 +66,20 @@ function candyCrushGame() { } function dragLeave() { - // No action needed + this.style.backgroundImage = ""; } function dragDrop() { colorBeingReplaced = this.style.backgroundImage; squareIdBeingReplaced = parseInt(this.id); this.style.backgroundImage = colorBeingDragged; - squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced; + squares[ + squareIdBeingDragged + ].style.backgroundImage = colorBeingReplaced; } function dragEnd() { - // Define valid moves (adjacent squares: left, up, right, down) + //Defining, What is a valid move? let validMoves = [ squareIdBeingDragged - 1, squareIdBeingDragged - width, @@ -90,157 +89,186 @@ function candyCrushGame() { let validMove = validMoves.includes(squareIdBeingReplaced); if (squareIdBeingReplaced && validMove) { - squareIdBeingReplaced = null; // Move is valid, keep the swap + squareIdBeingReplaced = null; } else if (squareIdBeingReplaced && !validMove) { - // Invalid move, revert the swap - squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced; - squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; - } else { - // No drop occurred, revert to original - squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; - } + squares[ + squareIdBeingReplaced + ].style.backgroundImage = colorBeingReplaced; + squares[ + squareIdBeingDragged + ].style.backgroundImage = colorBeingDragged; + } else + squares[ + squareIdBeingDragged + ].style.backgroundImage = colorBeingDragged; } - // Move Candies Down + //Dropping candies once some have been cleared function moveIntoSquareBelow() { - // Fill empty squares in the first row - for (let i = 0; i < width; i++) { - if (squares[i].style.backgroundImage === "") { - let randomColor = Math.floor(Math.random() * candyColors.length); - squares[i].style.backgroundImage = candyColors[randomColor]; - } - } - // Move candies down to fill gaps - for (let i = 0; i < width * (width - 1); i++) { + for (i = 0; i < 55; i++) { if (squares[i + width].style.backgroundImage === "") { - squares[i + width].style.backgroundImage = squares[i].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]; + } } } } - // Check for Matches + ///-> Checking for Matches <-/// + + //For Row of Four function checkRowForFour() { - for (let i = 0; i < 60; i++) { - if (i % width >= width - 3) continue; // Skip if not enough columns left + 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 === ""; - if (rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { + + 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 = ""); + rowOfFour.forEach((index) => { + squares[index].style.backgroundImage = ""; + }); } } } + checkRowForFour(); + //For Column of Four function checkColumnForFour() { - for (let i = 0; i < 40; i++) { - let columnOfFour = [i, i + width, i + 2 * width, i + 3 * width]; + 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)) { + + if ( + columnOfFour.every( + (index) => + squares[index].style.backgroundImage === decidedColor && + !isBlank + ) + ) { score += 4; scoreDisplay.innerHTML = score; - columnOfFour.forEach(index => squares[index].style.backgroundImage = ""); + columnOfFour.forEach((index) => { + squares[index].style.backgroundImage = ""; + }); } } } + checkColumnForFour(); + //For Row of Three function checkRowForThree() { - for (let i = 0; i < 62; i++) { - if (i % width >= width - 2) continue; // Skip if not enough columns left + 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 === ""; - if (rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { + + 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 = ""); + rowOfThree.forEach((index) => { + squares[index].style.backgroundImage = ""; + }); } } } + checkRowForThree(); + //For Column of Three function checkColumnForThree() { - for (let i = 0; i < 48; i++) { - let columnOfThree = [i, i + width, i + 2 * width]; + 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)) { + + if ( + columnOfThree.every( + (index) => + squares[index].style.backgroundImage === decidedColor && + !isBlank + ) + ) { score += 3; scoreDisplay.innerHTML = score; - columnOfThree.forEach(index => squares[index].style.backgroundImage = ""); + columnOfThree.forEach((index) => { + squares[index].style.backgroundImage = ""; + }); } } } + checkColumnForThree(); + - // Game Loop - function gameLoop() { + window.setInterval(function () { checkRowForFour(); checkColumnForFour(); checkRowForThree(); checkColumnForThree(); moveIntoSquareBelow(); - } - - // Start the Game - function startGame(mode) { - currentMode = mode; - modeSelection.style.display = "none"; - grid.style.display = "flex"; - scoreDisplay.parentElement.style.display = "flex"; // Show scoreboard - createBoard(); - score = 0; - scoreDisplay.innerHTML = score; - gameInterval = setInterval(gameLoop, 100); - - if (mode === "timed") { - timeLeft = 120; // 2 minutes in seconds - updateTimerDisplay(); - timerInterval = setInterval(() => { - timeLeft--; - updateTimerDisplay(); - if (timeLeft <= 0) { - clearInterval(timerInterval); - endGame(); - } - }, 1000); - } else { - timerDisplay.innerHTML = ""; // Clear timer in Endless Mode - } - } - - // Update Timer Display - function updateTimerDisplay() { - if (currentMode === "timed") { - let minutes = Math.floor(timeLeft / 60); - let seconds = timeLeft % 60; - timerDisplay.innerHTML = `Time Left: ${minutes}:${seconds.toString().padStart(2, "0")}`; - } else { - timerDisplay.innerHTML = ""; - } - } - - // End Game (Timed Mode) - function endGame() { - clearInterval(gameInterval); - squares.forEach(square => square.setAttribute("draggable", false)); - alert(`Time's Up! Your score is ${score}`); - } - - // Change Mode - function changeMode() { - clearInterval(gameInterval); - if (currentMode === "timed") { - clearInterval(timerInterval); - } - grid.style.display = "none"; - scoreDisplay.parentElement.style.display = "none"; - modeSelection.style.display = "flex"; // Show mode selection screen - } - - // Event Listeners - endlessButton.addEventListener("click", () => startGame("endless")); - timedButton.addEventListener("click", () => startGame("timed")); - changeModeButton.addEventListener("click", changeMode); -} + }, 100); +} \ No newline at end of file diff --git a/01-Candy-Crush-Game/style.css b/01-Candy-Crush-Game/style.css index 73ca005..1b95c98 100644 --- a/01-Candy-Crush-Game/style.css +++ b/01-Candy-Crush-Game/style.css @@ -1,42 +1,43 @@ -/* General Styling */ -body { - background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - font-family: 'Montserrat', sans-serif; - color: #85796b; -} - .grid { display: flex; flex-wrap: wrap; height: 560px; - width: 560px; + min-width: 560px; + margin-left: 80px; + margin-top: 50px; background-color: rgba(109, 127, 151, 0.5); padding: 5px; + color: #85796b; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; - margin-left: 80px; - margin-top: 50px; } .grid div { height: 70px; width: 70px; - background-size: cover; - background-position: center; - border-radius: 5px; - transition: transform 0.2s ease; /* Smooth animation for interactions */ } -/* Hover effect for interactivity */ -.grid div:hover { - transform: scale(1.05); /* Slightly enlarge on hover */ +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('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); + max-width: 100vh; + display: flex; } -/* Scoreboard Styling */ .scoreBoard { background-color: cyan; border-radius: 20px; @@ -51,71 +52,4 @@ body { align-items: center; text-align: center; color: #85796b; -} - -h3, h1 { - font-family: 'Montserrat', sans-serif; - text-transform: uppercase; - margin: 0; -} - -h1 { - margin-top: -10px; -} - -.grid div:hover { - transform: scale(1.05); /* Slightly enlarge on hover */ -} - -/* Mode Selection Styling */ -#modeSelection { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - background-color: #f0f0f0; - font-family: 'Montserrat', sans-serif; - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: 10; -} - -#modeSelection h2 { - margin-bottom: 20px; - color: #333; -} - -#modeSelection button { - margin: 10px; - padding: 10px 20px; - font-size: 16px; - cursor: pointer; - background-color: #87ceeb; - border: none; - border-radius: 5px; - color: white; -} - -/* Timer and Change Mode Button */ -#timer { - font-size: 18px; - margin-top: 10px; -} - -#changeMode { - margin-top: 10px; - padding: 5px 10px; - background-color: #ff6347; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; -} - -/* Initially Hide Game Elements */ -.grid, .scoreBoard { - display: none; -} +} \ No newline at end of file From ccd80743c0ec32d380ade1c2102cfdee9743a134 Mon Sep 17 00:00:00 2001 From: Talha Bin Yousaf <136476133+he-is-talha@users.noreply.github.com> Date: Sun, 9 Mar 2025 00:09:23 +0500 Subject: [PATCH 7/7] Updated Candy Crush --- 01-Candy-Crush-Game/index.html | 12 +- 01-Candy-Crush-Game/script.js | 282 +++++++++++++++------------------ 01-Candy-Crush-Game/style.css | 112 ++++++++++--- 3 files changed, 227 insertions(+), 179 deletions(-) diff --git a/01-Candy-Crush-Game/index.html b/01-Candy-Crush-Game/index.html index 20454e5..f9eea7a 100644 --- a/01-Candy-Crush-Game/index.html +++ b/01-Candy-Crush-Game/index.html @@ -19,10 +19,20 @@ + +

Choose Game Mode

+ + +

score

0

\ No newline at end of file diff --git a/01-Candy-Crush-Game/script.js b/01-Candy-Crush-Game/script.js index 1267c5e..b0efd72 100644 --- a/01-Candy-Crush-Game/script.js +++ b/01-Candy-Crush-Game/script.js @@ -3,11 +3,23 @@ document.addEventListener("DOMContentLoaded", () => { }); function candyCrushGame() { + // DOM Elements const grid = document.querySelector(".grid"); const scoreDisplay = document.getElementById("score"); + const timerDisplay = document.getElementById("timer"); + const modeSelection = document.getElementById("modeSelection"); + const endlessButton = document.getElementById("endlessMode"); + const timedButton = document.getElementById("timedMode"); + const changeModeButton = document.getElementById("changeMode"); + + // Game State Variables const width = 8; const squares = []; let score = 0; + let currentMode = null; + let timeLeft = 0; + let gameInterval = null; + let timerInterval = null; const candyColors = [ "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/red-candy.png)", @@ -18,8 +30,10 @@ function candyCrushGame() { "url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)", ]; - // Creating Game Board + // Create the Game Board function createBoard() { + grid.innerHTML = ""; // Clear existing grid + squares.length = 0; // Clear squares array for (let i = 0; i < width * width; i++) { const square = document.createElement("div"); square.setAttribute("draggable", true); @@ -29,32 +43,21 @@ function candyCrushGame() { grid.appendChild(square); squares.push(square); } + // Add drag event listeners + 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("dragleave", dragLeave)); + squares.forEach(square => square.addEventListener("drop", dragDrop)); } - 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)); + // Drag and Drop Functions + let colorBeingDragged, colorBeingReplaced, squareIdBeingDragged, squareIdBeingReplaced; function dragStart() { colorBeingDragged = this.style.backgroundImage; squareIdBeingDragged = parseInt(this.id); - // this.style.backgroundImage = '' } function dragOver(e) { @@ -66,20 +69,18 @@ function candyCrushGame() { } function dragLeave() { - this.style.backgroundImage = ""; + // No action needed } function dragDrop() { colorBeingReplaced = this.style.backgroundImage; squareIdBeingReplaced = parseInt(this.id); this.style.backgroundImage = colorBeingDragged; - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingReplaced; + squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced; } function dragEnd() { - //Defining, What is a valid move? + // Define valid moves (adjacent squares: left, up, right, down) let validMoves = [ squareIdBeingDragged - 1, squareIdBeingDragged - width, @@ -89,186 +90,157 @@ function candyCrushGame() { let validMove = validMoves.includes(squareIdBeingReplaced); if (squareIdBeingReplaced && validMove) { - squareIdBeingReplaced = null; + squareIdBeingReplaced = null; // Move is valid, keep the swap } else if (squareIdBeingReplaced && !validMove) { - squares[ - squareIdBeingReplaced - ].style.backgroundImage = colorBeingReplaced; - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingDragged; - } else - squares[ - squareIdBeingDragged - ].style.backgroundImage = colorBeingDragged; + // Invalid move, revert the swap + squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced; + squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; + } else { + // No drop occurred, revert to original + squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; + } } - //Dropping candies once some have been cleared + // Move Candies Down function moveIntoSquareBelow() { - for (i = 0; i < 55; i++) { + // Fill empty squares in the first row + for (let i = 0; i < width; i++) { + if (squares[i].style.backgroundImage === "") { + let randomColor = Math.floor(Math.random() * candyColors.length); + squares[i].style.backgroundImage = candyColors[randomColor]; + } + } + // Move candies down to fill gaps + for (let i = 0; i < width * (width - 1); i++) { if (squares[i + width].style.backgroundImage === "") { - squares[i + width].style.backgroundImage = - squares[i].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 + // Check for Matches function checkRowForFour() { - for (i = 0; i < 60; i++) { + for (let i = 0; i < 60; i++) { + if (i % width >= width - 3) continue; // Skip if not enough columns left 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 - ) - ) { + if (rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 4; scoreDisplay.innerHTML = score; - rowOfFour.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + 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]; + for (let i = 0; i < 40; i++) { + let columnOfFour = [i, i + width, i + 2 * width, i + 3 * width]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; - - if ( - columnOfFour.every( - (index) => - squares[index].style.backgroundImage === decidedColor && - !isBlank - ) - ) { + if (columnOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 4; scoreDisplay.innerHTML = score; - columnOfFour.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + columnOfFour.forEach(index => squares[index].style.backgroundImage = ""); } } } - checkColumnForFour(); - //For Row of Three function checkRowForThree() { - for (i = 0; i < 61; i++) { + for (let i = 0; i < 62; i++) { + if (i % width >= width - 2) continue; // Skip if not enough columns left 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 - ) - ) { + if (rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 3; scoreDisplay.innerHTML = score; - rowOfThree.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + 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]; + for (let i = 0; i < 48; i++) { + let columnOfThree = [i, i + width, i + 2 * width]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; - - if ( - columnOfThree.every( - (index) => - squares[index].style.backgroundImage === decidedColor && - !isBlank - ) - ) { + if (columnOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) { score += 3; scoreDisplay.innerHTML = score; - columnOfThree.forEach((index) => { - squares[index].style.backgroundImage = ""; - }); + columnOfThree.forEach(index => squares[index].style.backgroundImage = ""); } } } - checkColumnForThree(); - - window.setInterval(function () { + // Game Loop + function gameLoop() { checkRowForFour(); checkColumnForFour(); checkRowForThree(); checkColumnForThree(); moveIntoSquareBelow(); - }, 100); + } + + // Start the Game + function startGame(mode) { + currentMode = mode; + modeSelection.style.display = "none"; + grid.style.display = "flex"; + scoreDisplay.parentElement.style.display = "flex"; // Show scoreboard + createBoard(); + score = 0; + scoreDisplay.innerHTML = score; + gameInterval = setInterval(gameLoop, 100); + + if (mode === "timed") { + timeLeft = 120; // 2 minutes in seconds + updateTimerDisplay(); + timerInterval = setInterval(() => { + timeLeft--; + updateTimerDisplay(); + if (timeLeft <= 0) { + clearInterval(timerInterval); + endGame(); + } + }, 1000); + } else { + timerDisplay.innerHTML = ""; // Clear timer in Endless Mode + } + } + + // Update Timer Display + function updateTimerDisplay() { + if (currentMode === "timed") { + let minutes = Math.floor(timeLeft / 60); + let seconds = timeLeft % 60; + timerDisplay.innerHTML = `Time Left: ${minutes}:${seconds.toString().padStart(2, "0")}`; + } else { + timerDisplay.innerHTML = ""; + } + } + + // End Game (Timed Mode) + function endGame() { + clearInterval(gameInterval); + squares.forEach(square => square.setAttribute("draggable", false)); + alert(`Time's Up! Your score is ${score}`); + } + + // Change Mode + function changeMode() { + clearInterval(gameInterval); + if (currentMode === "timed") { + clearInterval(timerInterval); + } + grid.style.display = "none"; + scoreDisplay.parentElement.style.display = "none"; + modeSelection.style.display = "flex"; // Show mode selection screen + } + + // Event Listeners + endlessButton.addEventListener("click", () => startGame("endless")); + timedButton.addEventListener("click", () => startGame("timed")); + changeModeButton.addEventListener("click", changeMode); } \ No newline at end of file diff --git a/01-Candy-Crush-Game/style.css b/01-Candy-Crush-Game/style.css index 1b95c98..31f9e51 100644 --- a/01-Candy-Crush-Game/style.css +++ b/01-Candy-Crush-Game/style.css @@ -1,43 +1,42 @@ +/* General Styling */ +body { + background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + font-family: 'Montserrat', sans-serif; + color: #85796b; +} + .grid { display: flex; flex-wrap: wrap; height: 560px; - min-width: 560px; - margin-left: 80px; - margin-top: 50px; + width: 560px; background-color: rgba(109, 127, 151, 0.5); padding: 5px; - color: #85796b; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; + margin-left: 80px; + margin-top: 50px; } .grid div { height: 70px; width: 70px; + background-size: cover; + background-position: center; + border-radius: 5px; + transition: transform 0.2s ease; /* Smooth animation for interactions */ } -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('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png'); - max-width: 100vh; - display: flex; +/* Hover effect for interactivity */ +.grid div:hover { + transform: scale(1.05); /* Slightly enlarge on hover */ } +/* Scoreboard Styling */ .scoreBoard { background-color: cyan; border-radius: 20px; @@ -52,4 +51,71 @@ body { align-items: center; text-align: center; color: #85796b; +} + +h3, h1 { + font-family: 'Montserrat', sans-serif; + text-transform: uppercase; + margin: 0; +} + +h1 { + margin-top: -10px; +} + +.grid div:hover { + transform: scale(1.05); /* Slightly enlarge on hover */ +} + +/* Mode Selection Styling */ +#modeSelection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #f0f0f0; + font-family: 'Montserrat', sans-serif; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 10; +} + +#modeSelection h2 { + margin-bottom: 20px; + color: #333; +} + +#modeSelection button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #87ceeb; + border: none; + border-radius: 5px; + color: white; +} + +/* Timer and Change Mode Button */ +#timer { + font-size: 18px; + margin-top: 10px; +} + +#changeMode { + margin-top: 10px; + padding: 5px 10px; + background-color: #ff6347; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +/* Initially Hide Game Elements */ +.grid, .scoreBoard { + display: none; } \ No newline at end of file