diff --git a/footer.js b/footer.js index c3fe9fc..a85de90 100644 --- a/footer.js +++ b/footer.js @@ -38,7 +38,7 @@ class Footer extends HTMLElement { // Add event listener for button click this.querySelector('.secret-button').addEventListener('click', () => { - window.open('secret/index.html', '_blank'); + window.location.href = 'secret/index.html'; // Open the secret.html file }); } } diff --git a/secret/guessMyNumber/game.js b/secret/guessMyNumber/game.js deleted file mode 100644 index cd5803d..0000000 --- a/secret/guessMyNumber/game.js +++ /dev/null @@ -1,54 +0,0 @@ -'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 deleted file mode 100644 index 17856e5..0000000 --- a/secret/guessMyNumber/index.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - 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 deleted file mode 100644 index 9aa8a3a..0000000 --- a/secret/guessMyNumber/styles.css +++ /dev/null @@ -1,186 +0,0 @@ -/* 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: none; - border-radius: 5px; - position: absolute; - width: 42px; - height: 42px; - font-size: 1.5rem; /* Increased size */ - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: 1; -} - -.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; - z-index: 0; - 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 deleted file mode 100644 index d7357df..0000000 --- a/secret/guessMyNumber/styles.js +++ /dev/null @@ -1,62 +0,0 @@ -'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 dpadCenter = document.querySelector('.dpad-center'); // Darker variant -const actionButtons = document.querySelectorAll('.btn'); - -const colors = [ - { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', screenColor: '#E1BEE7', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' }, - { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', screenColor: '#FFEB3B', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' }, - { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' }, - { gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' }, - { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' }, - { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' }, - { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' }, - { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' }, - { gameboyColor: '#009688', htmlColor: '#B2DFDB', screenColor: '#80CBC4', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' }, - { gameboyColor: '#795548', htmlColor: '#D7CCC8', screenColor: '#A1887F', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' }, - { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' }, - { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' } -]; - -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; - }); - - // Using darker dpad center color - dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor; - dpadCenter.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 deleted file mode 100644 index 63f85fe..0000000 Binary files a/secret/images/background.jpg and /dev/null differ diff --git a/secret/images/number.jpeg b/secret/images/number.jpeg index c6dbdd3..fa3af1e 100644 Binary files a/secret/images/number.jpeg and b/secret/images/number.jpeg differ diff --git a/secret/index.html b/secret/index.html index 7dcefb0..912d0f8 100644 --- a/secret/index.html +++ b/secret/index.html @@ -49,7 +49,7 @@

Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.

- + Image can't be displayed

Guess My Number

diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html deleted file mode 100644 index c393c43..0000000 --- a/secret/mineSweeper/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Minesweeper - - - - -
- - - - - -
- - - - - diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js deleted file mode 100644 index d1cb835..0000000 --- a/secret/mineSweeper/script.js +++ /dev/null @@ -1,173 +0,0 @@ -// document.getElementById('startGame').addEventListener('click', function () { -// // Get values from the inputs -// const gridSize = parseInt(document.getElementById('gridSize').value); -// const bombs = parseInt(document.getElementById('bombs').value); - -// // Hide settings and show canvas -// document.getElementById('settings').style.display = 'none'; -// document.getElementById('game').style.display = 'block'; - -// // Assuming renderGame is a function to draw the canvas or initiate the game -// renderGame(gridSize, bombs); -// }); - -// function renderGame(gridSize, bombs) { -// // Placeholder for actual game rendering logic -// const canvas = document.getElementById('game'); -// const ctx = canvas.getContext('2d'); -// canvas.width = gridSize * 20; // Assuming gridSize affects canvas size -// canvas.height = gridSize * 20; - -// // Draw grid or bombs based on input values -// ctx.fillStyle = '#007bff'; -// ctx.fillRect(0, 0, canvas.width, canvas.height); -// } - -const canvas = document.getElementById('game'); -const ctx = canvas.getContext('2d'); - -class Minesweeper { - constructor(w, h, bombs) { - this.size = 25; - this.field = new Array(w); - this.bombs = new Array(w); - for (let x = 0; x < this.field.length; x++) { - this.field[x] = new Array(h); - this.bombs[x] = new Array(h); - for (let y = 0; y < this.field.length; y++) { - this.field[x][y] = 1; - this.bombs[x][y] = false; - } - } - - for (let i = 0; i < bombs; i++) { - let x = Math.floor(Math.random() * w); - let y = Math.floor(Math.random() * h); - this.bombs[x][y] ? i-- : this.bombs[x][y] = true; - } - - this.drawField(); - } - - getNearbyBombs(x, y) { - let counter = 0; - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { - this.bombs[newX][newY] ? counter++ : {}; - } - } - } - return counter; - } - - checkWin() { - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - if (this.field[x][y] != 0 && !this.bombs[x][y]) { - return; - } - } - } - this.drawField(); - alert("You won!"); - window.location.reload(); - } - - markSquare(x, y) { - if (x < this.field.length && y < this.field[0].length) { - switch (this.field[x][y]) { - case 1: - this.field[x][y]++; - break; - case 2: - this.field[x][y]++; - break; - case 3: - this.field[x][y] = 1; - break; - default: - break; - } - this.drawField(); - } - } - - uncoverSquare(x, y) { - if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) { - if (this.bombs[x][y] && this.field[x][y] == 1) { - alert("You lost!"); - window.location.reload(); - } else if (this.field[x][y] == 1) { - this.field[x][y] = 0; - if (this.getNearbyBombs(x, y) == 0) { - for (let newX = x - 1; newX <= x + 1; newX++) { - for (let newY = y - 1; newY <= y + 1; newY++) { - if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) { - this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {}; - } - } - } - } - }; - this.checkWin(); - this.drawField(); - } - } - - drawSquare(x, y, type) { - ctx.lineWidth = 3; - x += 2, y += 2; - let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; - let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; - ctx.fillStyle = type !== 0 ? activeColor : color1; - ctx.fillRect(x * this.size, y * this.size, this.size, this.size); - ctx.strokeStyle = '#000'; - ctx.strokeRect(x * this.size, y * this.size, this.size, this.size); - - if (type != 1) { - const fontSize = this.size / 2; - const number = this.getNearbyBombs(x - 2, y - 2); - let finalPrint; - ctx.font = `${fontSize}px sans-serif`; - ctx.fillStyle = '#000'; - type == 0 ? finalPrint = number ? number : ' ' : {}; - type == 2 ? finalPrint = '🚩' : {}; - type == 3 ? finalPrint = '❓' : {}; - ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3); - } - } - - drawField() { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - const squareWidth = canvas.width / (this.field.length + 4); - const squareHeight = canvas.height / (this.field[0].length + 4); - squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight; - - const offsetX = (canvas.width - (this.field.length * this.size)) / 2; - const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2; - - for (let x = 0; x < this.field.length; x++) { - for (let y = 0; y < this.field[x].length; y++) { - this.drawSquare(x, y, this.field[x][y], offsetX, offsetY); - } - } - } -} - -let field = new Minesweeper(18, 18, 54); -window.addEventListener('resize', () => field.drawField()); -canvas.addEventListener('click', (event) => { - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size); - const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size); - field.uncoverSquare(x, y); -}); -canvas.addEventListener('contextmenu', (event) => { - event.preventDefault(); - const rect = canvas.getBoundingClientRect(); - const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size); - const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size); - field.markSquare(x, y); -}); diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css deleted file mode 100644 index a2cbba2..0000000 --- a/secret/mineSweeper/styles.css +++ /dev/null @@ -1,49 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Arial', sans-serif; - background-color: #f0f0f0; - color: #333; - margin: 0; - padding: 0; -} - -#settings { - margin: 20px; - text-align: center; -} - -label { - margin-right: 10px; -} - -input { - padding: 5px; - margin-right: 10px; - width: 60px; - text-align: center; -} - -button { - padding: 8px 16px; - background-color: #007bff; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -button:hover { - background-color: #0056b3; -} - -canvas { - display: none; - margin: 20px auto; - border: 1px solid #ccc; -} diff --git a/secret/styles.css b/secret/styles.css index 69f112b..c0a914f 100644 --- a/secret/styles.css +++ b/secret/styles.css @@ -10,8 +10,14 @@ body { color: #b0b0b0; margin: 0; line-height: 1.6; - background-image: url('images/background.jpg'); - background-size: cover /* Adjust size for tape appearance */ + background-image: repeating-linear-gradient( + 45deg, + #ffcc00 0%, + #ffcc00 10%, + #0d0d0d 10%, + #0d0d0d 20% + ); + background-size: 20px 20px; /* Adjust size for tape appearance */ } header { diff --git a/webGames/index.html b/webGames/index.html index 267e198..35c69b5 100644 --- a/webGames/index.html +++ b/webGames/index.html @@ -34,7 +34,7 @@

Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.

- + Image can't be displayed

Guess My Number