diff --git a/.gitignore b/.gitignore index fc0e8f9..06ae840 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,4 @@ trash # Logs logs *.log +name.css.bak diff --git a/name.css b/name.css index a244844..b9b5c4a 100644 --- a/name.css +++ b/name.css @@ -193,3 +193,18 @@ h3:hover span:nth-child(2) { .color-15 { --text-color: #93c47d; } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 18px; + } + + *::-webkit-scrollbar-track { + background: #ffffff; + } + + *::-webkit-scrollbar-thumb { + background-color: #a58631; + border-radius: 131px; + border: 4px solid #3b0c0c; + } \ No newline at end of file diff --git a/names.js b/names.js index 1f3b516..431ff79 100644 --- a/names.js +++ b/names.js @@ -75,6 +75,11 @@ const names = [ fullName:"Shivanshi Saxena", githubUrl:"https://github.com/shivanshi-s" }, +{ + name: "Dia", + fullName:"DiaBolical0212", +githubUrl:"https://github.com/DiaBolical0212/" +}, { name: "Stuti", fullName:"Stuti Upreti", diff --git a/submarine.css b/submarine.css new file mode 100644 index 0000000..49f32eb --- /dev/null +++ b/submarine.css @@ -0,0 +1,80 @@ +html { + background: url("https://t3.ftcdn.net/jpg/04/02/66/14/240_F_402661479_Nysm7ihwkfDlIChiCX8mgOKhyi6eiWOw.jpg") no-repeat center center fixed; + background-size: cover; +} + +body { + background-color: lightgreen; + margin: 0; + font-family: "Montserrat", "Avenir"; +} + +h1 { + text-align: center; + color: brown; + font-family: 'Comfortaa', cursive; + font-size: 3em; + font-weight: 700; + padding: 20px 0; + margin: 0; + line-height: .66; + background-color: lightgreen; +} + +#instructions { + font-size: .33em; + text-align: center; +} + +#topNav { + background-color: lightgreen; + text-align: center; + height: 30px; + color: black; + +} + +.circle { + width: 15%; + background: lightgreen; + padding-bottom: 15%; + float: left; + margin: 2.5%; + border-radius: 50%; + transition: background 0.5s; + -webkit-transition: background 0.5s; + -moz-transition: background 0.5s; +} + +#container { + max-width: 600px; + margin: 20px auto; +} + +button { + border: none; + background: none; + text-transform: uppercase; + height: 100%; + font-weight: 700; + color: black; + letter-spacing: 1px; + font-size: inherit; + outline: none; +} + +button:hover { + color: white; + background: steelblue; +} + +.selected { + background: steelblue; + color: white; +} + +#info { + display: inline-block; + width: 20%; + font-weight: 700; +} diff --git a/submarine.html b/submarine.html new file mode 100644 index 0000000..9458606 --- /dev/null +++ b/submarine.html @@ -0,0 +1,52 @@ + + + + FINDING THE SWAN + + + + +

+ FINDING THE SWAN +
+ Find the hidden swan by clicking the circles. 1 life is lost if you hit a fish. +

+ +
+ + Lives: 3 + • Level: 1 + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/submarine.js b/submarine.js new file mode 100644 index 0000000..e3e1fb0 --- /dev/null +++ b/submarine.js @@ -0,0 +1,143 @@ +var easy = false; +var lives = 3; +var difficulty = 4; +var level = 1; +var circlesOnPages = document.querySelectorAll(".circle"); +var randomNumber = randomNum(circlesOnPages.length + 1); +var score = document.getElementById("score"); +var levelID = document.getElementById("level"); +var startOver = document.querySelector("#startOver"); +var modeButton = document.querySelectorAll(".mode"); + +init(); + +function init() { + reload(); + checkClick(); + switchModeBtn(); +} + +function checkClick() { + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].addEventListener("click", function() { + this.style.background = "blue"; + var idID = this.id; + console.log("Circle Clicked " + idID); + if(Number(idID) === randomNumber) { + directHit(); + } else { + enemyTurn(); + } + }); + } +} + +function switchModeBtn() { + for (var i = 0; i < modeButton.length; i++) { + modeButton[i].addEventListener("click", function() { + modeButton[0].classList.remove("selected"); + modeButton[1].classList.remove("selected"); + this.classList.add("selected"); + this.textContent === "WWI" ? easy = true : easy = false; + reload(); + }); + } +} + +function randomNum(numNum) { + var num = Math.floor(Math.random() * numNum); + return num; +} + +function directHit() { + level++; + difficulty--; + if(difficulty === 1) { + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].style.background = "green"; + } + alert('YOU WON!'); + reload(); + } + levelID.textContent = "• Level: " + level; + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].style.background = "green"; + } + // blinkText("Direct Hit!!", "info", "green"); + alert("WIN!!") + randomNumber = randomNum(circlesOnPages.length + 1); + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].style.background = "steelblue"; + } +} + +function enemyTurn() { + var chance = randomNum(difficulty) + if(chance === 1) { + lives--; + score.textContent = "Lives: " + lives; + if(lives <= 0){ + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].style.background = "red"; + } + alert('Game Over! Try Again'); + reload(); + } else { + blinkText("YOU HIT A FISH!!", "info", "red"); + // info.textContent = "You were hit!!!"; + } + } +} + +function reload() { + if (easy) { + lives = 5; + } else { + lives = 3; + } + score.textContent = "Lives: " + lives; + level = 1; + levelID.textContent = "• Level: " + level; + randomNumber = randomNum(circlesOnPages.length + 1); + for (var i = 0; i < circlesOnPages.length; i++) { + circlesOnPages[i].style.background = "steelblue"; + } +} + +startOver.addEventListener("click", function() { + reload(); +}); + +function blinkText(text, id, color) { // From user1822824 on stackexchange + // Blink interval + setInterval(blinker, 250); + + // Flag to see what state the text is in + var flag = true; + + // Number of times to blink text + var blinkNum = 10; + var i = 1; + var divID = document.getElementById(id); + + function blinker() { + if (i < blinkNum) { + if (flag) { + divID.style.color = color; + divID.innerHTML = text; + flag = false; + } else { + divID.innerHTML = ""; + flag = true; + } + + i++ + } else { + // Delete if it's still showing + divID.innerHTML = ""; + + // Stop blinking + clearInterval(blinker); + } + } +}