diff --git a/Games/Balloon_Popup/Balloon_Popup.png b/Games/Balloon_Popup/Balloon_Popup.png new file mode 100644 index 0000000000..9b14903ac8 Binary files /dev/null and b/Games/Balloon_Popup/Balloon_Popup.png differ diff --git a/Games/Balloon_Popup/Readme.md b/Games/Balloon_Popup/Readme.md new file mode 100644 index 0000000000..3557d3f931 --- /dev/null +++ b/Games/Balloon_Popup/Readme.md @@ -0,0 +1,50 @@ +# **Balloon Popper Game** + +--- + +
+ +## **Description 📃** + +- The Balloon Popper Game is a fun and interactive game where players need to pop balloons of different colors and sizes as they float up the screen. Built using HTML, CSS, and JavaScript, this game provides an engaging and enjoyable experience for all ages. + +## **Functionalities 🎮** + +- Colorful balloons that float up the screen. +- Click to pop the balloons and score points. +- Different balloon sizes to add variety. +- Timer to challenge the player. +- Score tracking to keep track of your performance. + +
+ +## **How to Play? 🕹️** + +- Open the game in your web browser. +- Balloons will start floating up the screen. +- Click on the balloons to pop them and score points. +- The game ends when the timer runs out. +- Try to score as many points as possible before the time runs out! + +
+ +## **Screenshots 📸** + +
+ + + +Screenshot 2023-07-09 235520 +
+ + +
+ +## **Getting Started** + +To get a local copy of the game up and running, follow these simple steps. + +### Prerequisites + +Make sure you have a web browser installed on your computer. + diff --git a/Games/Balloon_Popup/app.js b/Games/Balloon_Popup/app.js new file mode 100644 index 0000000000..df704721bc --- /dev/null +++ b/Games/Balloon_Popup/app.js @@ -0,0 +1,29 @@ +let popped = 0; + +document.addEventListener('mouseover', function(e){ + + if (e.target.className === "balloon"){ + + e.target.style.backgroundColor = "#ededed"; + e.target.textContent = "POP!"; + popped++; + removeEvent(e); + checkAllPopped(); + } +}); + +function removeEvent(e){ + e.target.removeEventListener('mouseover', function(){ + + }) +}; + +function checkAllPopped(){ + if (popped === 24){ + console.log('all popped!'); + let gallery = document.querySelector('#balloon-gallery'); + let message = document.querySelector('#yay-no-balloons'); + gallery.innerHTML = ''; + message.style.display = 'block'; + } +}; \ No newline at end of file diff --git a/Games/Balloon_Popup/index.html b/Games/Balloon_Popup/index.html new file mode 100644 index 0000000000..9f0ecaf673 --- /dev/null +++ b/Games/Balloon_Popup/index.html @@ -0,0 +1,44 @@ + + + + + + + + Pop the Ballons + + +
+

Pop the balloons by moving
your mouse over them

