main #2
13 changed files with 606 additions and 11 deletions
|
|
@ -38,7 +38,7 @@ class Footer extends HTMLElement {
|
||||||
|
|
||||||
// Add event listener for button click
|
// Add event listener for button click
|
||||||
this.querySelector('.secret-button').addEventListener('click', () => {
|
this.querySelector('.secret-button').addEventListener('click', () => {
|
||||||
window.location.href = 'secret/index.html'; // Open the secret.html file
|
window.open('secret/index.html', '_blank');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
54
secret/guessMyNumber/game.js
Normal file
54
secret/guessMyNumber/game.js
Normal file
|
|
@ -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();
|
||||||
54
secret/guessMyNumber/index.html
Normal file
54
secret/guessMyNumber/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Guess My Number</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="gameboy">
|
||||||
|
<!-- Game Boy Screen -->
|
||||||
|
<div class="screen">
|
||||||
|
<article class="game">
|
||||||
|
<h1>Guess My Number - Game</h1>
|
||||||
|
<p class="message"></p>
|
||||||
|
<div class="guess-display">
|
||||||
|
<span id="guess"></span>
|
||||||
|
</div>
|
||||||
|
<p class="score"></p>
|
||||||
|
<p class="highScore"></p>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<h2>Description</h2>
|
||||||
|
<p>Guess a number between 1 and 20</p>
|
||||||
|
<p>A = check</p>
|
||||||
|
<p>B = Reload</p>
|
||||||
|
<p>▲ = increases guess by one</p>
|
||||||
|
<p>▼ = decreases guess by one</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Controls -->
|
||||||
|
<div class="controls">
|
||||||
|
<!-- D-Pad on the left -->
|
||||||
|
<div class="dpad">
|
||||||
|
<button class="dpad-btn up" id="up">▲</button>
|
||||||
|
<button class="dpad-btn left" id="left">◀</button>
|
||||||
|
<div class="dpad-center"></div>
|
||||||
|
<button class="dpad-btn right" id="right">▶</button>
|
||||||
|
<button class="dpad-btn down" id="down">▼</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- A and B Buttons on the right -->
|
||||||
|
<div class="action-buttons">
|
||||||
|
<button class="btn" id="check">A</button>
|
||||||
|
<button class="btn" id="restart">B</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="game.js"></script>
|
||||||
|
<script src="styles.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
186
secret/guessMyNumber/styles.css
Normal file
186
secret/guessMyNumber/styles.css
Normal file
|
|
@ -0,0 +1,186 @@
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
62
secret/guessMyNumber/styles.js
Normal file
62
secret/guessMyNumber/styles.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
'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();
|
||||||
BIN
secret/images/background.jpg
Normal file
BIN
secret/images/background.jpg
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 949 KiB After Width: | Height: | Size: 949 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
|
@ -49,7 +49,7 @@
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" target="_blank" class="item">
|
<a href="guessMyNumber/index.html" target="_blank" class="item">
|
||||||
<img src="images/number.jpeg" alt="Image can't be displayed">
|
<img src="images/number.jpeg" alt="Image can't be displayed">
|
||||||
<h2>Guess My Number</h2>
|
<h2>Guess My Number</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
|
|
|
||||||
23
secret/mineSweeper/index.html
Normal file
23
secret/mineSweeper/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Minesweeper</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="settings">
|
||||||
|
<label for="gridSize">Grid Size:</label>
|
||||||
|
<input type="number" id="gridSize" min="1" value="18">
|
||||||
|
<label for="bombs">Number of Bombs:</label>
|
||||||
|
<input type="number" id="bombs" min="1" value="54">
|
||||||
|
<button id="startGame">Start Game</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="game"></canvas>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
173
secret/mineSweeper/script.js
Normal file
173
secret/mineSweeper/script.js
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
// 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);
|
||||||
|
});
|
||||||
49
secret/mineSweeper/styles.css
Normal file
49
secret/mineSweeper/styles.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
* {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -10,14 +10,8 @@ body {
|
||||||
color: #b0b0b0;
|
color: #b0b0b0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
background-image: repeating-linear-gradient(
|
background-image: url('images/background.jpg');
|
||||||
45deg,
|
background-size: cover /* Adjust size for tape appearance */
|
||||||
#ffcc00 0%,
|
|
||||||
#ffcc00 10%,
|
|
||||||
#0d0d0d 10%,
|
|
||||||
#0d0d0d 20%
|
|
||||||
);
|
|
||||||
background-size: 20px 20px; /* Adjust size for tape appearance */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
<p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="" target="_blank" class="item">
|
<a href="../secret/guessMyNumber/index.html" target="_blank" class="item">
|
||||||
<img src="../secret/images/number.jpeg" alt="Image can't be displayed">
|
<img src="../secret/images/number.jpeg" alt="Image can't be displayed">
|
||||||
<h2>Guess My Number</h2>
|
<h2>Guess My Number</h2>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue