Merge pull request #1023 from JoelCoyos/guess-the-sequence

Guess the sequence Game added
ChromeGaming · May 28, 2024 · 95ee1f0 · 95ee1f0
2 parents 7c6db92 + 5f7be62
commit 95ee1f0
Show file tree

Hide file tree

Showing 6 changed files with 478 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -100,6 +100,7 @@ ________________________________________________________________________________
 |  41   | [Galaxy Rider](./SinglePlayer%20-%20Games/Galaxy_Rider) |
 |  42   | [Geek Tac Toe](./SinglePlayer%20-%20Games/GeekTacToe) |
 |  43   | [Guess The Number](./SinglePlayer%20-%20Games/Guess%20The%20Number) |
+|  43   | [Guess The Sequence](./SinglePlayer%20-%20Games/Guess%20The%20Sequence) |
 |  44   | [Hangman Game](./SinglePlayer%20-%20Games/Hangman%20Game)   |
 |  45   | [HexGL Master](./SinglePlayer%20-%20Games/HexGL-master)   |
 |  46   | [Hover Board Effect](./SinglePlayer%20-%20Games/Hover_Board_Effect) |

diff --git a/SinglePlayer - Games/Banner - image/guessthesequence.png b/SinglePlayer - Games/Banner - image/guessthesequence.png
diff --git a/SinglePlayer - Games/Guess The Sequence/index.html b/SinglePlayer - Games/Guess The Sequence/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess the Sequence</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+</head>
+<body>
+<h1>Guess the sequence</h1>
+<div id = "menu">
+    <div class="card">
+        <p>The goal of the game is to attempt to guess the secret code generated by the computer.</p>  
+        <p>Black pegs for correct colors in the correct positions</p> 
+        <p>   White pegs for correct colors in incorrect positions</p> 
+            <p>   Grey for colors that do not appear on the sequence</p> 
+        <label for="difficulty"> Select Difficulty:</label>
+        <select id ="difficulty">
+            <option value="Easy">Easy</option>
+            <option value="Medium">Medium</option>
+            <option value ="Hard">Hard</option>
+        </select>
+            <button class="button" onclick="newGame()" type="button">New Game</button>
+    </div>
+
+</div>
+<div id="game">
+    <div id="colors">
+    </div>
+    <div id="guesses">
+        <div class = "guess">
+        </div>
+    </div>
+
+    <div id="results">
+
+    </div>
+</div>
+<div id="check">
+    <label id="attempsLeft"></label>
+    <button class="button" onclick="checkAnswer()" type="button">Check Guess</button>
+</div>
+<div id="confetti-container">
+    <div class="card">
+      <p id="resultText">Congratulations, you won!</p>
+        <button class="button" onclick="wonButton()" type="button">New game</button>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/SinglePlayer - Games/Guess The Sequence/script.js b/SinglePlayer - Games/Guess The Sequence/script.js
@@ -0,0 +1,218 @@
+const colors = ['#F44336','#4CAF50','#03A9F4','#FFEB3B',"#673AB7","#795548","#FF5722","#212121"]
+let sequence = []
+let numberOfColors=0
+let sequenceSize =0
+let maxAttemps=0
+let currentAttemp = 0
+let currentGuess = []
+let currentGuessDots=[]
+let currentGuessIndex=0
+
+let confettiInterval
+
+function GenerateSequence()
+{
+    for(let i = 0;i<sequenceSize;i++)
+    {
+        randomColor = Math.floor(Math.random()*numberOfColors)
+        sequence.push(colors[randomColor])
+    }
+}
+
+function createGuessColors()
+{
+    for(let i = 0;i<numberOfColors;i++)
+    {
+        var newGuessColor = document.createElement("span")
+        newGuessColor.classList.add("dot");
+        newGuessColor.style.backgroundColor = colors[i]
+        newGuessColor.setAttribute("color",colors[i])
+        newGuessColor.addEventListener("click",function()
+        {
+            clickGuessColor(this.getAttribute("color"))
+        })
+        var guessDiv = document.getElementById('colors')
+        guessDiv.appendChild(newGuessColor)
+    }
+}
+
+function createGuessSequence()
+{
+    var newGuessSequence = document.createElement("div")
+    newGuessSequence.classList.add("guess")
+    for(let i = 0;i<sequenceSize;i++)
+    {
+        var guess = document.createElement("span")
+        guess.classList.add("dot")
+        guess.style.backgroundColor="#313b4b";
+        guess.setAttribute("index",i)
+        currentGuessDots.push(guess)
+        newGuessSequence.appendChild(guess)
+    }
+    var guessesDiv = document.getElementById("guesses")
+    guessesDiv.appendChild(newGuessSequence)
+}
+
+function clickGuessColor(color)
+{
+    currentGuess.push(color)
+    currentGuessDots[currentGuessIndex].style.backgroundColor = color
+    currentGuessIndex++
+}
+
+function checkAnswer()
+{
+    var newResultSequence = document.createElement("div")
+    newResultSequence.classList.add("result")
+    won = true
+    let correctColorPosition = Array(sequenceSize)
+    for(let i =0;i<sequenceSize;i++)
+    {
+        if(currentGuess[i]==sequence[i])
+        {
+            correctColorPosition[i] = currentGuess[i]
+        }
+    }
+
+    for(let i = 0;i<sequenceSize;i++)
+    {
+        var guess = document.createElement("span")
+        guess.classList.add("dot")
+        let answerColor
+        let currentColorGuess = currentGuess[i]
+        let currentColorGuesses
+        if(currentGuess[i]==sequence[i])
+            answerColor = "black"
+        else if (sequence.includes(currentGuess[i]))
+        {
+            won = false
+            numberOfColorInSequence = sequence.filter(element => element ==currentGuess[i]).length
+            if(correctColorPosition.filter(element => element ==currentGuess[i]).length < numberOfColorInSequence)
+            {
+                let k = 0
+                for(let j=0;j<i;j++)
+                {
+                    if(currentGuess[j]==currentGuess[i])
+                    {
+                        k++
+                    }
+                }
+                if(k < numberOfColorInSequence)
+                    answerColor = "white"
+                else answerColor = "grey"
+            }
+            else 
+            {
+                answerColor = "grey"
+            }
+        }
+        else 
+        {
+            answerColor = "grey"
+            won = false
+        }
+        guess.style.backgroundColor=answerColor
+
+        newResultSequence.appendChild(guess)
+    }
+    if(!won)
+    {
+        var guessesDiv = document.getElementById("results")
+        guessesDiv.appendChild(newResultSequence)
+        currentAttemp++;
+        document.getElementById("attempsLeft").innerText="Attempts left: " + (maxAttemps - currentAttemp).toString() + "  "
+        if(currentAttemp!=maxAttemps)
+        {
+            currentGuess = []
+            currentGuessDots = []
+            currentGuessIndex = 0
+            createGuessSequence()
+        }
+        else
+        {
+            document.getElementById("confetti-container").style.visibility = "visible"
+            document.getElementById("resultText").innerHTML = "You lost"
+        }
+    }
+    else
+    {
+        document.getElementById("confetti-container").style.visibility = "visible"
+        confettiInterval =  setInterval(() => {
+            showConfetti();
+          }, 400);
+    }
+}
+
+const showConfetti = () => {
+
+    const confettiContainer = document.querySelector('#confetti-container');
+    const confetti = document.createElement('div');
+    confetti.textContent = '🎉';
+    confetti.classList.add('confetti');
+    confetti.style.left = Math.random() * innerWidth + 'px';
+    confettiContainer.appendChild(confetti);
+    setTimeout(() => {
+      confetti.remove();
+    }, 5000);
+  };
+
+function newGame()
+{
+    document.getElementById("confetti-container").style.visibility = "hidden"
+    document.getElementById("menu").style.visibility = "hidden"
+    sequence = []
+    difficultySelect = document.getElementById("difficulty").options;
+    difficultyValue = difficultySelect[difficultySelect.selectedIndex].value
+    if(difficultyValue === "Easy")
+    {
+        numberOfColors = 4
+        sequenceSize  = 3
+        maxAttemps = 6
+    }
+    else if(difficultyValue === "Medium")
+    {
+        numberOfColors = 5
+        sequenceSize  = 4
+        maxAttemps = 6
+    }
+    else if(difficultyValue === "Hard")
+    {
+        numberOfColors = 6
+        sequenceSize  = 5
+        maxAttemps = 6
+    }
+    currentAttemp = 0
+    currentGuess = []
+    currentGuessDots=[]
+    currentGuessIndex=0
+    const colorsContainer = document.getElementById("colors")
+    while (colorsContainer.firstChild) colorsContainer.removeChild(colorsContainer.firstChild);
+    const guessesContainer = document.getElementById("guesses")
+    while (guessesContainer.firstChild) guessesContainer.removeChild(guessesContainer.firstChild);
+    const resultsContainer = document.getElementById("results")
+    while (resultsContainer.firstChild) resultsContainer.removeChild(resultsContainer.firstChild);
+
+    document.getElementById("attempsLeft").innerText="Attempts left: " + (maxAttemps - currentAttemp).toString()
+
+    GenerateSequence()
+    createGuessColors();
+    createGuessSequence()
+}
+
+function wonButton()
+{
+    clearInterval(confettiInterval)
+    showMenu()
+}
+
+function showMenu()
+{
+    document.getElementById("confetti-container").style.visibility = "hidden"
+    document.getElementById("menu").style.visibility = "visible"
+}
+
+
+window.onload = function(){  
+    showMenu()
+
+}