+
Wow! All balloons popped!
+ + +
+ + + \ No newline at end of file diff --git a/Games/Balloon_Popup/style.css b/Games/Balloon_Popup/style.css new file mode 100644 index 0000000000..63f5583378 --- /dev/null +++ b/Games/Balloon_Popup/style.css @@ -0,0 +1,74 @@ +body{ + font-family:sans-serif; + padding: 30px; + background:#ededed; +} + +.wrapper{ + max-width: 690px; + margin: 0 auto; +} + +.blue { + color:#3f7abe; +} + +h1{ + margin: auto; + margin-top: 50px; + margin-bottom: 50px; + color: #08a3d9; + text-transform: uppercase; + font-size: 30px; + color: #000380; +} + +#balloon-gallery div{ + background: #ff3300; + height: 121px; + width: 119px; + text-align: center; + color: #ff3300; + font-size: 40px; + font-family: sans-serif, arial; + border-radius: 100%; + margin-top: 20px; + display: inline-block; + /* float: left; */ + margin: 2.5px 5 px 2.5px 0px; +} + +#balloon-gallery div:nth-child(3n){ + background: #ffce00; + color: #ffce00; +} + +#balloon-gallery div:nth-child(3n-1){ + background:#3f7abe; + color:#3f7abe; +} + +#balloon-gallery div:nth-child(5n){ + background:#8e7a8e; + color:#8e7a8e; +} + +#balloon-gallery div:nth-child(13){ + background:#8e7a8e; + color:#8e7a8e; +} + +#balloon-gallery div:nth-child(10n){ + background:#ff3300; + color: #ff3300; +} + +#balloon-gallery div:nth-child(4n){ + clear:right; +} + +#yay-no-balloons { + display:none; + color:#ff3300; + font-size:100px; +} \ No newline at end of file diff --git a/Games/DNA_Sequencer/README.md b/Games/DNA_Sequencer/README.md new file mode 100644 index 0000000000..ff53dec530 --- /dev/null +++ b/Games/DNA_Sequencer/README.md @@ -0,0 +1,32 @@ +# **DNA Sequencer Game** + +--- + +
+ +## **Description 📃** +DNA Sequencer is an interactive puzzle game where players must arrange DNA bases (A, T, C, G) in the correct order within a given time limit. + +## **Functionalities 🎮** +- Control the sequence by dragging and dropping the DNA bases. +- Shuffle the sequence for added difficulty. +- Timer-based challenge with a 120-second countdown. +- Immediate feedback on the correctness of the arranged sequence. +- Responsive design for easy play on different devices. +- Option to restart the game after the timer runs out or sequence is completed. + +## **How to Play? 🕹️** +- Arrange the DNA bases in the correct order by dragging and dropping them into place. +- Shuffle the sequence using the "Shuffle" button for a new challenge. +- Check your sequence with the "Check Sequence" button to see if it's correct. +- Aim to complete the sequence within the 120-second time limit. +- The game ends when the timer runs out or the correct sequence is achieved. +- Your final result will be displayed on the screen, indicating if the sequence is correct or not. + +## **Screenshots 📸** +![image](../../assets/DNA_Sequencer.png) + +
+ +--- + diff --git a/Games/DNA_Sequencer/index.html b/Games/DNA_Sequencer/index.html new file mode 100644 index 0000000000..1551a8874f --- /dev/null +++ b/Games/DNA_Sequencer/index.html @@ -0,0 +1,28 @@ + + + + + + DNA Sequencer Game + + + +
+

DNA Sequencer

+

Guess the DNA Sequence order by shuffling +
(You can shuffle manually as well)!

+
+
+
+
+ + + +
+
Time: 00:00
+
+
+
+ + + \ No newline at end of file diff --git a/Games/DNA_Sequencer/script.js b/Games/DNA_Sequencer/script.js new file mode 100644 index 0000000000..23cdb95ed6 --- /dev/null +++ b/Games/DNA_Sequencer/script.js @@ -0,0 +1,117 @@ +document.addEventListener('DOMContentLoaded', function() { + let dnaSequence = generateRandomDnaSequence(8); + let currentSequence = [...dnaSequence]; + let timeLimit = 120; + let timer; + + function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + } + + function generateRandomDnaSequence() { + let sequence = ["A", "A", "T", "T", "C", "C", "G", "G"]; + for (let i = sequence.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [sequence[i], sequence[j]] = [sequence[j], sequence[i]]; + } + return sequence; + } + + function renderSequence() { + const sequenceContainer = document.getElementById('dna-sequence'); + sequenceContainer.innerHTML = ''; + currentSequence.forEach((base, index) => { + const baseElement = document.createElement('div'); + baseElement.textContent = base; + baseElement.className = 'base'; + baseElement.draggable = true; + baseElement.setAttribute('data-index', index); + baseElement.addEventListener('dragstart', dragStart); + sequenceContainer.appendChild(baseElement); + }); + } + + function dragStart(e) { + e.dataTransfer.setData('text/plain', e.target.getAttribute('data-index')); + } + + function dragOver(e) { + e.preventDefault(); + } + + function drop(e) { + e.preventDefault(); + const originIndex = e.dataTransfer.getData('text'); + const targetIndex = e.target.getAttribute('data-index'); + if (targetIndex) { + [currentSequence[originIndex], currentSequence[targetIndex]] = [currentSequence[targetIndex], currentSequence[originIndex]]; + renderSequence(); + } + } + + function startLevel() { + shuffleArray(currentSequence); + renderSequence(); + startTimer(); + } + + + function startTimer() { + const timerElement = document.getElementById('timer'); + timerElement.textContent = `Time: ${timeLimit}s`; + timer = setInterval(() => { + timeLimit--; + timerElement.textContent = `Time: ${timeLimit}s`; + if (timeLimit <= 0) { + clearInterval(timer); + const resultElement = document.getElementById('result'); + resultElement.textContent = dnaSequence.join(''); + resultElement.style.color = 'red'; + alert('Time is up! Try again.'); + resetGame(); + } + }, 1000); + } + + function resetGame() { + clearInterval(timer); + timeLimit = 120; + dnaSequence = generateRandomDnaSequence(); + currentSequence = [...dnaSequence]; + startLevel(); + } + + document.getElementById('dna-sequence').addEventListener('dragover', dragOver); + document.getElementById('dna-sequence').addEventListener('drop', drop); + document.getElementById('shuffle').addEventListener('click', () => { + shuffleArray(currentSequence); + renderSequence(); + }); + document.getElementById('check').addEventListener('click', () => { + console.log(currentSequence); + console.log(dnaSequence); + const resultElement = document.getElementById('result'); + if (JSON.stringify(currentSequence) === JSON.stringify(dnaSequence)) { + resultElement.textContent = 'Correct sequence! Well done.'; + resultElement.style.color = 'green'; + clearInterval(timer); + updateScore(true); + currentSequence = generateSequence(dnaSequence.length + 2); + startLevel(); + } else { + resultElement.textContent = 'Incorrect sequence. Try again.'; + resultElement.style.color = 'red'; + updateScore(false); + } + }); + const playAgainButton = document.getElementById('play-again'); + playAgainButton.addEventListener('click', () => { + document.getElementById('result').textContent = ''; + resetGame(); + }); + + startLevel(); +}); \ No newline at end of file diff --git a/Games/DNA_Sequencer/style.css b/Games/DNA_Sequencer/style.css new file mode 100644 index 0000000000..faf5bdc1a5 --- /dev/null +++ b/Games/DNA_Sequencer/style.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #6e8efb, #a777e3); + margin: 0; +} +.container { + text-align: center; + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} +.dna-container { + display: flex; + justify-content: center; + margin: 20px 0; +} +.dna-sequence { + display: flex; + gap: 5px; +} +.dna-sequence .base { + padding: 10px; + border: 1px solid #ccc; + cursor: pointer; + border-radius: 4px; + background-color: #eee; + transform: perspective(100px) rotateX(10deg) rotateY(10deg); + transition: transform 0.3s; +} +.dna-sequence .base:hover { + transform: perspective(100px) rotateX(0deg) rotateY(0deg); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); +} +.controls { + margin: 20px 0; +} +.controls button { + padding: 10px 20px; + margin: 0 10px; + border: none; + background-color: #007bff; + color: white; + border-radius: 4px; + cursor: pointer; +} +.controls button:hover { + background-color: #0056b3; +} +.result { + margin-top: 20px; + font-weight: bold; +} +.level { + font-size: 20px; + margin-top: 10px; +} \ No newline at end of file diff --git a/Games/Detona/index.html b/Games/Detona/index.html new file mode 100644 index 0000000000..e13220afa2 --- /dev/null +++ b/Games/Detona/index.html @@ -0,0 +1,63 @@ + + + + + + + + + Detona Ralph + + + + + + + + + + + + + +
+
+
+

Time Left

+

0

+
+
+

Your Score

+

0

+
+
+ foto do jogador +

x3

