- 
-
- Player 1
- -Score: 0
-Stamina: 100
-
-
- 
-
- Player 2
- -Score: 0
-Stamina: 100
-
- 
+
+
+Score: 0
-Stamina: 100
-
- Score: 0
-Stamina: 100
-
- Score: 0
+Stamina: 100
+
+ 
+ 
+ Score: 0
+Stamina: 100
+
+ Winner: " + winner + "
"; - document.getElementById("game-container").appendChild(resultDiv); -} - -function handlePowerUp(player) { - const powerUpChance = Math.random(); - if (powerUpChance <= 0.2) { - if (player === 1) { - player1Score += 5; - player1Stamina += 10; - } else { - player2Score += 5; - player2Stamina += 10; - } - } - updateUI(); -} - -function displayPowerUpMessage(player) { - const messageElement = document.getElementById('power-up-message'); - if (player === 1) { - messageElement.textContent = 'Player 1 got a Power-Up!'; - } else { - messageElement.textContent = 'Player 2 got a Power-Up!'; - } - messageElement.classList.add('show'); - setTimeout(() => { - messageElement.classList.remove('show'); - }, 2000); -} - -function generatePowerUps() { - setInterval(() => { - const player = Math.random() < 0.5 ? 1 : 2; - handlePowerUp(player); - displayPowerUpMessage(player); - }, 10000); -} - -function updateTimer() { - const timerElement = document.getElementById('game-timer'); - let seconds = 0; - setInterval(() => { - seconds++; - const minutes = Math.floor(seconds / 60); - const remainingSeconds = seconds % 60; - timerElement.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; - }, 1000); -} - -function startGame() { - resetGame(); - generatePowerUps(); - updateTimer(); -} - -startGame(); +const MAX_STAMINA = 100; + +let score1 = 0; +let score2 = 0; +let stamina1 = MAX_STAMINA; +let stamina2 = MAX_STAMINA; + +var display=1; +var div1 = document.getElementById("container3D"); +div1.style.display='none'; +function hideShow(){ + if(display==0){ + div1.style.display='none'; + display=1; + } + else{ + div1.style.display='block'; + display=0; + } +} + +let popup=document.getElementById("popup"); +function openPopup(){ + popup.classList.add("open-popup"); +} +function closePopup(){ + popup.classList.remove("open-popup"); +} + + +if(display==1){ + function launchBlade(player) { + + const score = Math.floor(Math.random() * 100) + 1; + const decreaseStamina = Math.floor(Math.random() * 20) + 1; + + if (player === 1) { + score1 += score; + stamina1 -= decreaseStamina; + if (stamina1 < 0) stamina1 = 0; + document.getElementById("score1").textContent = score1; + document.getElementById("stamina1").textContent = stamina1; + const blade1 = document.getElementById("blade1"); + blade1.classList.add("spin-animation"); + blade1.addEventListener("animationend", () => { + blade1.classList.remove("spin-animation"); + }, { once: true }); + } else { + score2 += score; + stamina2 -= decreaseStamina; + if (stamina2 < 0) stamina2 = 0; + document.getElementById("score2").textContent = score2; + document.getElementById("stamina2").textContent = stamina2; + const blade2 = document.getElementById("blade2"); + blade2.classList.add("spin-animation"); + blade2.addEventListener("animationend", () => { + blade2.classList.remove("spin-animation"); + }, { once: true }); + } + + if (stamina1 === 0 || stamina2 === 0) { + endGame(); + } + } +} + +function endGame() { + document.getElementById("player1").getElementsByTagName("button")[0].disabled = true; + document.getElementById("player2").getElementsByTagName("button")[0].disabled = true; + + let winner; + if (score1 > score2) { + winner = "Player 1"; + } else if (score2 > score1) { + winner = "Player 2"; + } else { + winner = "It's a tie!"; + } + + const resultDiv = document.createElement("div"); + resultDiv.innerHTML = "Winner: " + winner + "
"; + document.getElementById("container3D").appendChild(resultDiv); + var div = document.getElementById("hide"); + div.style.display='none'; +} + +function handlePowerUp(player) { + const powerUpChance = Math.random(); + if (powerUpChance <= 0.2) { + if (player === 1) { + player1Score += 5; + player1Stamina += 10; + } else { + player2Score += 5; + player2Stamina += 10; + } + } + updateUI(); +} + +function displayPowerUpMessage(player) { + const messageElement = document.getElementById('container3D'); + if (player == 1) { + messageElement.textContent = 'Player 1 got a Power-Up!'; + } else { + messageElement.textContent = 'Player 2 got a Power-Up!'; + } + messageElement.classList.add('show'); + setTimeout(() => { + messageElement.classList.remove('show'); + }, 2000); +} + +function generatePowerUps() { + setInterval(() => { + const player = Math.random() < 0.5 ? 1 : 2; + handlePowerUp(player); + displayPowerUpMessage(player); + }, 1000); +} + +function updateTimer() { + const timerElement = document.getElementById('game-timer'); + let seconds = 0; + setInterval(() => { + seconds++; + const minutes = Math.floor(seconds / 60); + const remainingSeconds = seconds % 60; + timerElement.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; + }, 100); + if(seconds==60&& (stamina1==0||stamina2==0)){ + endGame(); + } +} + +function startGame() { + resetgame(); + generatePowerUps(); + updateTimer(); +} + +startGame(); diff --git a/Games/Beyblade/style.css b/Games/Beyblade/style.css index c2b76b077a..477591d96a 100644 --- a/Games/Beyblade/style.css +++ b/Games/Beyblade/style.css @@ -1,216 +1,362 @@ -body { - font-family: Arial, sans-serif; - text-align: center; - background-color: #e8e5c4; -} - -h1 { - margin-top: 30px; - color: #333; -} - -#game-container { - display: flex; - justify-content: space-around; - margin-top: 50px; -} - -#player1, -#player2 { - border: 1px solid #dccbcb; - padding: 20px; - width: 200px; - background-color: #c3e7b1; - border-radius: 5px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -} - -button { - margin-top: 10px; - padding: 10px 20px; - background-color: #333; - color: #fff; - border: none; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.3s; -} - -button:hover { - background-color: #555; -} - -p { - margin-top: 20px; - color: #555; -} - -img { - width: 150px; - height: 150px; - margin-top: 20px; - animation: none; - border-radius: 50%; -} - -.spin-animation { - animation: spin 1s infinite linear; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -.result { - margin-top: 30px; - font-size: 20px; - font-weight: bold; -} - -.score-label { - font-size: 18px; - font-weight: bold; - color: #555; - text-transform: uppercase; - margin-bottom: 5px; -} - -.score-value { - font-size: 24px; - color: #333; -} - -.stamina-label { - font-size: 18px; - font-weight: bold; - color: #555; - text-transform: uppercase; - margin-bottom: 5px; -} - -.stamina-value { - font-size: 24px; - color: #333; -} - -.game-over { - margin-top: 30px; - font-size: 24px; - font-weight: bold; - color: #333; -} - -.winner { - font-size: 30px; - color: #333; -} - -.tie { - color: #777; -} - -/* Additional Styling */ - -.container { - max-width: 800px; - margin: 0 auto; - padding: 20px; -} - -.row { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; -} - -.col-6 { - flex-basis: 50%; -} - -@media (max-width: 600px) { - #game-container { - flex-direction: column; - } - - #player1, - #player2 { - width: 100%; - margin-bottom: 20px; - } -} - -.beyblade { - width: 100px; - height: 100px; - border-radius: 50%; - object-fit: cover; -} - -.launch-button { - background-color: #4caf50; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; -} - -.score-container, -.stamina-container { - display: flex; - align-items: center; - margin-bottom: 10px; -} - -.score-container span, -.stamina-container span { - font-weight: bold; - margin-right: 5px; -} - -#game-result { - text-align: center; - margin-top: 20px; -} - -.winner { - font-size: 24px; - font-weight: bold; - color: #4caf50; -} - -#power-up-message { - display: none; - text-align: center; - font-weight: bold; - font-size: 18px; - margin-top: 10px; -} - -.show { - display: block; -} - -#game-timer { - font-size: 20px; - font-weight: bold; - margin-top: 10px; -} - -#reset-button { - background-color: #f44336; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background: #020827; + font-family: 'Poppins','sans-serif'; + height: 350vh; +} + +/* Header Starts here */ + +.container{ + width: 100%; + height: 100vh; + background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.1)); + background-size: cover; + background-position: top; + /* display: flex; */ +} + +.logo img{ + height: 100px ; + width:60%; +} + +header{ + width: 100%; + height: 10vh; + background-position: rgba(0,0,0,0.5); + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo img{ + width: 80%; +} + +.popup{ + width: 400px; + background: #fff; + border-radius: 6px; + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%,-50%) scale(0.1); + text-align: center; + padding: 0 30px 30px; + color: #333; + visibility: hidden; + transition: transform 0.4s, top 0.4s;; +} + +.open-popup{ + visibility: visible; + top: 50%; + transform: translate(-50%,-50%) scale(1); +} + +.popup i{ + color: #6fd649; +} + +.popup h2{ + font-size: 38px; + font-weight: 500; + margin: 30px 0 10px; +} + +.popup button{ + width: 100%; + margin-top: 50px; + padding: 10px 0; + background: #6fd649; + color: #fff; + border: 0; + outline: none; + font-size: 18px; + border-radius: 4px; + cursor: pointer; + box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); +} + +.logo{ + width: 300px; + height: 13vh; + background: #031157; + display: flex; + align-items: center; + color: #fff; + clip-path: polygon(0 0,100% 0,64% 100%,0 100%); + padding: 10px; + line-height: 2rem; + margin-top: -10px; +} + +#btn{ + clip-path: polygon(0 0,100% 0,64% 100%,0 100%); +} + +.navbar{ + display: flex; + list-style: none; + height: 50px; +} + +ul.navbar li{ + width: 120px; + margin-left: 100px; + margin-top: 10px; +} + +ul.navbar li a{ + text-decoration: none; + color: #fff; + font-weight: 600; + font-size: 26px; +} + +ul.navbar li i.fa-solid{ + color: #fff; + margin-right: 10px; +} + +ul.navbar li a:hover,ul.navbar li i:hover{ + color: #fec53a; +} + +#btn{ + width: 250px; + height: 10vh; + background: #fec53a; + color: #000; + outline: none; + border: none; + clip-path: polygon(40% 0,100% 0,100% 100%,0 100%); + font-size: 1.2rem; + font-weight: bold; + text-align: right; + padding-right: 40px; + transition: transform 0.2s ease; +} + +#btn:active{ + transform: scale(0.96); +} + +@keyframes ani{ + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +} + +@keyframes ani2{ + 0%{ + transform: rotate(360deg); + } + 100%{ + transform: rotate(0deg); + } +} + +.game-timer{ + color: white; + font-size: 20px; +} + + +/* Header ends here */ + +#player1, +#player2 { + border: 1px solid #dccbcb; + padding: 20px; + width: 300px; + background-color: #c3e7b1; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + justify-content: center; + align-items: center; +} + +.launch-button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + } + +.blader1{ + height: 300px; + width: 250px; +} + +.blader2{ + height: 240px; + width: 250px; +} + +.circle1{ + align-items: center; + justify-content: center; + height: 180px; + width: 180px; + border-radius: 50%; + border: transparent; + border-top: 3px solid #fec53a; + animation: ani2 2s linear infinite; + /* background-image: url("assets/bey2.jpg"); */ + +} + +.circle2{ + width: 130px; + height: 130px; + border-radius: 50%; + border: transparent; + border-top: 3px solid rgb(0, 225, 255); + animation: ani 0.7s linear infinite; + margin-top: -50px; +} + +.circle1 #blade1{ + margin-left: 100px; +} + +.circle1 #blade2{ + width: 70px; + height: 80px; + margin-left: -20px; + margin-top: 0px; +} + +button { + margin-top: 10px; + padding: 10px 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #555; +} + +.circle2 img{ + height: 50px; + width: 50px; +} + + +.spin-animation { + animation: spin 1s infinite linear; + } + + @keyframes spin{ + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + + +.result { + margin-top: 30px; + font-size: 20px; + font-weight: bold; + } + +.score-label { + font-size: 18px; + font-weight: bold; + color: #555; + text-transform: uppercase; + margin-bottom: 5px; + } + +.score-value { + font-size: 24px; + color: #333; + } + + .stamina-label { + font-size: 18px; + font-weight: bold; + color: #555; + text-transform: uppercase; + margin-bottom: 5px; + } + + .stamina-value { + font-size: 24px; + color: #333; + } + + .game-over { + margin-top: 30px; + font-size: 24px; + font-weight: bold; + color: #333; + } + + .winner { + font-size: 30px; + color: #333; + } + + .tie { + color: #777; + } + + + +#game-container{ + display: flex; + justify-content: space-between; + align-items: left; + margin-top: 100px; + margin: 40px; +} + +#Stadium{ + width: 100%; + height: 500px; + align-items: center; + justify-content: center; + margin-top: 50px; +} + +.model{ + height: 400px; + width: 50%; + margin-left: 300px; +} + +#Stadium h2{ + color: white; + margin-top: 80px; + font-size: 30px; + align-items: center; +} + +#container3D{ + color: white; } \ No newline at end of file
+