diff --git a/secret/guessMyNumber/game.js b/secret/guessMyNumber/game.js new file mode 100644 index 0000000..cd5803d --- /dev/null +++ b/secret/guessMyNumber/game.js @@ -0,0 +1,54 @@ +'use strict'; + +const targetNum = Math.trunc(Math.random() * 20) + 1; +let highScore = Number(localStorage.getItem('highscore')) || 0; +let userGuess = 10; // Default guess +let currScore = 20; + +const screenEl = document.querySelector('.screen'); +const msgEl = document.querySelector('.message'); +const guessInput = document.querySelector('#guess'); +const scoreEl = document.querySelector('.score'); +const highScoreEl = document.querySelector('.highScore'); +const checkBtn = document.querySelector('#check'); +const restartBtn = document.querySelector('#restart'); +const incBtn = document.querySelector('#up'); +const decBtn = document.querySelector('#down'); + +const setMsg = msg => msgEl.textContent = msg; +const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`; +const setHighScore = () => { + highScoreEl.textContent = `Highscore: ${highScore}`; + localStorage.setItem('highscore', highScore); +}; +const changeColor = color => screenEl.style.backgroundColor = color; + +checkBtn.addEventListener('click', () => { + userGuess = Number(guessInput.textContent); + if (!userGuess || userGuess < 1 || userGuess > 20) { + setMsg("Please enter a valid number between 1 and 20."); + } else if (userGuess === targetNum) { + highScore = Math.max(highScore, currScore); + setHighScore(); + setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?'); + changeColor(currScore !== 20 ? '#1ba100' : '#FFC300'); + } else { + setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!'); + if (currScore > 1) { + setScore(currScore - 1); + } else { + setScore(1); + setMsg("You lost the game!"); + changeColor('#a10000'); + } + } +}); + +restartBtn.addEventListener('click', () => location.reload()); +incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20)); +decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1)); + +guessInput.textContent = userGuess; +setMsg('Guess a number'); +setScore(currScore); +setHighScore(); diff --git a/secret/guessMyNumber/index.html b/secret/guessMyNumber/index.html new file mode 100644 index 0000000..5a5f5d5 --- /dev/null +++ b/secret/guessMyNumber/index.html @@ -0,0 +1,54 @@ + + + + + + Guess My Number + + + +
+ +
+
+

Guess My Number - Game

+

+
+ +
+

+

+ +
+

Description

+

Guess a number between 1 and 20

+

A = check

+

B = Reload

+

▲ = increases guess by one

+

▲ = decreases guess by one