+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Games/Detona/readme.md b/Games/Detona/readme.md new file mode 100644 index 0000000000..cb352df934 --- /dev/null +++ b/Games/Detona/readme.md @@ -0,0 +1,49 @@ +## Awesome JSGame Detona Ralph + +``` + #game-development + #javascript-game + #html-css-javascript + #html-css-javascript-games + #ifood + #dio-bootcamp +``` + + +# Bem-vindo ao **JSGame Detona Ralph**! + +Um projeto que, além do entretenimento, demonstra várias técnicas avançadas de desenvolvimento de jogos em JavaScript. + + +Aqui, no repositório, você encontrará os arquivos do projeto. + +Nesta [página do jogo](https://netopaiva.github.io/detona-ralph/) você poderá se divertir com um *game* baseado no famoso filme "Detona Ralph". + +### Tecnologias Utilizadas + +- HTML5 e CSS3 para a estrutura e aparência do jogo. +- JavaScript para a lógica de programação e interatividade. +- Sprites e imagens customizadas para criar a estética única do universo de Detona Ralph. + +### Funcionalidades Incríveis + +- **Sistema de Pontuação**: Acompanhe sua pontuação à medida que progride no jogo e desafie seus amigos a superá-la, clique no quadrado que o Ralph se encontre + +### Como Jogar + +1. Clone este repositório para sua máquina local. +2. Abra o arquivo `index.html` em seu navegador web. +3. Use as setas direcionais para mover o personagem e a barra de espaço para interagir. +4. Divirta-se explorando e coletando moedas, mas fique atento aos inimigos! + +### Contribuição + +Contribuições são bem-vindas! Se você deseja melhorar este jogo, adicionar novos recursos ou corrigir problemas, sinta-se à vontade para abrir um _pull request_. + +### Créditos + +Este jogo foi desenvolvido como parte de um projeto educacional da Digital Innovation One. + +--- + +Divirta-se [jogando o **JSGame Detona Ralph**](https://netopaiva.github.io/detona-ralph/) enquanto explora as técnicas modernas de desenvolvimento de jogos em JavaScript. Lembre-se de conferir o repositório original [aqui](https://github.com/digitalinnovationone/jsgame-detona-ralph) e deixar uma ⭐️ se você gostou do projeto! diff --git a/Games/Detona/src/audios/hit.m4a b/Games/Detona/src/audios/hit.m4a new file mode 100644 index 0000000000..d747823dd2 Binary files /dev/null and b/Games/Detona/src/audios/hit.m4a differ diff --git a/Games/Detona/src/images/favicon.jpg b/Games/Detona/src/images/favicon.jpg new file mode 100644 index 0000000000..8c5153aafc Binary files /dev/null and b/Games/Detona/src/images/favicon.jpg differ diff --git a/Games/Detona/src/images/player.png b/Games/Detona/src/images/player.png new file mode 100644 index 0000000000..3d320717ff Binary files /dev/null and b/Games/Detona/src/images/player.png differ diff --git a/Games/Detona/src/images/ralph.png b/Games/Detona/src/images/ralph.png new file mode 100644 index 0000000000..e8e5b9dd5b Binary files /dev/null and b/Games/Detona/src/images/ralph.png differ diff --git a/Games/Detona/src/images/wall.png b/Games/Detona/src/images/wall.png new file mode 100644 index 0000000000..7e4216a480 Binary files /dev/null and b/Games/Detona/src/images/wall.png differ diff --git a/Games/Detona/src/scripts/engine.js b/Games/Detona/src/scripts/engine.js new file mode 100644 index 0000000000..4dd1859e8b --- /dev/null +++ b/Games/Detona/src/scripts/engine.js @@ -0,0 +1,65 @@ +const state = { + view: { + squares: document.querySelectorAll(".square"), + enemy: document.querySelector(".enemy"), + timeLeft: document.querySelector("#time-left"), + score: document.querySelector("#score"), + }, + values: { + gameVelocity: 1000, + hitPosition: 0, + result: 0, + curretTime: 60, + }, + actions: { + timerId: setInterval(randomSquare, 1000), + countDownTimerId: setInterval(countDown, 1000), + }, +}; + +function countDown() { + state.values.curretTime--; + state.view.timeLeft.textContent = state.values.curretTime; + + if (state.values.curretTime <= 0) { + clearInterval(state.actions.countDownTimerId); + clearInterval(state.actions.timerId); + alert("Game Over! O seu resultado foi: " + state.values.result); + } +} + +function playSound(audioName) { + let audio = new Audio(`./src/audios/${audioName}.m4a`); + audio.volume = 0.2; + audio.play(); +} + +function randomSquare() { + state.view.squares.forEach((square) => { + square.classList.remove("enemy"); + }); + + let randomNumber = Math.floor(Math.random() * 9); + let randomSquare = state.view.squares[randomNumber]; + randomSquare.classList.add("enemy"); + state.values.hitPosition = randomSquare.id; +} + +function addListenerHitBox() { + state.view.squares.forEach((square) => { + square.addEventListener("mousedown", () => { + if (square.id === state.values.hitPosition) { + state.values.result++; + state.view.score.textContent = state.values.result; + state.values.hitPosition = null; + playSound("hit"); + } + }); + }); +} + +function initialize() { + addListenerHitBox(); +} + +initialize(); diff --git a/Games/Detona/src/styles/main.css b/Games/Detona/src/styles/main.css new file mode 100644 index 0000000000..ade1402bdb --- /dev/null +++ b/Games/Detona/src/styles/main.css @@ -0,0 +1,48 @@ +.container { + display: flex; + flex-direction: column; + height: 100vh; + background-image: url("../images/wall.png"); +} + +.menu { + display: flex; + justify-content: space-evenly; + align-items: center; + + height: 90px; + width: 100%; + background-color: #000000; + color: #ffffff; + border-bottom: 5px solid #ffd700; +} + +.panel { + margin-top: 1rem; + display: flex; + align-items: center; + justify-content: center; +} + +.square { + height: 150px; + width: 150px; + border: 1px solid #000000; + background-color: #1aeaa5; +} + +.enemy { + background-image: url("../images/ralph.png"); + background-size: cover; +} + +.menu-lives { + display: flex; + align-items: center; + justify-content: center; +} + +.menu-time h2:nth-child(2), +.menu-score h2:nth-child(2) { + margin-top: 1rem; +} diff --git a/Games/Detona/src/styles/reset.css b/Games/Detona/src/styles/reset.css new file mode 100644 index 0000000000..9395805ea8 --- /dev/null +++ b/Games/Detona/src/styles/reset.css @@ -0,0 +1,7 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + /* font-family: "Bebas Neue", sans-serif; */ + font-family: "Press Start 2P", cursive; +} diff --git a/Games/Elephant_ant_man/README.md b/Games/Elephant_ant_man/README.md new file mode 100644 index 0000000000..cc4ad72277 --- /dev/null +++ b/Games/Elephant_ant_man/README.md @@ -0,0 +1,34 @@ +# **Elephant_ant_man** + +--- + +
+ +## **Description 📃** + +It is a cuter version of the classic game rock paper scissors. It is inspired by the famous bedtime story the ant and the elephant where the ant despite his small size teaches a lesson to the elephant. +- + +## **Functionalities 🎮** + +->the user can select one of the three choices and a message will display on the screen if the user won or lost. if the user lost the computer gets the point and vice versa. +- +
+ +## **How to play? 🕹️** + +click on any of the three images +the computer will randomly select a choice of his own +score will be updated as you won or lost +its a endless game enjoy playing + +
+ +## **Screenshots 📸** + +
+ +[image](screenshot.png) + + +
diff --git a/Games/Elephant_ant_man/ant.jpg b/Games/Elephant_ant_man/ant.jpg new file mode 100644 index 0000000000..10960981a5 Binary files /dev/null and b/Games/Elephant_ant_man/ant.jpg differ diff --git a/Games/Elephant_ant_man/boyy.jpg b/Games/Elephant_ant_man/boyy.jpg new file mode 100644 index 0000000000..fa149e3051 Binary files /dev/null and b/Games/Elephant_ant_man/boyy.jpg differ diff --git a/Games/Elephant_ant_man/elephant.jpg b/Games/Elephant_ant_man/elephant.jpg new file mode 100644 index 0000000000..732c04f26a Binary files /dev/null and b/Games/Elephant_ant_man/elephant.jpg differ diff --git a/Games/Elephant_ant_man/index.html b/Games/Elephant_ant_man/index.html new file mode 100644 index 0000000000..3aca5aac43 --- /dev/null +++ b/Games/Elephant_ant_man/index.html @@ -0,0 +1,37 @@ + + + + + + ROCK,PAPER and SCISSORS + + + +

