diff --git a/Games/Balloon_Popup/Balloon_Popup.png b/Games/Balloon_Popup/Balloon_Popup.png deleted file mode 100644 index 9b14903ac8..0000000000 Binary files a/Games/Balloon_Popup/Balloon_Popup.png and /dev/null differ diff --git a/Games/Balloon_Popup/app.js b/Games/Balloon_Popup/app.js index df704721bc..c5e9ca1897 100644 --- a/Games/Balloon_Popup/app.js +++ b/Games/Balloon_Popup/app.js @@ -4,7 +4,7 @@ document.addEventListener('mouseover', function(e){ if (e.target.className === "balloon"){ - e.target.style.backgroundColor = "#ededed"; + e.target.style.backgroundColor = "rgb(227, 107, 163)"; e.target.textContent = "POP!"; popped++; removeEvent(e); diff --git a/Games/Balloon_Popup/ballon.png b/Games/Balloon_Popup/ballon.png new file mode 100644 index 0000000000..b4e2332f31 Binary files /dev/null and b/Games/Balloon_Popup/ballon.png differ diff --git a/Games/Balloon_Popup/balloon_pop.png b/Games/Balloon_Popup/balloon_pop.png new file mode 100644 index 0000000000..639967a09b Binary files /dev/null and b/Games/Balloon_Popup/balloon_pop.png differ diff --git a/Games/Balloon_Popup/index.html b/Games/Balloon_Popup/index.html index 9f0ecaf673..254114dbce 100644 --- a/Games/Balloon_Popup/index.html +++ b/Games/Balloon_Popup/index.html @@ -9,8 +9,8 @@
-

Pop the balloons by moving
your mouse over them

-
Wow! All balloons popped!
+

Pop the balloons by moving
your mouse over the them !!

+
!!Wow!!
 All balloons popped!
diff --git a/Games/Balloon_Popup/pop.png b/Games/Balloon_Popup/pop.png new file mode 100644 index 0000000000..fa861d70a4 Binary files /dev/null and b/Games/Balloon_Popup/pop.png differ diff --git a/Games/Balloon_Popup/style.css b/Games/Balloon_Popup/style.css index 63f5583378..f7b2280f62 100644 --- a/Games/Balloon_Popup/style.css +++ b/Games/Balloon_Popup/style.css @@ -1,26 +1,30 @@ body{ font-family:sans-serif; - padding: 30px; - background:#ededed; + padding: 50px; + background:rgb(227, 107, 163); } .wrapper{ - max-width: 690px; - margin: 0 auto; + max-width: 800px; + margin-left: 180px; } .blue { - color:#3f7abe; + color:#b53811; + margin-left: 10px; + font-size: larger; } h1{ margin: auto; - margin-top: 50px; + margin-top: 10px; margin-bottom: 50px; - color: #08a3d9; + margin-left: 120px; text-transform: uppercase; font-size: 30px; - color: #000380; + color: #050648; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight:bolder; } #balloon-gallery div{ @@ -39,23 +43,23 @@ h1{ } #balloon-gallery div:nth-child(3n){ - background: #ffce00; - color: #ffce00; + background: #6c0c65; + color: #6c0c65; } #balloon-gallery div:nth-child(3n-1){ - background:#3f7abe; - color:#3f7abe; + background:#059434; + color:#059434; } #balloon-gallery div:nth-child(5n){ - background:#8e7a8e; - color:#8e7a8e; + background:#3d1ee8; + color: #3d1ee8; } #balloon-gallery div:nth-child(13){ - background:#8e7a8e; - color:#8e7a8e; + background:#3d1ee8; + color: #3d1ee8; } #balloon-gallery div:nth-child(10n){ @@ -64,11 +68,13 @@ h1{ } #balloon-gallery div:nth-child(4n){ + background:#cdb010; + color: #cdb010; clear:right; } #yay-no-balloons { display:none; - color:#ff3300; - font-size:100px; -} \ No newline at end of file + color:#0f0f10; + font-size:80px; +} diff --git a/Games/Language_Learner_Adventure/README.md b/Games/Language_Learner_Adventure/README.md new file mode 100644 index 0000000000..cc5192ce09 --- /dev/null +++ b/Games/Language_Learner_Adventure/README.md @@ -0,0 +1,51 @@ +# ** Language Learner Adventure ** + + +
+ +## **Description 📃** + +The goal of the game is to help players learn new vocabulary by matching words with their correct translations. Players answer multiple-choice questions and receive feedback on their answers. A scoring system tracks their progress. + + +## **functionalities 🎮** + +- The game displays a word in the target language. +- Players choose the correct translation from multiple options. +- Feedback is given for each answer, indicating whether it was correct or incorrect. +- The score increases with each correct answer. +- The game continues until all questions have been answered. +- The final score is displayed at the end. + + +
+ +## **How to play? 🕹️** + +- Initialization: + - Load the first question. + - Initialize the score to 0. + - Display the question and answer options. + +- Answer Selection: + - When a player selects an answer, check if it is correct. + - Update the score if the answer is correct. + - Provide feedback based on the correctness of the answer. + +- Next Question: + - Move to the next question when the player clicks the "Next" button. + - If there are no more questions, display the final score and end the game. + +- End of Game: + - Display a message indicating the game is complete. + - Show the player's final score. + +
+ +## **Screenshots 📸** + +
+ +![image](../../assets/images/Language_Learner_Adventure.png) + +
diff --git a/Games/Language_Learner_Adventure/index.html b/Games/Language_Learner_Adventure/index.html new file mode 100644 index 0000000000..c8f8b4120d --- /dev/null +++ b/Games/Language_Learner_Adventure/index.html @@ -0,0 +1,22 @@ + + + + + + Language Learner Adventure + + + +
+

Language Learner Adventure

+
Score: 0
+
+

Translate the word:

+
+
+ +

+
+ + + diff --git a/Games/Language_Learner_Adventure/script.js b/Games/Language_Learner_Adventure/script.js new file mode 100644 index 0000000000..c5c8e8b285 --- /dev/null +++ b/Games/Language_Learner_Adventure/script.js @@ -0,0 +1,52 @@ +const questions = [ + { word: 'apple', correct: 'manzana', options: ['manzana', 'pera', 'plátano', 'uva'] }, + { word: 'dog', correct: 'perro', options: ['gato', 'caballo', 'perro', 'ratón'] }, + { word: 'house', correct: 'casa', options: ['edificio', 'casa', 'escuela', 'tienda'] }, + { word: 'book', correct: 'libro', options: ['revista', 'periódico', 'libro', 'cuaderno'] }, + { word: 'car', correct: 'coche', options: ['bicicleta', 'coche', 'avión', 'barco'] } +]; + +let currentQuestionIndex = 0; +let score = 0; + +document.getElementById('next-button').addEventListener('click', nextQuestion); + +function loadQuestion() { + const question = questions[currentQuestionIndex]; + document.getElementById('word').innerText = question.word; + const optionsContainer = document.getElementById('options'); + optionsContainer.innerHTML = ''; + question.options.forEach(option => { + const button = document.createElement('button'); + button.className = 'option-button'; + button.innerText = option; + button.addEventListener('click', () => checkAnswer(option)); + optionsContainer.appendChild(button); + }); + document.getElementById('feedback').innerText = ''; +} + +function checkAnswer(selected) { + const question = questions[currentQuestionIndex]; + if (selected === question.correct) { + score++; + document.getElementById('feedback').innerText = 'Correct!'; + } else { + document.getElementById('feedback').innerText = `Incorrect! The correct answer is ${question.correct}.`; + } + document.getElementById('score').innerText = score; +} + +function nextQuestion() { + currentQuestionIndex++; + if (currentQuestionIndex < questions.length) { + loadQuestion(); + } else { + document.getElementById('question-container').innerHTML = '

You have completed the quiz!

'; + document.getElementById('next-button').style.display = 'none'; + document.getElementById('feedback').innerText = `Final Score: ${score}`; + } +} + +// Initialize the first question +loadQuestion(); diff --git a/Games/Language_Learner_Adventure/styles.css b/Games/Language_Learner_Adventure/styles.css new file mode 100644 index 0000000000..642f6ae499 --- /dev/null +++ b/Games/Language_Learner_Adventure/styles.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + color: #333; + text-align: center; + margin: 0; + padding: 20px; +} + +#game-container { + width: 80%; + margin: 0 auto; + padding: 20px; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +#question-container { + margin-bottom: 20px; +} + +.game-button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + background-color: #4CAF50; + color: white; + border-radius: 5px; +} + +#options { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.option-button { + padding: 10px 20px; + margin: 5px; + font-size: 16px; + cursor: pointer; + border: none; + background-color: #f0f0f0; + border-radius: 5px; + transition: background-color 0.3s; +} + +.option-button:hover { + background-color: #e0e0e0; +} + +#feedback { + margin-top: 20px; + font-size: 18px; +} + +#score-container { + font-size: 20px; + margin-bottom: 20px; +} diff --git a/Games/Sky_Jumper/README.md b/Games/Sky_Jumper/README.md new file mode 100644 index 0000000000..bf47b1f880 --- /dev/null +++ b/Games/Sky_Jumper/README.md @@ -0,0 +1,31 @@ +# Sky Jumper Game + +A simple 2D platformer game where the player jumps between platforms in a sky-themed environment. This game is built using HTML, CSS, and JavaScript. + +## Overview + +Sky Jumper is a basic web-based game where the player controls a character that can jump between floating platforms. It features: +- Gravity and jumping mechanics +- Basic platform collision detection +- Simple controls using arrow keys and the space bar + +## Features + +- **Player Movement**: Move left and right using arrow keys. +- **Jumping**: Jump using the space bar. +- **Platforms**: Jump between floating platforms in the sky. +- **Responsive Canvas**: Adjusts to the window size. + +## Getting Started + +### Prerequisites + +No additional software is required other than a modern web browser. + +### Setup + +1. **Clone the Repository** + + ```bash + git clone + cd sky-jumper diff --git a/Games/Sky_Jumper/game.js b/Games/Sky_Jumper/game.js new file mode 100644 index 0000000000..ad1c57b616 --- /dev/null +++ b/Games/Sky_Jumper/game.js @@ -0,0 +1,88 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +// Game variables +const playerWidth = 50; +const playerHeight = 50; +const platformWidth = 150; +const platformHeight = 20; +let playerX = canvas.width / 2 - playerWidth / 2; +let playerY = canvas.height - playerHeight - 100; +let playerSpeedX = 0; +let playerSpeedY = 0; +const gravity = 0.5; +const jumpPower = -10; +const moveSpeed = 5; + +// Platforms +const platforms = [ + { x: 100, y: canvas.height - 50, width: platformWidth, height: platformHeight }, + { x: 300, y: canvas.height - 150, width: platformWidth, height: platformHeight }, + { x: 500, y: canvas.height - 250, width: platformWidth, height: platformHeight } +]; + +// Input +const keys = {}; + +// Event listeners +window.addEventListener('keydown', (e) => keys[e.code] = true); +window.addEventListener('keyup', (e) => keys[e.code] = false); + +function update() { + // Player movement + if (keys['ArrowLeft']) playerSpeedX = -moveSpeed; + else if (keys['ArrowRight']) playerSpeedX = moveSpeed; + else playerSpeedX = 0; + + if (keys['Space'] && onGround()) { + playerSpeedY = jumpPower; + } + + playerSpeedY += gravity; + playerX += playerSpeedX; + playerY += playerSpeedY; + + // Collision detection + if (playerY + playerHeight > canvas.height) { + playerY = canvas.height - playerHeight; + playerSpeedY = 0; + } + + platforms.forEach(platform => { + if (playerX < platform.x + platform.width && + playerX + playerWidth > platform.x && + playerY + playerHeight > platform.y && + playerY + playerHeight < platform.y + platform.height && + playerSpeedY > 0) { + playerY = platform.y - playerHeight; + playerSpeedY = 0; + } + }); + + // Draw everything + draw(); + requestAnimationFrame(update); +} + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw player + ctx.fillStyle = 'red'; + ctx.fillRect(playerX, playerY, playerWidth, playerHeight); + + // Draw platforms + ctx.fillStyle = 'green'; + platforms.forEach(platform => { + ctx.fillRect(platform.x, platform.y, platform.width, platform.height); + }); +} + +function onGround() { + return playerY + playerHeight >= canvas.height; +} + +update(); diff --git a/Games/Sky_Jumper/index.html b/Games/Sky_Jumper/index.html new file mode 100644 index 0000000000..c5fc9699a2 --- /dev/null +++ b/Games/Sky_Jumper/index.html @@ -0,0 +1,15 @@ + + + + + + Sky Jumper Game + + + +
+ +
+ + + diff --git a/Games/Sky_Jumper/styles.css b/Games/Sky_Jumper/styles.css new file mode 100644 index 0000000000..867f78f9f2 --- /dev/null +++ b/Games/Sky_Jumper/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0; + padding: 0; + overflow: hidden; + background-color: #87CEEB; /* Sky blue */ +} + +#gameCanvasContainer { + position: relative; + width: 100vw; + height: 100vh; +} + +canvas { + display: block; +} diff --git a/Games/Smash-Monty-mole-master-main/README.md b/Games/Smash-Monty-mole-master-main/README.md new file mode 100644 index 0000000000..d1042f460a --- /dev/null +++ b/Games/Smash-Monty-mole-master-main/README.md @@ -0,0 +1,7 @@ +The game involves clicking on randomly appearing moles to score points while avoiding randomly appearing piranha plants, as clicking on a plant ends the game. Moles and plants appear at random intervals on a 3x3 grid, and the score updates dynamically based on player actions. + +# How to run ? +Just run the index.html file + +# Output +![image](https://github.com/user-attachments/assets/6ba2bd26-89ad-4cf6-92e8-c87155302272) diff --git a/Games/Smash-Monty-mole-master-main/index.html b/Games/Smash-Monty-mole-master-main/index.html new file mode 100644 index 0000000000..55bb8ab4be --- /dev/null +++ b/Games/Smash-Monty-mole-master-main/index.html @@ -0,0 +1,17 @@ + + + + + + Whac a Mole + + + + +

Smash Monty-Mole

+

0

+ +
+
+ + diff --git a/Games/Smash-Monty-mole-master-main/mario-bg.jpg b/Games/Smash-Monty-mole-master-main/mario-bg.jpg new file mode 100644 index 0000000000..d2e4aa344f Binary files /dev/null and b/Games/Smash-Monty-mole-master-main/mario-bg.jpg differ diff --git a/Games/Smash-Monty-mole-master-main/mole.css b/Games/Smash-Monty-mole-master-main/mole.css new file mode 100644 index 0000000000..82ae382419 --- /dev/null +++ b/Games/Smash-Monty-mole-master-main/mole.css @@ -0,0 +1,41 @@ +body { + font-family: Arial, Helvetica, sans-serif; + text-align: center; + background: url("./mario-bg.jpg"); + background-size: cover; +} + +#board { + width: 540px; + height: 540px; + /* background-color: green; */ + + margin: 0 auto; + display: flex; + flex-wrap: wrap; + + background: url("./soil.png"); + background-size: cover; + border: 3px solid white; + border-radius: 25px; +} + +#board div { + /* board = 540 x 540, divide into 3x3 tiles --> 180 x 180 per div */ + width: 180px; + height: 180px; + background-image: url("./pipe.png"); + background-size: cover; +} + +#board div img { + /* all img tags inside tiles */ + width: 100px; + height: 100px; + + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; +} \ No newline at end of file diff --git a/Games/Smash-Monty-mole-master-main/mole.js b/Games/Smash-Monty-mole-master-main/mole.js new file mode 100644 index 0000000000..6f3fe60ca9 --- /dev/null +++ b/Games/Smash-Monty-mole-master-main/mole.js @@ -0,0 +1,77 @@ +let currMoleTile; +let currPlantTile; +let score = 0; +let gameOver = false; + +window.onload = function() { + setGame(); +} + +function setGame() { + //set up the grid in html + for (let i = 0; i < 9; i++) { //i goes from 0 to 8, stops at 9 + //
+ let tile = document.createElement("div"); + tile.id = i.toString(); + tile.addEventListener("click", selectTile); + document.getElementById("board").appendChild(tile); + } + setInterval(setMole, 1000); // 1000 miliseconds = 1 second, every 1 second call setMole + setInterval(setPlant, 2000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant +} + +function getRandomTile() { + //math.random --> 0-1 --> (0-1) * 9 = (0-9) --> round down to (0-8) integers + let num = Math.floor(Math.random() * 9); + return num.toString(); +} + +function setMole() { + if (gameOver) { + return; + } + if (currMoleTile) { + currMoleTile.innerHTML = ""; + } + let mole = document.createElement("img"); + mole.src = "./monty-mole.png"; + + let num = getRandomTile(); + if (currPlantTile && currPlantTile.id == num) { + return; + } + currMoleTile = document.getElementById(num); + currMoleTile.appendChild(mole); +} + +function setPlant() { + if (gameOver) { + return; + } + if (currPlantTile) { + currPlantTile.innerHTML = ""; + } + let plant = document.createElement("img"); + plant.src = "./piranha-plant.png"; + + let num = getRandomTile(); + if (currMoleTile && currMoleTile.id == num) { + return; + } + currPlantTile = document.getElementById(num); + currPlantTile.appendChild(plant); +} + +function selectTile() { + if (gameOver) { + return; + } + if (this == currMoleTile) { + score += 10; + document.getElementById("score").innerText = score.toString(); //update score html + } + else if (this == currPlantTile) { + document.getElementById("score").innerText = "GAME OVER: " + score.toString(); //update score html + gameOver = true; + } +} \ No newline at end of file diff --git a/Games/Smash-Monty-mole-master-main/monty-mole.png b/Games/Smash-Monty-mole-master-main/monty-mole.png new file mode 100644 index 0000000000..523a515233 Binary files /dev/null and b/Games/Smash-Monty-mole-master-main/monty-mole.png differ diff --git a/Games/Smash-Monty-mole-master-main/pipe.png b/Games/Smash-Monty-mole-master-main/pipe.png new file mode 100644 index 0000000000..fb1d6be633 Binary files /dev/null and b/Games/Smash-Monty-mole-master-main/pipe.png differ diff --git a/Games/Smash-Monty-mole-master-main/piranha-plant.png b/Games/Smash-Monty-mole-master-main/piranha-plant.png new file mode 100644 index 0000000000..ad5fb991b9 Binary files /dev/null and b/Games/Smash-Monty-mole-master-main/piranha-plant.png differ diff --git a/Games/Smash-Monty-mole-master-main/soil.png b/Games/Smash-Monty-mole-master-main/soil.png new file mode 100644 index 0000000000..94e3b38d2c Binary files /dev/null and b/Games/Smash-Monty-mole-master-main/soil.png differ diff --git a/Games/Synonym_Symphony/README.md b/Games/Synonym_Symphony/README.md new file mode 100644 index 0000000000..0a9250c453 --- /dev/null +++ b/Games/Synonym_Symphony/README.md @@ -0,0 +1,25 @@ +# **Synonym Symphony game** + +--- + +
+ +## **Description 📃** +- The game will provide a word to the player. This word will be the starting point for finding synonyms. +- The player inputs words they believe are synonyms of the given word. +- There will be a countdown timer of 60s for limiting the time players have to enter synonyms. +- For each valid synonym you will recieve 10 points. + +
+ +## **Screenshots 📸** + +
Image Description +
+Image Description +
+Image Description +
+Image Description +
+Image Description diff --git a/Games/Synonym_Symphony/images/image_01.png b/Games/Synonym_Symphony/images/image_01.png new file mode 100644 index 0000000000..6b0189d6a4 Binary files /dev/null and b/Games/Synonym_Symphony/images/image_01.png differ diff --git a/Games/Synonym_Symphony/images/image_02.png b/Games/Synonym_Symphony/images/image_02.png new file mode 100644 index 0000000000..69009f0de1 Binary files /dev/null and b/Games/Synonym_Symphony/images/image_02.png differ diff --git a/Games/Synonym_Symphony/images/image_03.png b/Games/Synonym_Symphony/images/image_03.png new file mode 100644 index 0000000000..664eed61b3 Binary files /dev/null and b/Games/Synonym_Symphony/images/image_03.png differ diff --git a/Games/Synonym_Symphony/images/image_04.png b/Games/Synonym_Symphony/images/image_04.png new file mode 100644 index 0000000000..c9a10a7092 Binary files /dev/null and b/Games/Synonym_Symphony/images/image_04.png differ diff --git a/Games/Synonym_Symphony/images/image_05.png b/Games/Synonym_Symphony/images/image_05.png new file mode 100644 index 0000000000..9766416d5d Binary files /dev/null and b/Games/Synonym_Symphony/images/image_05.png differ diff --git a/Games/Synonym_Symphony/index.html b/Games/Synonym_Symphony/index.html new file mode 100644 index 0000000000..d3f9166fcc --- /dev/null +++ b/Games/Synonym_Symphony/index.html @@ -0,0 +1,40 @@ + + + + + + Synonym Symphony + + + +
+

Synonym Symphony

+ + +
+
+

Synonym Symphony

+

Word: Happy

+ + +

+

Score: 0

+

+

Time Left: 60s

+ +
+ +
+

Synonym Symphony

+

+ +
+ + + + diff --git a/Games/Synonym_Symphony/script.js b/Games/Synonym_Symphony/script.js new file mode 100644 index 0000000000..1672e155e4 --- /dev/null +++ b/Games/Synonym_Symphony/script.js @@ -0,0 +1,99 @@ +const words = { + "happy": ["joyful", "cheerful", "content", "pleased", "blissful"], + "angry": ["furious", "irate", "enraged", "mad", "annoyed"], + "sad": ["unhappy", "sorrowful", "melancholy", "gloomy", "mournful"], + "fast": ["quick", "speedy", "swift", "rapid", "brisk"], + "smart": ["intelligent", "clever", "bright", "sharp", "wise"], + "big": ["large", "huge", "gigantic", "massive", "enormous"], + "small": ["tiny", "little", "miniature", "compact", "petite"], + "strong": ["powerful", "sturdy", "robust", "tough", "solid"], + "weak": ["fragile", "frail", "feeble", "delicate", "brittle"], + "cold": ["chilly", "freezing", "icy", "frigid", "frosty"], + "hot": ["warm", "boiling", "scorching", "blazing", "fiery"], + "beautiful": ["gorgeous", "stunning", "lovely", "attractive", "radiant"], + "ugly": ["unattractive", "hideous", "unsightly", "plain", "homely"], + "brave": ["courageous", "fearless", "valiant", "bold", "heroic"], + "scared": ["afraid", "frightened", "terrified", "petrified", "panicked"], + "funny": ["humorous", "amusing", "hilarious", "comical", "entertaining"], + "boring": ["dull", "tedious", "uninteresting", "monotonous", "dry"] +}; + + +let currentWord = "Happy"; +let score = 0; +let timeLeft = 60; +let interval; +let userCorrectAnswer = []; +document.addEventListener("DOMContentLoaded", () => { + document.querySelector(".start-container").style.display = "block" + document.querySelector(".play").style.display = "none" + document.querySelector(".end-container").style.display = "none" +}) + +function startGame() { + score = 0; + timeLeft = 60; + userCorrectAnswer = []; + document.getElementById("user-provided").innerText = ""; + document.querySelector(".play").style.display = "block" + document.querySelector(".start-container").style.display = "none" + document.getElementById('score').innerText = "Score: " + score; + document.getElementById('time').innerText = timeLeft; + document.getElementById('feedback').innerText = ""; + document.getElementById('synonym-input').value = ""; + currentWord = getRandomWord(); + document.getElementById('word').innerText = currentWord; + clearInterval(interval); + interval = setInterval(updateTimer, 1000); +} + +function updateTimer() { + timeLeft--; + document.getElementById('time').innerText = timeLeft; + if (timeLeft <= 0) { + clearInterval(interval); + endGame(); + } +} + +function getRandomWord() { + const keys = Object.keys(words); + return keys[Math.floor(Math.random() * keys.length)]; +} + +function checkSynonym() { + const input = document.getElementById('synonym-input').value.trim().toLowerCase(); + if (input == "") { + alert("Please enter a synonym!") + return; + } + if (words[currentWord].includes(input)) { + if (userCorrectAnswer.includes(input)) { + document.getElementById('feedback').innerText = `You have already entered "${input}". Try again!`; + return; + } + score += 10; + userCorrectAnswer.push(input); + document.getElementById("user-provided").innerText = "Your answers - " + userCorrectAnswer.toString(); + document.getElementById('feedback').innerText = `"${input}" is correct! +10 points`; + } else { + document.getElementById('feedback').innerText = `"${input}" is not a synonym. Try again!`; + } + document.getElementById('score').innerText = "Score: " + score; + document.getElementById('synonym-input').value = ""; +} + +function endGame() { + document.querySelector(".play").style.display = "none" + document.querySelector(".end-container").style.display = "block" + document.querySelector(".start-container").style.display = "none" + document.getElementById('final-feedback').innerText = `Time's up! Your final score is ${score}.`; + userCorrectAnswer +} + +function playAgain() { + document.querySelector(".play").style.display = "none" + document.querySelector(".end-container").style.display = "none" + document.querySelector(".start-container").style.display = "block" + userCorrectAnswer = [] +} \ No newline at end of file diff --git a/Games/Synonym_Symphony/styles.css b/Games/Synonym_Symphony/styles.css new file mode 100644 index 0000000000..05f959f361 --- /dev/null +++ b/Games/Synonym_Symphony/styles.css @@ -0,0 +1,82 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +* { + font-family: "Poppins", sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 15px; + background-color: #4b0082; +} + +.game-container { + text-align: center; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: none; + background-color: #3f026b; + min-width: 500px; +} +.game-container h1 { + font-size: 20px; + margin-bottom: 15px; + color: #d9a4ff; +} +#synonym-input { + width: 80%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 4px; +} + +li { + font-size: 15px; + color: whitesmoke; + margin-bottom: 10px; +} +button { + padding: 10px 20px; + background-color: #ac37ff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 15px; +} + +button:hover { + background-color: #9a0cff; +} + +#feedback { + margin-top: 10px; + font-weight: bold; +} + +#score, #timer { + margin-top: 15px; +} +p { + font-size: 16px; + color: white; +} +#score { + color: #31c139; + font-weight: bold; + margin-bottom: 15px; +} +#final-feedback { + font-size: 16px; +} +#user-provided { + font-size: 13px; + color: yellow; +} diff --git a/README.md b/README.md index 17fb018f27..d123b6676f 100644 --- a/README.md +++ b/README.md @@ -328,29 +328,6 @@ This repository also provides one such platforms where contributers come over an |[Building Blocks Game](https://github.com/kunjgit/GameZone/tree/main/Games/Building_Block_Game)| |[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)| |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)| -| [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game) | -| [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster) | -| [Forest_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Forst_Guardian) | -| [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) | -| [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) | -|[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)| -|[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game) | -|[Chess_Game_computer](https://github.com/kunjgit/GameZone/tree/main/Games/Chess_Game_computer) | -|[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light) | -| [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | -| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | -|[Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | -| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | -| [Gravity_Simulation_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Simulation_Game) | -| [Anagarm-Word-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Anagarm-Word-Game) | -| [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) | -| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) -|[Penguins Cant Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Cant_Fly)| -|[GoFish](https://github.com/kunjgit/GameZone/tree/main/Games/GoFish)| -| [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)| - -| [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) | -| [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) | | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) | | [Airhockey_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_Game) | @@ -788,8 +765,9 @@ This repository also provides one such platforms where contributers come over an | [Tetris Game](https://github.com/kunjgit/GameZone/tree/main/Games/tetris_game)| |[Chess_Game_computer](https://github.com/kunjgit/GameZone/tree/main/Games/Chess_Game_computer) | |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light) | -| [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | -| [Bubble'z Popper](https://github.com/Chandu6702/GameZone/tree/main/Games/Bubble'z Popper)| +| [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) || +| [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Gam)| +| [Language Learner Adventure](https://github.com/kunjgit/GameZone/tree/main/Games/Language_Learner_Adventure)| | [Dsa_quiz_game](https://github.com/kunjgit/GameZone/tree/main/Games/Dsa_quiz_game) | | [Gravity_Simulation_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Simulation_Game) | | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) @@ -801,6 +779,7 @@ This repository also provides one such platforms where contributers come over an | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) | | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) | [Alphabet-and-Vowels](https://github.com/kunjgit/GameZone/tree/main/Games/Alphabet-and-Vowels) | +| [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)| | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick%20Buster) | | [Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly) | | [Intellect Quest](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Intellect_Quest) | @@ -1337,6 +1316,7 @@ This repository also provides one such platforms where contributers come over an |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)| |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)| |[Catch_The_Object](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_The_Objects)| +|[Sky_Jumper](https://github.com/kunjgit/GameZone/tree/main/Games/Sky_Jumper)| | Game | Game | Game | Game | Game | @@ -1686,10 +1666,17 @@ This repository also provides one such platforms where contributers come over an |[2D_Fighting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/2D_Fighting_Game)| | [Airhockey_game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_game)| + +|[Smash-Monty-Mole](https://github.com/kunjgit/GameZone/tree/main/Smash-Monty-mole-master-main)| + | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)| |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)| + | [Memory_Card](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Card)| +|[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)| + +
diff --git a/assets/css/contributors.css b/assets/css/contributors.css index fc745f048d..10935eb4b1 100644 --- a/assets/css/contributors.css +++ b/assets/css/contributors.css @@ -21,6 +21,7 @@ .contributors h1:hover { text-decoration: underline; + transform: scale(1.01); } #contributor { diff --git a/assets/css/cursor_transition.css b/assets/css/cursor_transition.css index d779bdc9e4..478aeae3f5 100644 --- a/assets/css/cursor_transition.css +++ b/assets/css/cursor_transition.css @@ -1,36 +1,47 @@ .cursor { - z-index: 999; position: fixed; - background: #23bdf5; - width: 10px; - height: 10px; - border-radius: 50%; + width: 20px; + height: 20px; + border-top: 5px solid #47ebf0; + border-left: 5px solid #47ebf0; + transform-origin: top; + transform: translate(-1px,5px) rotate(15deg) scale(0); + transition: transform 0.1s; pointer-events: none; - box-shadow: 0 0 20px #23bdf5, - 0 0 60px #23bdf5, - 0 0 100px #23bdf5; - animation: colors 1s infinite; - transform: translate(-50%, -50%); - display: none; + animation: animate 5s linear infinite; + } - -@keyframes colors { - 0% { - filter: hue-rotate(0deg); - } - - 100% { - filter: hue-rotate(360deg); - } +body{ + max-height: 100vh; + background: #222; + background-image: linear-gradient(to right, #333 1px, transparent 1px), + linear-gradient(to bottom, #333 1px, transparent 1px); + background-size: 40px 40px; + cursor: none; } - .cursor:before { content: ''; position: absolute; - background: #23bdf5; - width: 15px; - height: 15px; - opacity: 0.2; - transform: translate(-30%, -30%); - border-radius: 50%; + left: -2.5px; + width: 5px; + height: 30px; + background: #47ebf0; + transform-origin: top; + transform: rotate(315deg); + } +body:hover .cursor{ + transform: translate(-1px,5px) rotate(15deg) scale(1); +} +@keyframes animate { + 0%{ + filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) + hue-rotate(0deg); + } + 100%{ + filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) + hue-rotate(360deg); + } + +} + diff --git a/assets/css/navbar.css b/assets/css/navbar.css index cbb2cf41d6..d3361539c6 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -1,120 +1,125 @@ -.navbarr { - display: flex; - justify-content: space-between; +.header{ position: fixed; top: 0; + left: 0; width: 100%; - z-index: 200; + padding: 1.3rem 10%; + display: flex; + justify-content: space-between; align-items: center; - padding: .5rem; - background: linear-gradient(rgb(236, 145, 145),rgb(189, 239, 189),rgb(161, 161, 209),rgb(220, 220, 159)); + z-index: 100; +} +.header::before{ + content: ''; + position: absolute; + top: 0; + left:0; + width: 100%; + height: 100%; + background: rgba(0, 0 ,0 , .1); + backdrop-filter: blur(50px); + z-index: -1; +} +.header::after{ + content: ''; + position: absolute; + top: 0; + left:-100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg , transparent, red + transparent); } + /* #themeToggle{ border: none; background-color: transparent; } */ .logox { - display: flex; - font-size: 1.5rem; - font-weight: bolder; - color: rgb(17, 4, 4); -} - -.nav-linkss { - display: flex; - list-style: none; - margin: 0; - padding: 0; - font-weight: bold; -} - -.nav-linkss li { - margin-right: 2rem; - margin-left: 2rem; + font-size: 2rem; + font-weight: 800; + color: purple; + text-decoration: none; + } - -.nav-linkss a { +.navbarr a{ + font-size: 1.15rem; + color: #fff; text-decoration: none; - color: #333; + font-weight: 500; + margin-left: 2.5rem; } -.navbarr ul li a:hover { - text-decoration: underline; - color: rgb(144, 137, 137); +#check{ + display: none; +} +.icons{ + position: absolute; + right: 5%; + font-size: 2.8rem; + color: #fff; + cursor: pointer; + display: none; } - -/* Media Queries for responsiveness*/ - -/* media query for screen sizes upto 420px */ -@media screen and (max-width:550px){ - .logox{ - opacity: 0; - width: 0; - transition: opacity .5s ease-in-out, width .1s ease-in-out ; - } - .logox span{ - opacity: 0; - width: 0; - transition: opacity .5s ease-in-out, width .5s ease-in-out ; - } - /* #themeToggleWrapper{ - opacity: 0; - width: 0; - padding: 0; - margin: 0; - transition: opacity .5s ease-in-out,width .5s ease-in-out, padding .5s ease-in-out, margin .5s ease-in-out; - } */ - .nav-linkss li{ - margin-right: 1rem; - margin-left: 1rem; - transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out; +@media (max-width: 992px){ + .header{ + padding: 1.3rem 5%; } - } -/* Media query for screens between 420px and 768px wide */ -@media screen and (min-width:550px) and (max-width: 768px) { - .logox span{ - opacity: 0; - width: 0; - transition: opacity .5s ease-in-out, width .5s ease-in-out ; +@media (max-width:768px){ + .icons{ + display: inline-flex; } - .logox{ - opacity: 1; - width: auto; - transition: opacity .5s ease-in-out, width .1s ease-in-out ; + + #check:checked~icons #menu-icon{ + display: none; } - /* #themeToggleWrapper{ - opacity: 1; - width:40px ; - transition: opacity .5s ease-in-out,width .5s ease-in-out; - } */ - .nav-linkss li{ - margin-left: 1rem; - margin-right: 1rem; - transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out; + + .icons #close-icon{ + display: none; } -} + #check:checked~icons #close-icon{ + display: block; + } + .navbarr { + + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 0; + background-color: rgba( 0, 0, 0, .1); + backdrop-filter: blur(50px); + box-shadow: 0.5rem 1rem rgba( 0, 0, 0, .1) ; + overflow: hidden; + transition: 0.3s ease; + + } + #check:checked~.navbarr{ + height: 17.7rem; + } + .navbarr a{ + display: block; + font-size: 1.1rem; + margin: 1.5rem 0; + text-align: center; + transform: translateY(-50px); + opacity: 0; + transition: 0.3s ease; + } -/* Media query for screens between 768px and 1024px wide */ -@media screen and (min-width: 768px) and (max-width: 1024px) { - .logox span{ + #check:checked~.navbarr a{ + transform: translateY(0); opacity: 1; - width: auto; - transition: opacity .5s ease-in-out, width .5s ease-in-out ; - } - .nav-linkss li{ - margin-left:1.5rem ; - margin-right:1.5rem ; - transition: margin-right .5s ease-in-out ,margin-left .5s ease-in-out; ; + transition-delay: calc(.15s *var(--i)); } -} - +} \ No newline at end of file diff --git a/assets/css/scroll.css b/assets/css/scroll.css index cd89ee9348..d5b70252e5 100644 --- a/assets/css/scroll.css +++ b/assets/css/scroll.css @@ -21,14 +21,14 @@ } @keyframes animate{ 50%{ - transform: translateY(-8px); + transform: scale(1.02); } } #progress-value { display: block; height: calc(100% - 15px); width: calc(100% - 15px); - background-color: rgb(104, 98, 232); + background-color: rgb(56, 51, 154); background: linear-gradient(90deg, rgb(159, 157, 235) 0%, rgb(212, 153, 222) 39%, rgb(253, 199, 134) 100%); border-radius: 50%; display: grid; diff --git a/assets/css/style.css b/assets/css/style.css index 44ce49f123..b76b2ad43e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -335,6 +335,10 @@ footer { @media (max-width: 500px) { + footer .container { + margin-left: 0 !important; + } + .footer-bottom p { float: none; } diff --git a/assets/images/Language_Learner_Adventure.png b/assets/images/Language_Learner_Adventure.png new file mode 100644 index 0000000000..a5d63fe31b Binary files /dev/null and b/assets/images/Language_Learner_Adventure.png differ diff --git a/assets/images/Screenshot 2024-08-01 002501.png b/assets/images/Screenshot 2024-08-01 002501.png new file mode 100644 index 0000000000..db490b0da7 Binary files /dev/null and b/assets/images/Screenshot 2024-08-01 002501.png differ diff --git a/assets/images/Sky_Jumper.png b/assets/images/Sky_Jumper.png new file mode 100644 index 0000000000..586f2d7bad Binary files /dev/null and b/assets/images/Sky_Jumper.png differ diff --git a/assets/images/Synonym_Symphony.png b/assets/images/Synonym_Symphony.png new file mode 100644 index 0000000000..6b0189d6a4 Binary files /dev/null and b/assets/images/Synonym_Symphony.png differ diff --git a/assets/js/cursor_transition.js b/assets/js/cursor_transition.js index fd46b812ec..136ecac9a4 100644 --- a/assets/js/cursor_transition.js +++ b/assets/js/cursor_transition.js @@ -1,5 +1,6 @@ document.addEventListener("DOMContentLoaded", function () { - const cursor = document.querySelector(".cursor"); + let cursor = document.querySelector(".cursor"); + let body = document.querySelector(".body"); var timeout; document.addEventListener("mousemove", (e) => { @@ -26,3 +27,4 @@ document.addEventListener("DOMContentLoaded", function () { cursor.style.display = "none"; }); }); + diff --git a/index.html b/index.html index 2c9311d962..87ec8e3824 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ GameZone + + @@ -93,16 +95,24 @@ -