Skip to content

Commit

Permalink
Merge pull request #191 from samriddhitiwary/feature/WordguessingGame
Browse files Browse the repository at this point in the history 
Word Guessing Game
  • Loading branch information
@vansh-codes
vansh-codes authored Oct 29, 2024
2 parents 5816bab + 5aac6ad commit c530a03
Show file tree
Hide file tree
Showing 2 changed files with 246 additions and 0 deletions.
237 changes: 237 additions & 0 deletions WordGuessingGame.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaotic Word Guessing Game</title>
<style>
body {
background: linear-gradient(135deg, #000428, #004e92);
margin: 0;
font-family: 'Arial', sans-serif;
color: #00FFFF;
text-align: center;
overflow: hidden;
transition: background-color 1s ease;
}

.game-container {
padding: 20px;
border-radius: 10px;
position: relative;
}

h1 {
font-size: 120px;
margin: 0;
color: #00FFFF;
text-shadow:
0 1px 3px #fff,
0 0 10px rgba(0, 255, 255, 0.8);
animation: move 1s linear infinite;
}

.title {
font-size: 50px;
margin-bottom: 20px;
color: #00FFFF;
text-shadow:
0 1px 3px #fff,
0 0 10px rgba(0, 255, 255, 0.8);
animation: move 1s linear infinite;
}

@keyframes move {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}

input[type="text"] {
padding: 10px;
font-size: 20px;
margin-top: 20px;
}

button {
padding: 10px 20px;
margin-top: 10px;
background-color: #ff4500;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #ff6347;
}

.scoreboard {
margin-top: 20px;
font-size: 24px;
}

.floating-keyboard {
position: absolute;
width: 100%;
height: 100%;
}

.key {
position: absolute;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #00FFFF;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #000;
pointer-events: auto;
transition: transform 0.5s ease, top 0.5s ease, left 0.5s ease;
animation: rotate 5s linear infinite;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="game-container">
<div class="title">Word Guessing Game</div>
<h1 id="word-display">CHAOS</h1>
<input type="text" id="guess-input" placeholder="Type your guess...">
<button id="submit-btn">Guess</button>
<div class="scoreboard">Score: <span id="score">0</span></div>
<div class="floating-keyboard"></div>
</div>

<script>
const wordDisplay = document.getElementById('word-display');
const guessInput = document.getElementById('guess-input');
const submitBtn = document.getElementById('submit-btn');
const scoreDisplay = document.getElementById('score');
const floatingKeyboard = document.querySelector('.floating-keyboard');

let score = 0;
let targetWord = "CHAOS";
let chaosTimer;

function startGame() {
guessInput.value = '';
score = 0;
updateScore();
startChaos();
startFloatingKeyboard();
startTimer();
}

function updateScore() {
scoreDisplay.textContent = score;
}

function randomizeWord() {
const wordArray = targetWord.split('');
for (let i = 0; i < wordArray.length; i++) {
if (Math.random() < 0.5) {
wordArray[i] = String.fromCharCode(65 + Math.floor(Math.random() * 26));
}
}
wordDisplay.textContent = wordArray.join('');
changeBackgroundColor();
changeFontSize();
}

function changeBackgroundColor() {
const colors = ['#000428', '#004e92', '#ff4500', '#ff6347', '#00FFFF', '#00FF7F'];
document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

function changeFontSize() {
const randomSize = Math.floor(Math.random() * 100 + 80);
wordDisplay.style.fontSize = `${randomSize}px`;
document.querySelector('.title').style.fontSize = `${randomSize / 2}px`;
}

function startChaos() {
clearInterval(chaosTimer);
chaosTimer = setInterval(() => {
randomizeWord();
}, 300);
}

function startFloatingKeyboard() {
floatingKeyboard.innerHTML = '';
const keys = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
keys.forEach(key => {
const keyElement = document.createElement('div');
keyElement.className = 'key';
keyElement.textContent = key;
floatingKeyboard.appendChild(keyElement);
setRandomPosition(keyElement);
keyElement.addEventListener('click', () => handleKeyClick(key));
});
floatKeys();
}

function setRandomPosition(element) {
element.style.top = Math.random() * 100 + 'vh';
element.style.left = Math.random() * 100 + 'vw';
}

function floatKeys() {
const keys = document.querySelectorAll('.key');
keys.forEach(key => {
const randomX = (Math.random() - 0.5) * 200;
const randomY = (Math.random() - 0.5) * 200;
key.style.transform = `translate(${randomX}px, ${randomY}px)`;
setTimeout(() => setRandomPosition(key), 1000);
});
setTimeout(floatKeys, 2000);
}

function startTimer() {
let timeLimit = 20000;
const timerInterval = setInterval(() => {
if (timeLimit <= 0) {
clearInterval(timerInterval);
alert("Time's up! Your score: " + score);
startGame();
return;
}
timeLimit -= Math.floor(Math.random() * 1000) + 500;
}, 1000);
}

submitBtn.addEventListener('click', () => {
const guess = guessInput.value.toUpperCase();
if (guess === targetWord) {
score += 1;
updateScore();
resetGame();
} else {
alert("Wrong guess! Try again.");
}
guessInput.value = '';
});

function handleKeyClick(key) {
guessInput.value += key;
}

function resetGame() {
guessInput.value = '';
targetWord = "CHAOS";
randomizeWord();
}

startGame();
</script>
</body>
</html>
Loading

0 comments on commit c530a03

Please sign in to comment.