diff --git a/Games/Flames-game/README.md b/Games/Flames-game/README.md new file mode 100644 index 0000000000..ec0200cbb5 --- /dev/null +++ b/Games/Flames-game/README.md @@ -0,0 +1,62 @@ +# FLAMES Game + +This is a simple FLAMES game built using HTML, CSS, and JavaScript. The FLAMES game takes two names as input and calculates the relationship between them based on the FLAMES logic. + +## Table of Contents + +- [Introduction](#introduction) +- [Features](#features) +- [Installation](#installation) +- [Usage](#usage) +- [Technologies Used](#technologies-used) +- [License](#license) + +## Introduction + +The FLAMES game is a fun and simple game to determine the type of relationship between two people based on their names. FLAMES stands for Friends, Lovers, Affectionate, Marriage, Enemies, and Siblings. This project provides an interactive interface where users can input two names and see the result of their relationship. + +## Features + +- Interactive flip card UI with a toggle switch +- Responsive design +- Easy to use +- Instant calculation of FLAMES result + +## Installation + +To get a local copy of this project up and running, follow these simple steps: + +1. Clone the repository: + + ```bash + git clone https://github.com/yourusername/flames-game.git + ``` + +2. Navigate to the project directory: + + ```bash + cd flames-game + ``` + +## Usage + +1. Open the `index.html` file in your preferred web browser. + +2. Enter your name and your crush's name in the respective input fields. + +3. Click on the "Calculate" button. + +4. The result of the FLAMES game will be displayed below the input fields. + +## Technologies Used + +- HTML +- CSS +- JavaScript + +##screenshots +![image](https://github.com/Saipradyumnagoud/GameZone/assets/143107589/a36fbc47-7c58-48e0-bb3d-e5fb6d02e061) + +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information. diff --git a/Games/Flames-game/assets/images/Screenshot 2024-05-28 214451.png b/Games/Flames-game/assets/images/Screenshot 2024-05-28 214451.png new file mode 100644 index 0000000000..3165c82c80 Binary files /dev/null and b/Games/Flames-game/assets/images/Screenshot 2024-05-28 214451.png differ diff --git a/Games/Flames-game/index.html b/Games/Flames-game/index.html new file mode 100644 index 0000000000..5c3c2b9270 --- /dev/null +++ b/Games/Flames-game/index.html @@ -0,0 +1,29 @@ + + + + + + FLAMES Game + + + +
+
+ +
+
+ + + diff --git a/Games/Flames-game/script.js b/Games/Flames-game/script.js new file mode 100644 index 0000000000..721567adf1 --- /dev/null +++ b/Games/Flames-game/script.js @@ -0,0 +1,25 @@ +document.getElementById('flamesForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const name1 = document.getElementById('name1').value.toLowerCase().replace(/ /g, ''); + const name2 = document.getElementById('name2').value.toLowerCase().replace(/ /g, ''); + + let name1Array = name1.split(''); + let name2Array = name2.split(''); + + name1Array.forEach(char => { + const index = name2Array.indexOf(char); + if (index !== -1) { + name2Array.splice(index, 1); + name1Array.splice(name1Array.indexOf(char), 1); + } + }); + + const count = name1Array.length + name2Array.length; + const flames = ['Friends', 'Lovers', 'Affectionate', 'Marriage', 'Enemies', 'Siblings']; + let flamesIndex = count % flames.length; + + const resultText = flamesIndex === 0 ? flames[flames.length - 1] : flames[flamesIndex - 1]; + + document.getElementById('result').innerText = `Result: ${resultText}`; +}); diff --git a/Games/Flames-game/style.css b/Games/Flames-game/style.css new file mode 100644 index 0000000000..6bbcd43e0e --- /dev/null +++ b/Games/Flames-game/style.css @@ -0,0 +1,203 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.wrapper { + --input-focus: #2d8cf0; + --font-color: #323232; + --font-color-sub: #666; + --bg-color: #fff; + --bg-color-alt: #666; + --main-color: #323232; +} + +.switch { + transform: translateY(-200px); + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + width: 50px; + height: 20px; +} + +.card-side::before { + position: absolute; + content: 'FLAMES Game'; + left: -120px; + top: 0; + width: 200px; + text-decoration: underline; + color: var(--font-color); + font-weight: 600; +} + +.card-side::after { + position: absolute; + content: ''; + left: 70px; + top: 0; + width: 100px; + text-decoration: none; + color: var(--font-color); + font-weight: 600; +} + +.toggle { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + box-sizing: border-box; + border-radius: 5px; + border: 2px solid var(--main-color); + box-shadow: 4px 4px var(--main-color); + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--bg-colorcolor); + transition: 0.3s; +} + +.slider:before { + box-sizing: border-box; + position: absolute; + content: ""; + height: 20px; + width: 20px; + border: 2px solid var(--main-color); + border-radius: 5px; + left: -2px; + bottom: 2px; + background-color: var(--bg-color); + box-shadow: 0 3px 0 var(--main-color); + transition: 0.3s; +} + +.toggle:checked + .slider { + background-color: var(--input-focus); +} + +.toggle:checked + .slider:before { + transform: translateX(30px); +} + +.toggle:checked ~ .card-side:before { + text-decoration: none; +} + +.toggle:checked ~ .card-side:after { + text-decoration: underline; +} + +.flip-card__inner { + width: 300px; + height: 350px; + position: relative; + background-color: transparent; + perspective: 1000px; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +.toggle:checked ~ .flip-card__inner { + transform: rotateY(180deg); +} + +.flip-card__front, .flip-card__back { + padding: 20px; + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + background: lightgrey; + gap: 20px; + border-radius: 5px; + border: 2px solid var(--main-color); + box-shadow: 4px 4px var(--main-color); +} + +.flip-card__back { + width: 100%; + transform: rotateY(180deg); +} + +.flip-card__form { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.title { + margin: 20px 0 20px 0; + font-size: 25px; + font-weight: 900; + text-align: center; + color: var(--main-color); +} + +.flip-card__input { + width: 250px; + height: 40px; + border-radius: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 15px; + font-weight: 600; + color: var(--font-color); + padding: 5px 10px; + outline: none; +} + +.flip-card__input::placeholder { + color: var(--font-color-sub); + opacity: 0.8; +} + +.flip-card__input:focus { + border: 2px solid var(--input-focus); +} + +.flip-card__btn:active, .button-confirm:active { + box-shadow: 0px 0px var(--main-color); + transform: translate(3px, 3px); +} + +.flip-card__btn { + margin: 20px 0 20px 0; + width: 120px; + height: 40px; + border-radius: 5px; + border: 2px solid var(--main-color); + background-color: var(--bg-color); + box-shadow: 4px 4px var(--main-color); + font-size: 17px; + font-weight: 600; + color: var(--font-color); + cursor: pointer; +} + +.result { + margin-top: 20px; + font-size: 20px; + font-weight: bold; + color: var(--main-color); +} diff --git a/Games/Flames_game b/Games/Flames_game new file mode 160000 index 0000000000..32999bebc9 --- /dev/null +++ b/Games/Flames_game @@ -0,0 +1 @@ +Subproject commit 32999bebc9b2c53a443c7098510c2a2d656ffbbf diff --git a/README.md b/README.md index aba398f819..43ec1debbf 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ This repository also provides one such platforms where contributers come over an | Game | Game | Game | Game | Game | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | -| [Master Typing](https://github.com/kunjgit/GameZone/tree/main/Games/Master_Typing) | [Tilting Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Tilting_Maze) | [Simon Game Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Game_Challenge) | [Snake Game](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Game) | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game) | +|[Flames-Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Flames-game) | [Master Typing](https://github.com/kunjgit/GameZone/tree/main/Games/Master_Typing) | [Tilting Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Tilting_Maze) | [Simon Game Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Game_Challenge) | [Snake Game](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Game) | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game) | | [Whack a Mole](https://github.com/kunjgit/GameZone/tree/main/Games/Whack_a_Mole) | [Doraemon Jump](https://github.com/kunjgit/GameZone/tree/main/Games/Doraemon_Jump) | [Black Jack](https://github.com/kunjgit/GameZone/tree/main/Games/Black_Jack) | [Memory Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Game) | [Word Guessing Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Guessing_Game) | | [Ludo Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ludo_Game) | [Piano Game](https://github.com/kunjgit/GameZone/tree/main/Games/Piano) | [Atari Breakout](https://github.com/kunjgit/GameZone/tree/main/Games/Atari_Breakout) | [Dinosaur Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dinosaur_Game) | [Guess The Colour by RGB Game](https://github.com/kunjgit/GameZone/tree/main/Games/Colour_Guessing_Game) | | [Guess The Number](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Number) | [Race car game](https://github.com/kunjgit/GameZone/tree/main/Games/race_car) | [Aim Training](https://github.com/DP-NOTHING/GameZone/tree/contri/Games/Aim_Training) | [Alien Shooter](https://github.com/kunjgit/GameZone/tree/main/Games/Alien_Shooters) | [Fruit Ninja](https://github.com/kunjgit/GameZone/tree/main/Games/Fruit_Ninja) | @@ -278,9 +278,7 @@ This repository also provides one such platforms where contributers come over an | [Arkanoid_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Arkanoid_Game) | | [Catch_Stars](https://github.com/Kunjgit/GameZone/tree/main/Games/Catch_Stars) | | [LaserDarts] (https://github.com/Jagpreet153/GameZone/tree/main/Games/LaserDarts) -| [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building) | - - +| [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building) ||[Flames-Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Flames-game) | diff --git a/assets/images/Flames-game.png b/assets/images/Flames-game.png new file mode 100644 index 0000000000..3165c82c80 Binary files /dev/null and b/assets/images/Flames-game.png differ