Ant, Boy and Elephant

+
+
+ +
+
+ +
+
+ +
+
+
+
+

0

+

You

+
+
+

0

+

Computer

+
+
+
+

Play your move!

+
+ + + \ No newline at end of file diff --git a/Games/Elephant_ant_man/screenshot.png b/Games/Elephant_ant_man/screenshot.png new file mode 100644 index 0000000000..425431d04f Binary files /dev/null and b/Games/Elephant_ant_man/screenshot.png differ diff --git a/Games/Elephant_ant_man/script.js b/Games/Elephant_ant_man/script.js new file mode 100644 index 0000000000..6d49854750 --- /dev/null +++ b/Games/Elephant_ant_man/script.js @@ -0,0 +1,64 @@ +let userScore=0; +let compScore=0; + +const choices = document.querySelectorAll(".choice"); +const msg=document.querySelector("#msg"); +const userScorePara=document.querySelector("#userscore"); +const compScorePara=document.querySelector("#compscore"); + +const genCompChoice = () => { + const options=["Boy","Elephant","Ant"]; + const randIdx=Math.floor(Math.random()*3); + return options[randIdx]; +} +const drawGame=()=>{ + console.log("It's a tie. Play again!") + msg.innerText="It's a tie. Play again!" + msg.style.backgroundColor="rgb(109, 130, 100)" +} +const showWinner=(userWin, userChoice, compChoice)=>{ + if(userWin){ + console.log("Congratulations! You won.") + userScore++; + userScorePara.innerText =userScore; + msg.innerText=`Congratulations! You won. ${userChoice} beats the ${compChoice}` + msg.style.backgroundColor="green"; + } + else{ + console.log("Sorry you lost, better luck next time.") + compScore++; + compScorePara.innerText=compScore; + msg.innerText=`Sorry you lost, better luck next time. ${userChoice} lost to the ${compChoice}` + msg.style.backgroundColor="red"; + } +} + +const playGame= (userChoice)=>{ + console.log("userchoice = ", userChoice); + const compChoice=genCompChoice(); + console.log("compChoice= ", compChoice); + + if (userChoice==compChoice){ + drawGame(); + }else{ + let userWin=true; + if(userChoice=="Boy"){ + userWin=compChoice==="Elephant"? false:true; + } + else if(userChoice=="Elephant"){ + userWin=compChoice==="Ant"? false:true; + } + else{ + userWin=compChoice==="Boy"? false:true; + } + showWinner(userWin, userChoice, compChoice); + + } +}; + +choices.forEach((choice)=>{ + choice.addEventListener("click",()=>{ + const userChoice= choice.getAttribute("id"); + playGame(userChoice); + }); +}); \ No newline at end of file diff --git a/Games/Elephant_ant_man/style.css b/Games/Elephant_ant_man/style.css new file mode 100644 index 0000000000..80aa99d53a --- /dev/null +++ b/Games/Elephant_ant_man/style.css @@ -0,0 +1,64 @@ +*{ + margin:0; + padding:0; + text-align: center; + background-color: rgb(217, 251, 223); +} +h1 { + background-color: rgb(109, 130, 100); + color: azure; + height: 80px; + line-height: 80px; + font: 80px; + +} +.choice:hover{ + opacity: 0.5; + cursor:grab; +} +.choice{ + height: 200px; + width: 200px; + border-radius: 50%; +} +img{ + height:175px; + width:175px; + border-radius: 50%; + object-fit: cover; + +} +.choices{ + display:flex; + justify-content: center; + align-items: center; + gap:50px; + margin-top: 90px; +} + +.scoreboard{ + display:flex; + justify-content: center; + align-items: center; + gap:100px; + margin-top:40px; + font-size:40px; + color:rgb(53, 76, 53) +} +#userscore,#compscore{ + font-size:60px; +} +#msg{ + background-color: rgb(109, 130, 100); + color:azure; + font-size:35px; + font-style:italic; + height:60px; + display:inline; + padding: 20px; + border-radius: 1rem; + +} +.msgcontainer{ + margin-top: 60px; +} diff --git a/Games/Hangman_Game/README.md b/Games/Hangman_Game/README.md new file mode 100644 index 0000000000..3f104604e2 --- /dev/null +++ b/Games/Hangman_Game/README.md @@ -0,0 +1,37 @@ +# **Game_Name** + +Hangman Game + +
+ +## **Description 📃** + +- **Hangman Game** is an interactive game where you have to guess the word in six chances. + +## **functionalities 🎮** + +- You have to select one category ,on the basis of that category you have to guess the word. +- You have six chances in which you have guess,when you choose wrong letter then one by one the part of the man form. +- If you not able to guess till the man form then the game ends. +
+ +## **How to play? 🕹️** + +- First choose the option whose word you want to guess. +- Guess the word within six chances. +- If the guess is correct you win else lose. +- Then play again . + +
+ +## **Screenshots 📸** + +
+ +![image](../../assets/images/Hangman_Game.png) + + +
+ + + \ No newline at end of file diff --git a/Games/Hangman_Game/index.html b/Games/Hangman_Game/index.html new file mode 100644 index 0000000000..b728f07431 --- /dev/null +++ b/Games/Hangman_Game/index.html @@ -0,0 +1,29 @@ + + + + + + Hangman Game + + + + + + +
+
+
+
+ +
+
+ +
+
+ + + + diff --git a/Games/Hangman_Game/script.js b/Games/Hangman_Game/script.js new file mode 100644 index 0000000000..e83049e983 --- /dev/null +++ b/Games/Hangman_Game/script.js @@ -0,0 +1,248 @@ +//Initial References +const letterContainer = document.getElementById("letter-container"); +const optionsContainer = document.getElementById("options-container"); +const userInputSection = document.getElementById("user-input-section"); +const newGameContainer = document.getElementById("new-game-container"); +const newGameButton = document.getElementById("new-game-button"); +const canvas = document.getElementById("canvas"); +const resultText = document.getElementById("result-text"); + +//Options values for buttons +let options = { + fruits: [ + "Apple", + "Blueberry", + "Mandarin", + "Pineapple", + "Pomegranate", + "Watermelon", + "Banana", + "Cherry", + "Avocado", + "Peach", + ], + animals: ["Elephant", "Rhinoceros", "Squirrel", "Panther", "Tiger", "Zebra","Monkey","Horse","Goat","Eagle"], + countries: [ + "India", + "Hungary", + "Kyrgyzstan", + "Switzerland", + "Zimbabwe", + "Dominica", + "Spain", + "Tibet", + "Algeria", + "Cyprus", + ], + colors: ["Turquoise","Beige","Azure","lavender","Yellow","Ivory","Coral","Indigo","Maroon","Emerald"], +}; + +//count +let winCount = 0; +let count = 0; + +let chosenWord = ""; + +//Display option buttons +const displayOptions = () => { + optionsContainer.innerHTML += `

