numberGuessingGame #20
6 changed files with 348 additions and 8 deletions
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>
|
||||
184
secret/guessMyNumber/styles.css
Normal file
184
secret/guessMyNumber/styles.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
54
secret/guessMyNumber/styles.js
Normal file
54
secret/guessMyNumber/styles.js
Normal file
|
|
@ -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();
|
||||
BIN
secret/images/background.jpg
Normal file
BIN
secret/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 949 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue