diff --git a/Projects/color-guessing-game/index.html b/Projects/color-guessing-game/index.html new file mode 100644 index 000000000..7ae6971e6 --- /dev/null +++ b/Projects/color-guessing-game/index.html @@ -0,0 +1,20 @@ + + + + + + + Color Guessing Game + + +
+

Guess the correct color!

+
+
+
+
Score: 0
+ +
+ + + \ No newline at end of file diff --git a/Projects/color-guessing-game/main.js b/Projects/color-guessing-game/main.js new file mode 100644 index 000000000..dba649e6e --- /dev/null +++ b/Projects/color-guessing-game/main.js @@ -0,0 +1,67 @@ +class ColorGame { + constructor() { + this.colors = [ + '#FF0000', '#00FF00', '#0000FF', '#FFFF00', + '#FF00FF', '#00FFFF', '#FFA500', '#800080', + '#008000', '#800000', '#008080', '#000080' + ]; + this.score = 0; + this.targetColor = ''; + this.optionsContainer = document.querySelector('.options-container'); + this.colorBox = document.querySelector('.box-color'); + this.gameStatus = document.querySelector('.game-status'); + this.scoreElement = document.querySelector('.score'); + this.newGameButton = document.querySelector('.new-game-btn'); + + this.newGameButton.addEventListener('click', () => this.resetGame()); + this.startNewGame(); + } + + resetGame() { + this.score = 0; + this.updateScore(); + this.startNewGame(); + } + + updateScore() { + this.scoreElement.textContent = `Score: ${this.score}`; + } + + startNewGame() { + this.gameStatus.textContent = ''; + this.gameStatus.className = 'game-status'; + this.optionsContainer.innerHTML = ''; + + const shuffledColors = [...this.colors] + .sort(() => Math.random() - 0.5) + .slice(0, 6); + + this.targetColor = shuffledColors[Math.floor(Math.random() * 6)]; + this.colorBox.style.backgroundColor = this.targetColor; + + shuffledColors.forEach(color => { + const button = document.createElement('button'); + button.className = 'color-option'; + button.setAttribute('data-testid', 'colorOption'); + button.style.backgroundColor = color; + button.addEventListener('click', () => this.checkGuess(color)); + this.optionsContainer.appendChild(button); + }); + } + + checkGuess(color) { + if (color === this.targetColor) { + this.score++; + this.updateScore(); + this.gameStatus.textContent = 'Correct!'; + this.gameStatus.className = 'game-status correct-animation'; + setTimeout(() => this.startNewGame(), 1000); + } else { + this.gameStatus.textContent = 'Wrong!'; + this.gameStatus.className = 'game-status wrong-animation'; + setTimeout(() => this.resetGame(), 1000); + } + } +} + +new ColorGame(); diff --git a/Projects/color-guessing-game/style.css b/Projects/color-guessing-game/style.css new file mode 100644 index 000000000..eac54d097 --- /dev/null +++ b/Projects/color-guessing-game/style.css @@ -0,0 +1,145 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + background-color: #143260; +} + +.game-container { + background-color: #ffffff; + padding: 20px; + border-radius: 8px; + box-shadow: 7px 4px 14px 2px rgba(0,0,0,0.64); + -webkit-box-shadow: 7px 4px 14px 2px rgba(0,0,0,0.64); + -moz-box-shadow: 7px 4px 14px 2px rgba(0,0,0,0.64); + text-align: center; +} + +h1 { + font-size: 1.2rem; + text-align: center; + margin-bottom: 10px; +} + +.box-color { + width: 100px; + height: 100px; + margin: 20px auto; + border-radius: 8px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease; +} + +.options-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin-bottom: 20px; +} + +.game-status { + margin-bottom: 10px; +} + +.score { + font-size: 1.2rem; + font-weight: bold; + color: #333; + +} + +.new-game-btn { + padding: 10px 20px; + background-color: #143260; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.new-game-button:hover { + background-color: #282C34; +} + +@media (max-width: 480px) { + .game-container { + grid-template-columns: repeat(2, 1fr); + } +} + +.color-option { + width: 100%; + aspect-ratio: 1; + border: none; + border-radius: 6px; + cursor: pointer; + transition: transform 0.2s ease; +} + +.color-option:hover { + transform: scale(1.05); +} + +.game-info { + text-align: center; + margin: 10px 0; +} + +.game-status { + font-size: 1em; + margin: 8px 0; + min-height: 1.2em; +} + +.score { + font-size: 1.2em; + font-weight: bold; + color: #333; +} + +.new-game-btn { + display: block; + width: 100%; + padding: 10px; + background-color: #143260; + color: #ffffff; + border: none; + border-radius: 6px; + font-size: 1em; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.new-game-btn:hover { + background-color: #3d4147; +} + +.correct-animation { + animation: celebrate 0.5s ease; +} + +.wrong-animation { + animation: shake 0.5s ease; +} + +@keyframes celebrate { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } +} \ No newline at end of file