Please Select An Option

`; + let buttonCon = document.createElement("div"); + for (let value in options) { + buttonCon.innerHTML += ``; + } + optionsContainer.appendChild(buttonCon); +}; + +//Block all the Buttons +const blocker = () => { + let optionsButtons = document.querySelectorAll(".options"); + let letterButtons = document.querySelectorAll(".letters"); + //disable all options + optionsButtons.forEach((button) => { + button.disabled = true; + }); + + //disable all letters + letterButtons.forEach((button) => { + button.disabled.true; + }); + newGameContainer.classList.remove("hide"); +}; + +//Word Generator +const generateWord = (optionValue) => { + let optionsButtons = document.querySelectorAll(".options"); + //If optionValur matches the button innerText then highlight the button + optionsButtons.forEach((button) => { + if (button.innerText.toLowerCase() === optionValue) { + button.classList.add("active"); + } + button.disabled = true; + }); + + //initially hide letters, clear previous word + letterContainer.classList.remove("hide"); + userInputSection.innerText = ""; + + let optionArray = options[optionValue]; + //choose random word + chosenWord = optionArray[Math.floor(Math.random() * optionArray.length)]; + chosenWord = chosenWord.toUpperCase(); + + //replace every letter with span containing dash + let displayItem = chosenWord.replace(/./g, '_'); + + //Display each element as span + userInputSection.innerHTML = displayItem; +}; + +//Initial Function (Called when page loads/user presses new game) +const initializer = () => { + winCount = 0; + count = 0; + + //Initially erase all content and hide letteres and new game button + userInputSection.innerHTML = ""; + optionsContainer.innerHTML = ""; + letterContainer.classList.add("hide"); + newGameContainer.classList.add("hide"); + letterContainer.innerHTML = ""; + + //For creating letter buttons + for (let i = 65; i < 91; i++) { + let button = document.createElement("button"); + button.classList.add("letters"); + //Number to ASCII[A-Z] + button.innerText = String.fromCharCode(i); + //character button click + button.addEventListener("click", () => { + let charArray = chosenWord.split(""); + let dashes = document.getElementsByClassName("dashes"); + //if array contains clciked value replace the matched dash with letter else dram on canvas + if (charArray.includes(button.innerText)) { + charArray.forEach((char, index) => { + //if character in array is same as clicked button + if (char === button.innerText) { + //replace dash with letter + dashes[index].innerText = char; + //increment counter + winCount += 1; + //if winCount equals word lenfth + if (winCount == charArray.length) { + resultText.innerHTML = `

You Win :)

The word was ${chosenWord}

`; + //block all buttons + blocker(); + } + } + }); + } else { + //lose count + count += 1; + //for drawing man + drawMan(count); + //Count==6 because head,body,left arm, right arm,left leg,right leg + if (count == 6) { + resultText.innerHTML = `