+
+
+
+ + +
+ +
+ + +
+ + +
+ + +
+ + +
+
+
+ + + + diff --git a/secret/guessMyNumber/styles.css b/secret/guessMyNumber/styles.css new file mode 100644 index 0000000..10ba922 --- /dev/null +++ b/secret/guessMyNumber/styles.css @@ -0,0 +1,184 @@ +/* Base Reset */ +body, html { + margin: 0; + padding: 0; + font-family: monospace; + background-color: #3a2d56; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* GameBoy Layout */ +.gameboy { + background-color: #5f4c82; /* Game Boy Color purple shell */ + width: 441px; + height: 735px; + border-radius: 20px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + position: relative; +} + +@media (max-width: 768px) { + .gameboy { + width: 100vw; + height: 100vh; + border-radius: 0; + } +} + +/* Screen */ +.screen { + background-color: #306230; /* Game Boy green screen */ + border: 4px solid #0f380f; + width: 90%; + height: 55%; + margin-top: 20px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.game { + text-align: center; + width: 90%; +} + +/* Titles */ +h1 { + font-size: 2rem; /* Increased font size */ + margin-bottom: 10px; + text-transform: uppercase; +} + +/* Guess Display */ +.guess-display { + background-color: #9bbc0f; + color: #0f380f; + border: 2px solid #0f380f; + font-size: 2rem; /* Increased font size */ + width: 80px; /* Increased width */ + text-align: center; + margin: 10px auto; + padding: 10px; /* Increased padding */ + border-radius: 4px; +} + +/* Messages */ +.message, .score, .highScore { + font-size: 1.4rem; /* Increased font size */ + margin: 5px 0; +} + +.description, +.description p{ + font-size: 1.2rem; + margin: 0 auto; + padding: 0 auto; +} + +/* Controls Section */ +.controls { + margin-top: 20px; + display: flex; + justify-content: space-between; + width: 80%; + align-items: center; +} + +/* D-Pad */ +.dpad { + position: relative; + width: 120px; /* Increased size */ + height: 120px; /* Increased size */ +} + +/* Base Styling for D-Pad Buttons */ +.dpad-btn { + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9cbc0f00; + border-radius: 5px; + position: absolute; + width: 40px; + height: 40px; + font-size: 1.5rem; /* Increased size */ + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.dpad-btn.up { + top: 0; + left: 50%; + transform: translateX(-50%); +} + +.dpad-btn.down { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.dpad-btn.left { + top: 50%; + left: 0; + transform: translateY(-50%); +} + +.dpad-btn.right { + top: 50%; + right: 0; + transform: translateY(-50%); +} + +/* D-Pad Center to Connect Buttons */ +.dpad-center { + background-color: #0f380f; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + border: 2px solid #9cbc0f00; + border-radius: 5px; +} + +/* A and B Buttons */ +.action-buttons { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 140px; /* Increased height */ +} + +.btn { + background-color: #0f380f; + color: #9bbc0f; + border: 2px solid #9bbc0f; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 1.8rem; /* Increased font size */ + cursor: pointer; + transition: transform 0.1s, background-color 0.2s; +} + +.btn:hover { + background-color: #9bbc0f; + color: #0f380f; +} + +.btn:active { + transform: scale(0.9); +} diff --git a/secret/guessMyNumber/styles.js b/secret/guessMyNumber/styles.js new file mode 100644 index 0000000..58c9c0b --- /dev/null +++ b/secret/guessMyNumber/styles.js @@ -0,0 +1,54 @@ +'use strict'; +const left = document.querySelector('#left'); +const right = document.querySelector('#right'); +const gameboy = document.querySelector('.gameboy'); +const html = document.documentElement; +const body = document.body; +const screen = document.querySelector('.screen'); +const dpadButtons = document.querySelectorAll('.dpad-btn'); +const actionButtons = document.querySelectorAll('.btn'); + + +const colors = [ + { gameboyColor: '#A77BCA', htmlColor: '#E8D3E0', screenColor: '#A8D5BA', buttonColor: '#6B8E23', buttonTextColor: '#FFFFFF' }, // Lavender + { gameboyColor: '#F6D02F', htmlColor: '#F9E79F', screenColor: '#A3D9F1', buttonColor: '#FF5733', buttonTextColor: '#FFFFFF' }, // Bright Yellow + { gameboyColor: '#4CAF50', htmlColor: '#C8E6C9', screenColor: '#B2DFDB', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF' }, // Vibrant Green + { gameboyColor: '#FF5252', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#FF4081', buttonTextColor: '#FFFFFF' }, // Bright Red + { gameboyColor: '#2196F3', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000' }, // Sky Blue + { gameboyColor: '#FF6F61', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF7043', buttonTextColor: '#FFFFFF' }, // Coral + { gameboyColor: '#8E24AA', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF' }, // Purple + { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF' }, // Gold +]; + +let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0; + +function updateGameBoyColor() { + gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor; + html.style.backgroundColor = colors[currentColorIndex].htmlColor; + body.style.backgroundColor = colors[currentColorIndex].htmlColor; + screen.style.backgroundColor = colors[currentColorIndex].screenColor; + + dpadButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); + + actionButtons.forEach(button => { + button.style.backgroundColor = colors[currentColorIndex].buttonColor; + button.style.color = colors[currentColorIndex].buttonTextColor; + }); +} + +left.addEventListener('click', () => { + currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); +}); + +right.addEventListener('click', () => { + currentColorIndex = (currentColorIndex + 1) % colors.length; + localStorage.setItem('gameboyColorIndex', currentColorIndex); + updateGameBoyColor(); +}); + +updateGameBoyColor(); diff --git a/secret/images/background.jpg b/secret/images/background.jpg new file mode 100644 index 0000000..63f85fe Binary files /dev/null and b/secret/images/background.jpg differ diff --git a/secret/styles.css b/secret/styles.css index c0a914f..69f112b 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -10,14 +10,8 @@ body { color: #b0b0b0; margin: 0; line-height: 1.6; - background-image: repeating-linear-gradient( - 45deg, - #ffcc00 0%, - #ffcc00 10%, - #0d0d0d 10%, - #0d0d0d 20% - ); - background-size: 20px 20px; /* Adjust size for tape appearance */ + background-image: url('images/background.jpg'); + background-size: cover /* Adjust size for tape appearance */ } header {