diff --git a/README.md b/README.md index 502a9d4f..0044e359 100644 --- 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 new file mode 100644 index 00000000..1631f840 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/guessthesequence.png differ diff --git a/SinglePlayer - Games/Guess The Sequence/index.html b/SinglePlayer - Games/Guess The Sequence/index.html new file mode 100644 index 00000000..19364e2e --- /dev/null +++ b/SinglePlayer - Games/Guess The Sequence/index.html @@ -0,0 +1,52 @@ + + + + + + Guess the Sequence + + + + +

Guess the sequence

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

Congratulations, you won!

+ +
+
+ + + \ No newline at end of file diff --git a/SinglePlayer - Games/Guess The Sequence/script.js b/SinglePlayer - Games/Guess The Sequence/script.js new file mode 100644 index 00000000..ad74d75f --- /dev/null +++ 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 element ==currentGuess[i]).length + if(correctColorPosition.filter(element => element ==currentGuess[i]).length < numberOfColorInSequence) + { + let k = 0 + for(let j=0;j { + 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() + +} \ No newline at end of file diff --git a/SinglePlayer - Games/Guess The Sequence/styles.css b/SinglePlayer - Games/Guess The Sequence/styles.css new file mode 100644 index 00000000..0d6cbd4c --- /dev/null +++ b/SinglePlayer - Games/Guess The Sequence/styles.css @@ -0,0 +1,155 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + height: 100vh; + background-color: #37474F; + box-sizing: content-box; + overflow: hidden; + padding: 0; + font-family: Verdana, Geneva, Tahoma, sans-serif; + } + + +.dot { + height: 50px; + width: 50px; + background-color: #313b4b; + border-radius: 100%; + display: inline-block; + outline: solid 5px #757575; + margin: 10px; + + } + +#game{ + width: 1000px; + height: 600px; + display: flex; + flex-direction: row; + } + +#guesses +{ + width: 500px; + display:block; +} + +.guess + { + width:100; + height: 100; + justify-content: center; + align-items: center; + text-align:center; + display:flex; + } + +#colors + { + width:40; + justify-content:left; + text-align:center; + align-items: center; + display: flex; + flex-direction: column; + } + +#results +{ + width: 500px; + display:block; +} + +.result +{ + width:100; + height: 100; + justify-content: center; + align-items: center; + text-align:center; + display:flex; +} + +#check +{ + width: 1000px; + display:flex; + padding: 0.5%; + align-items: center; + text-align: center; + justify-content: center; +} + +#confetti-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +#menu { + position: absolute; + top: 0; + left: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + height: 100vh; +} + +.card { + background-color: #90A4AE; + max-width: 700px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + padding: 2rem; +} + +.card p { + font-size: 1.2rem; + text-align: center; + margin: 0; + padding: 10px; +} + +.confetti { + position: absolute; + top: 0; + font-size: 1.6rem; + animation: confetti-fall linear 5s infinite; +} + +@keyframes confetti-fall { + 0% { + transform: translateY(-100%) rotate(0); + } + 100% { + transform: translateY(100vh) rotate(180deg); + } +} + +.button +{ + position: relative; + overflow: hidden; + color: #fff; + background-color: #01579B; + padding: 0.5rem 1rem; + font-family: 'Roboto', sans-serif; + font-size: 1.0rem; + outline: 0; + border: 0; + margin: 10px; + border-radius: 0.20rem; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); + cursor: pointer; +} \ No newline at end of file diff --git a/additionalpage/game.html b/additionalpage/game.html index 6ead74f3..a7390e44 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -2660,6 +2660,58 @@

Guess The Number

+ + + + + +
+
+ +
+ 41 + +
+
+
+ +
+
+

Guess The Number

+

Attempt to logically guess the a random secret sequence of colours

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

Release Date:  

+

27.05.2024

+
+
+

Updated:  

+

Puzzle | Desktop

+
+
+
+ Play Now +
+
+
+
+