You Lose :(

The word was ${chosenWord}

`; + blocker(); + } + } + //disable clicked button + button.disabled = true; + }); + letterContainer.append(button); + } + + displayOptions(); + //Call to canvasCreator (for clearing previous canvas and creating initial canvas) + let { initialDrawing } = canvasCreator(); + //initialDrawing would draw the frame + initialDrawing(); +}; + +//Canvas +const canvasCreator = () => { + let context = canvas.getContext("2d"); + context.beginPath(); + context.strokeStyle = "#000"; + context.lineWidth = 2; + + //For drawing lines + const drawLine = (fromX, fromY, toX, toY) => { + context.moveTo(fromX, fromY); + context.lineTo(toX, toY); + context.stroke(); + }; + + const head = () => { + context.beginPath(); + context.arc(70, 30, 10, 0, Math.PI * 2, true); + context.stroke(); + }; + + const body = () => { + drawLine(70, 40, 70, 80); + }; + + const leftArm = () => { + drawLine(70, 50, 50, 70); + }; + + const rightArm = () => { + drawLine(70, 50, 90, 70); + }; + + const leftLeg = () => { + drawLine(70, 80, 50, 110); + }; + + const rightLeg = () => { + drawLine(70, 80, 90, 110); + }; + + //initial frame + const initialDrawing = () => { + //clear canvas + context.clearRect(0, 0, context.canvas.width, context.canvas.height); + //bottom line + drawLine(10, 130, 130, 130); + //left line + drawLine(10, 10, 10, 131); + //top line + drawLine(10, 10, 70, 10); + //small top line + drawLine(70, 10, 70, 20); + }; + + return { initialDrawing, head, body, leftArm, rightArm, leftLeg, rightLeg }; +}; + +//draw the man +const drawMan = (count) => { + let { head, body, leftArm, rightArm, leftLeg, rightLeg } = canvasCreator(); + switch (count) { + case 1: + head(); + break; + case 2: + body(); + break; + case 3: + leftArm(); + break; + case 4: + rightArm(); + break; + case 5: + leftLeg(); + break; + case 6: + rightLeg(); + break; + default: + break; + } +}; + +//New Game +newGameButton.addEventListener("click", initializer); +window.onload = initializer; \ No newline at end of file diff --git a/Games/Hangman_Game/style.css b/Games/Hangman_Game/style.css new file mode 100644 index 0000000000..eb4726f270 --- /dev/null +++ b/Games/Hangman_Game/style.css @@ -0,0 +1,121 @@ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + body { + background-color: #0f8d20; + } + .container { + font-size: 16px; + background-color: #ffffff; + width: 90vw; + max-width: 34em; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + padding: 3em; + border-radius: 0.6em; + box-shadow: 0 1.2em 2.4em rgba(111, 85, 0, 0.25); + } + #options-container { + text-align: center; + } + #options-container div { + width: 100%; + display: flex; + justify-content: space-between; + margin: 1.2em 0 2.4em 0; + } + #options-container button { + padding: 0.6em 1.2em; + border: 3px solid #000000; + background-color: #ffffff; + color: #000000; + border-radius: 0.3em; + text-transform: capitalize; + cursor: pointer; + } + #options-container button:disabled { + border: 3px solid #808080; + color: #808080; + background-color: #efefef; + } + #options-container button.active { + background-color: #486823; + border: 3px solid #000000; + color: #fff; + } + .letter-container { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.6em; + } + #letter-container button { + height: 2.4em; + width: 2.4em; + border-radius: 0.3em; + background-color: #ffffff; + cursor: pointer; + } + .new-game-popup { + background-color: #ffffff; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-radius: 0.6em; + } + + #user-input-section { + display: flex; + justify-content: center; + font-size: 1.8em; + margin: 0.6em 0 1.2em 0; + } + canvas { + display: block; + margin: auto; + border: 10px solid #246346; + border-radius: 10px; + } + .hide { + display: none; + } + #result-text h2 { + font-size: 1.8em; + text-align: center; + } + #result-text p { + font-size: 1.25em; + margin: 1em 0 2em 0; + } + #result-text span { + font-weight: 600; + } + #new-game-button { + font-size: 1.25em; + padding: 0.5em 1em; + background-color: #3a990a; + border: 3px solid #000000; + color: #fff; + border-radius: 0.2em; + cursor: pointer; + } + .win-msg { + color: #088349; + } + .lose-msg { + color: #a52525; + } + \ No newline at end of file diff --git a/Games/Number Guessing Game/README.md b/Games/Number Guessing Game/README.md new file mode 100644 index 0000000000..e1ab3b738a --- /dev/null +++ b/Games/Number Guessing Game/README.md @@ -0,0 +1,29 @@ +# Project Title + +Number Guessing Game + +## Features + +- Interactive Game +- One-Player Mode + +## How to Play + +1. Start the Game: + +- Open the game in your web browser. + +2. Make Your Moves: + +- Enter random number between 1 to 100 + +3. Win the Game: + +- Enter number until you guessed right + + +## Technologies Used + +- HTML +- CSS +- JavaScript \ No newline at end of file diff --git a/Games/Number Guessing Game/index.html b/Games/Number Guessing Game/index.html new file mode 100644 index 0000000000..a194fb407d --- /dev/null +++ b/Games/Number Guessing Game/index.html @@ -0,0 +1,23 @@ + + + + + + + Number Guess in Js + + + +
+
Guess a number from 1 to 100
+

+
+ + +
+

You have 10 chances

+
+ + + + \ No newline at end of file diff --git a/Games/Number Guessing Game/script.js b/Games/Number Guessing Game/script.js new file mode 100644 index 0000000000..3739d60197 --- /dev/null +++ b/Games/Number Guessing Game/script.js @@ -0,0 +1,47 @@ +const input = document.querySelector("input"), + guess = document.querySelector(".guess"), + checkButton = document.querySelector("button"), + remainChances = document.querySelector(".chances"); + +input.focus(); + +let randomNum = Math.floor(Math.random() * 100); +chance = 10; + +checkButton.addEventListener("click", () => { + // Decrement the chance variable on every click + chance--; + let inputValue = input.value; + // Check if the input value is equal to the random number + if (inputValue == randomNum) { + // Update guessed number, disable input, check button text and color. + [guess.textContent, input.disabled] = ["Congratulations!!", true]; + [checkButton.textContent, guess.style.color] = ["Replay", "#333"]; + checkButton.addEventListener("click",()=>{ + window.location.reload(); + + }) + //Check if input value is > random number and within 1-99 range. + } else if (inputValue > randomNum && inputValue < 100) { + // Update the guess text and remaining chances + [guess.textContent, remainChances.textContent] = ["Your guess is high", chance]; + guess.style.color = "#333"; + //Check if input value is < random number and within 1-99 range. + } else if (inputValue < randomNum && inputValue > 0) { + // Update the guessed number text and remaining chances + [guess.textContent, remainChances.textContent] = ["Your guess is low", chance]; + } else { + // Update the guessed number text, color and remaining chances + [guess.textContent, remainChances.textContent] = ["Your number is invalid", chance]; + guess.style.color = "#DE0611"; + } + if (chance == 0) { + //Update check button, disable input, and clear input value. + // Update guessed number text and color to indicate user loss. + [checkButton.textContent, input.disabled, inputValue] = ["Replay", true, ""]; + [guess.textContent, guess.style.color] = ["You lost the game", "#DE0611"]; + } + if (chance < 0) { + window.location.reload(); + } +}); \ No newline at end of file diff --git a/Games/Number Guessing Game/style.css b/Games/Number Guessing Game/style.css new file mode 100644 index 0000000000..d66652b350 --- /dev/null +++ b/Games/Number Guessing Game/style.css @@ -0,0 +1,128 @@ +/* Import Google font - Poppins */ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + min-height: 100vh; + min-width: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-image: url(bg.jpg); + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.wrapper { + padding: 30px 40px; + width: 50vw; + border-radius: 12px; + background: #f0def5; + text-align: center; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); +} +.wrapper header { + font-size: 25px; + font-weight: 500; + color: #541d5a; + text-transform: capitalize; + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: normal; + text-shadow: 1px 1px 0px rgba(0,0,0,0.5); +} +.wrapper p { + font-size: 18px; + color: #2c0533; +} +.wrapper .input-field { + display: flex; + justify-content: center; + gap: 20px; + margin: 25px 0; +} +.input-field input, +.input-field button { + height: 50px; + width: calc(100% / 2 - 20px); + outline: none; + padding: 0 20px; + border-radius: 8px; + font-size: 18px; +} +.input-field input { + text-align: center; + color: #2b272d; + background-color: rgba(228, 199, 227, 0.8); + width: 110px; + border: 1px solid #aaa; + box-shadow: 0.5px 0.5px 1px black; +} + +.input-field input:hover { + text-align: center; + color: #2b272d; + background-color: rgba(228, 199, 227, 0.5); + width: 110px; + box-shadow: 0.5px 0.5px 1px black; + border: 1px solid #000000; +} + +input::-webkit-inner-spin-button, +input::-webkit-outer-spin-button { + display: none; +} +.input-field input:disabled { + cursor: not-allowed; +} +.input-field button { + border: none; + background: #8e26a0; + color: #f0d8f1; + font-size: 20px; + cursor: pointer; + transition: 0.3s; +} + +.input-field button:hover { + border: none; + color: #711c81; + background-color: #e2b9e3; + box-shadow: 1px 1px 1px black; + cursor: pointer; + transition: 0.3s; +} + +.input-field button:active { + transform: scale(0.97); +} + + +@media screen and (max-width:600px) { +.wrapper { + padding: 30px 40px; + width: 60vw; + border-radius: 12px; + background: #f0def5; + text-align: center; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); + } +} \ No newline at end of file diff --git a/Games/Riddle_game/index.html b/Games/Riddle_game/index.html new file mode 100644 index 0000000000..567aeb05c6 --- /dev/null +++ b/Games/Riddle_game/index.html @@ -0,0 +1,19 @@ + + + + + + Riddle Game + + + +
+

Riddle Game

+

+ + +

+
+ + + diff --git a/Games/Riddle_game/script.js b/Games/Riddle_game/script.js new file mode 100644 index 0000000000..edfa5aa2c6 --- /dev/null +++ b/Games/Riddle_game/script.js @@ -0,0 +1,59 @@ +const riddles = [ + { + question: "I speak without a mouth and hear without ears. I have no body, but I come alive with wind. What am I?", + answer: "echo" + }, + { + question: "You measure my life in hours and I serve you by expiring. I die once I'm devoured. What am I?", + answer: "candle" + }, + { + question: "I have cities, but no houses. I have mountains, but no trees. I have water, but no fish. What am I?", + answer: "map" + }, + { + question: "What is seen in the middle of March and April that can’t be seen at the beginning or end of either month?", + answer: "r" + }, + { + question: "You see a boat filled with people, yet there isn’t a single person on board. How is that possible?", + answer: "all the people were married" + }, + { + question: "What word in the English language does the following: the first two letters signify a male, the first three letters signify a female, the first four letters signify a great, while the entire world signifies a great woman. What is the word?", + answer: "heroine" + }, + { + question: "I have keys but can’t open locks. I have space but no room. You can enter, but can’t go outside. What am I?", + answer: "keyboard" + }, + { + question: "What has many hearts but no other organs?", + answer: "deck of cards" + }, + { + question: "The more of this there is, the less you see. What is it?", + answer: "darkness" + }, + { + question: "What can travel around the world while staying in a corner?", + answer: "stamp" + } +]; + +let currentRiddle = riddles[Math.floor(Math.random() * riddles.length)]; + +document.getElementById("riddle").textContent = currentRiddle.question; + +function checkAnswer() { + const userAnswer = document.getElementById("answer").value.trim().toLowerCase(); + const result = document.getElementById("result"); + + if (userAnswer === currentRiddle.answer.toLowerCase()) { + result.textContent = "Correct! Well done!"; + result.style.color = "green"; + } else { + result.textContent = "Wrong answer. Try again!"; + result.style.color = "red"; + } +} diff --git a/Games/Riddle_game/style.css b/Games/Riddle_game/style.css new file mode 100644 index 0000000000..21c463ffb1 --- /dev/null +++ b/Games/Riddle_game/style.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +#riddle { + font-size: 1.2em; + margin-bottom: 20px; +} + +#answer { + padding: 10px; + width: 80%; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + border: none; + background-color: #007BFF; + color: white; + border-radius: 5px; + transition: background-color 0.3s; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; + font-size: 1.2em; +} diff --git a/Games/Subway_Surfers/README.md b/Games/Subway_Surfers/README.md new file mode 100644 index 0000000000..65cad9c37d --- /dev/null +++ b/Games/Subway_Surfers/README.md @@ -0,0 +1,65 @@ +# Subway Surfers GG Script + +## Overview + +The Subway Surfers GG Script is a user-friendly browser extension designed to enhance your Subway Surfers gaming experience. This script allows you to modify in-game resources and unlock features with ease. The functionalities include modifying coins, modifying keys, and unlocking all characters, providing you with unlimited access to the game’s content. + +## Features + +### Modify Coins +- **Description**: Change your current coin count to a specified amount. +- **Usage**: Input your current number of coins, and the script will set the coin count to a high value (e.g., 999,999). + +### Modify Keys +- **Description**: Change your current key count to a specified amount. +- **Usage**: Input your current number of keys, and the script will set the key count to a high value (e.g., 9,999). + +### Unlock All Characters +- **Description**: Instantly unlock all characters in the game. +- **Usage**: Allows access to all characters without needing to unlock them sequentially. + +## Installation + +1. Clone or download the repository. +2. Open your browser and navigate to the extensions page. +3. Enable "Developer mode". +4. Click "Load unpacked" and select the directory containing the downloaded files. + +## Usage + +1. Open the extension by clicking on the Subway Surfers GG Script icon in your browser. +2. Choose the desired option: + - **Modify Coins**: Enter your current amount of coins when prompted. + - **Modify Keys**: Enter your current amount of keys when prompted. + - **Unlock All Characters**: Click to unlock all characters instantly. +3. Follow the prompts and alerts to complete the modifications. + +## Files + +### `index.html` + +The HTML file providing the structure of the user interface. + +### `styles.css` + +The CSS file for styling the user interface. + +### `script.js` + +The JavaScript file containing the functionality for modifying the game’s resources. + +### `manifest.json` + +The manifest file required for the browser extension, specifying metadata and permissions. + +## Contributing + +Contributions are welcome! Please feel free to submit a pull request. + +## License + +This project is for educational purposes only. Use at your own risk. + +--- + +By using this script, you acknowledge that it is for educational purposes only and should not be used to cheat in the game. diff --git a/Games/Subway_Surfers/index.html b/Games/Subway_Surfers/index.html new file mode 100644 index 0000000000..3d4632c549 --- /dev/null +++ b/Games/Subway_Surfers/index.html @@ -0,0 +1,17 @@ + + + + + + Subway Surfers GG Script + + + +

Subway Surfers GG Script

+ + + + + + + diff --git a/Games/Subway_Surfers/manifest.json b/Games/Subway_Surfers/manifest.json new file mode 100644 index 0000000000..17068f8b34 --- /dev/null +++ b/Games/Subway_Surfers/manifest.json @@ -0,0 +1,17 @@ +{ + "manifest_version": 2, + "name": "Subway Surfers GG Script", + "version": "1.0", + "description": "A script to modify coins, keys, and unlock characters in Subway Surfers for educational purposes.", + "icons": { + "48": "icon.png" + }, + "browser_action": { + "default_popup": "index.html", + "default_icon": "icon.png" + }, + "permissions": [ + "activeTab" + ] + } + \ No newline at end of file diff --git a/Games/Subway_Surfers/script.js b/Games/Subway_Surfers/script.js new file mode 100644 index 0000000000..13bc3e5c7e --- /dev/null +++ b/Games/Subway_Surfers/script.js @@ -0,0 +1,56 @@ +// Function to modify coins +function modifyCoins() { + let coins = prompt("Enter your current amount of coins:"); + coins = parseInt(coins); + if (isNaN(coins)) { + alert("Invalid number. Please try again."); + return; + } + let newCoins = 999999; + alert(`Coins modified successfully to ${newCoins}!`); + } + + // Function to modify keys + function modifyKeys() { + let keys = prompt("Enter your current amount of keys:"); + keys = parseInt(keys); + if (isNaN(keys)) { + alert("Invalid number. Please try again."); + return; + } + let newKeys = 9999; + alert(`Keys modified successfully to ${newKeys}!`); + } + + // Function to unlock all characters + function unlockAllCharacters() { + alert("All characters unlocked!"); + } + + // Function to handle button clicks + function handleButtonClick(event) { + const buttonId = event.target.id; + switch (buttonId) { + case "modify-coins": + modifyCoins(); + break; + case "modify-keys": + modifyKeys(); + break; + case "unlock-characters": + unlockAllCharacters(); + break; + case "exit": + alert("Exiting script..."); + break; + default: + break; + } + } + + // Add event listeners to buttons + document.getElementById("modify-coins").addEventListener("click", handleButtonClick); + document.getElementById("modify-keys").addEventListener("click", handleButtonClick); + document.getElementById("unlock-characters").addEventListener("click", handleButtonClick); + document.getElementById("exit").addEventListener("click", handleButtonClick); + \ No newline at end of file diff --git a/Games/Subway_Surfers/styles.css b/Games/Subway_Surfers/styles.css new file mode 100644 index 0000000000..ae365627e9 --- /dev/null +++ b/Games/Subway_Surfers/styles.css @@ -0,0 +1,21 @@ +body { + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #f0f0f0; + } + + button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + } + + h1 { + margin-bottom: 20px; + } + \ No newline at end of file diff --git a/Games/Tic_Tac_Toe_Game/Readme.md b/Games/Tic_Tac_Toe_Game/Readme.md new file mode 100644 index 0000000000..12e1608e33 --- /dev/null +++ b/Games/Tic_Tac_Toe_Game/Readme.md @@ -0,0 +1,28 @@ +# Tic Tac Toe + +## Description 📃 +This is a classic Tic Tac Toe game implemented with additional functionalities such as success music on winning, music on game drawn, and sound on each click of turn. The game features a user-friendly interface and supports both single-player and two-player modes. + +## Functionalities 🎮 +- Play against the another player +- Success music on winning +- Music on game drawn +- Sound on each click of turn +- Recognizes winning combinations horizontally, vertically, and diagonally +- Attractive UI + +## How to Play? 🕹️ +1. Launch the game. +2. Click on the desired cell to place your symbol (X or O). +3. Alternate turns with your opponent. +4. The first player to achieve three of their symbols in a row wins. +5. If all cells are filled and no player has three symbols in a row, the game is drawn. + +## Screenshots 📸 + +![Tic_Tac_Toe_Game](https://github.com/RazaAli313/GameZone/assets/136004622/bd0b8de4-9c72-4a53-9f38-e01e67057ba5) + + +## Working Video 📹 +Uploading Tic Tac Toe Game.mp4… + diff --git a/Games/Tic_Tac_Toe_Game/ding.mp3 b/Games/Tic_Tac_Toe_Game/ding.mp3 new file mode 100644 index 0000000000..9684c72a4f Binary files /dev/null and b/Games/Tic_Tac_Toe_Game/ding.mp3 differ diff --git a/Games/Tic_Tac_Toe_Game/excited.gif b/Games/Tic_Tac_Toe_Game/excited.gif new file mode 100644 index 0000000000..ac0ecac27e Binary files /dev/null and b/Games/Tic_Tac_Toe_Game/excited.gif differ diff --git a/Games/Tic_Tac_Toe_Game/gameover.mp3 b/Games/Tic_Tac_Toe_Game/gameover.mp3 new file mode 100644 index 0000000000..34033cdc49 Binary files /dev/null and b/Games/Tic_Tac_Toe_Game/gameover.mp3 differ diff --git a/Games/Tic_Tac_Toe_Game/index.html b/Games/Tic_Tac_Toe_Game/index.html new file mode 100644 index 0000000000..57004c4b40 --- /dev/null +++ b/Games/Tic_Tac_Toe_Game/index.html @@ -0,0 +1,42 @@ + + + + + + + + Tic Tac Toe Game + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Welcome to Tic Tac Toe

+
+ Turn for X + +
+
+ Congratulations Gif +
+
+
+