diff --git a/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png b/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png new file mode 100644 index 00000000..a2277241 Binary files /dev/null and b/Pokemon-Mini-Game/fire-removebg-preview-removebg-preview.png differ diff --git a/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png b/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png new file mode 100644 index 00000000..21dd47a7 Binary files /dev/null and b/Pokemon-Mini-Game/flying-removebg-preview-removebg-preview.png differ diff --git a/Pokemon-Mini-Game/grass-removebg-preview.png b/Pokemon-Mini-Game/grass-removebg-preview.png new file mode 100644 index 00000000..25337657 Binary files /dev/null and b/Pokemon-Mini-Game/grass-removebg-preview.png differ diff --git a/Pokemon-Mini-Game/ground-removebg-preview.png b/Pokemon-Mini-Game/ground-removebg-preview.png new file mode 100644 index 00000000..fe67f9f8 Binary files /dev/null and b/Pokemon-Mini-Game/ground-removebg-preview.png differ diff --git a/Pokemon-Mini-Game/index .html b/Pokemon-Mini-Game/index .html new file mode 100644 index 00000000..0908785f --- /dev/null +++ b/Pokemon-Mini-Game/index .html @@ -0,0 +1,112 @@ + + + + + + + Poki-World + + + + + + + + +
+ + + + +
+

Welcome to Poki-verse

+
+ + + + +
+
+ 

Choose your 
+    pokemon:-

+
+
+ +
ground
+ Ground-type
+
water
+ Water-type
+
fire
+ Fire-type
+
grass
+ Grass-type
+
flying
+ Flying-type
+ +
+
+
+

Choose a Pokemon

+ +

Fight

+ + + +
+ +
+

Your Score

+

0

+
+ +
+

Computer Score

+

0

+
+
+
+ + + +
+

Rules

 +

Rules:- + 1. Fire type pokemon weakness is Water and Ground type pokemon.
+ 2. Water type pokemon weakness is Grass and Flying type pokemon.
+ 3. Grass type pokemon weakness is Fire and Flying type pokemon.
+ 4. Flying type pokemon weakness is Fire and Ground type pokemon.
+ 5. Ground type pokemon weakness is Water and Grass type pokemon.
+ 6. Fire type pokemon is strong against Flying and Grass type pokemon.
+ 7. Water type pokemon is strong against Fire and Ground type pokemon.
+ 8. Grass type pokemon is strong against Water and Ground type pokemon.
+ 9. Flying type pokemon is strong against Water and Grass type pokemon.
+ 10. Ground type pokemon is strong against Flying and Fire type pokemon.
+ +

+
+ + + + + + + + + + + + +
+ + + + + + diff --git a/Pokemon-Mini-Game/pokeball.jpg b/Pokemon-Mini-Game/pokeball.jpg new file mode 100644 index 00000000..69b89077 Binary files /dev/null and b/Pokemon-Mini-Game/pokeball.jpg differ diff --git a/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg b/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg new file mode 100644 index 00000000..4db6d6dc Binary files /dev/null and b/Pokemon-Mini-Game/pokemon-icon-vector-free.jpg differ diff --git a/Pokemon-Mini-Game/pxfuel.jpg b/Pokemon-Mini-Game/pxfuel.jpg new file mode 100644 index 00000000..8f404277 Binary files /dev/null and b/Pokemon-Mini-Game/pxfuel.jpg differ diff --git a/Pokemon-Mini-Game/pxfuelDark.jpg b/Pokemon-Mini-Game/pxfuelDark.jpg new file mode 100644 index 00000000..9b314402 Binary files /dev/null and b/Pokemon-Mini-Game/pxfuelDark.jpg differ diff --git a/Pokemon-Mini-Game/script.js b/Pokemon-Mini-Game/script.js new file mode 100644 index 00000000..9e1c11e3 --- /dev/null +++ b/Pokemon-Mini-Game/script.js @@ -0,0 +1,270 @@ +// alert("Welcome to Poki-Verse"); +const loader = document.body.querySelector(".loader"); +const forLoadingBody=document.body.querySelector(".forLoadingBody"); + +window.addEventListener("load", (e) => { + setTimeout(()=>{ + loader.classList.add("removeLoader"); + forLoadingBody.classList.remove("forLoadingBody"); + }, 2000); +}); + + +let bodyNode=document.querySelector("body"); +let choose=document.querySelector("#choose"); +let chooseText=document.querySelector("#chooseText"); +let fight=document.querySelector("#fight"); +let fightText=document.querySelector("#fightText"); + + + +let yourScore=document.querySelector("#yourScore"); +let computerScore=document.querySelector("#computerScore"); + +let userchoice; +let randchoice; + + + +function choice(){ + chooseText.innerText=`Your Pokemon ${userchoice}-type fought with ${randchoice}-type`; +} + + +function win(){ + fightText.innerText= "You Won!"; + fight.style.color="#25f505"; + fightText.style.color="#25f505"; + yourScore.innerText=Number(yourScore.innerText)+1; + yourScore.style.color="#1e6133"; + computerScore.style.color="whitesmoke"; +} +function lost(){ + fightText.innerText="You Lost!"; + fightText.style.color="red"; + fight.style.color="red"; + computerScore.innerText=Number(computerScore.innerText)+1; + yourScore.style.color="whitesmoke"; + computerScore.style.color="maroon"; +} +function draw(){ + fightText.innerText="its Draw!"; + fightText.style.color="white"; + fight.style.color="white"; + yourScore.style.color="#394e5c"; + computerScore.style.color="#394e5c"; +} + +bodyNode.style.backgroundImage = "url('pxfuelDark.jpg')"; + + + +let mod=document.querySelector("#mode"); +let modText=document.querySelector("#modeText"); +let anchorColors=document.querySelectorAll("a"); +let wel=document.querySelector("#welcome"); + +let mode="dark"; + document.body.style.color="white"; + +mod.addEventListener("click",(e) =>{ + if (mode === "dark") { + mode = "light"; + bodyNode.style.backgroundImage = "url('pxfuel.jpg')"; + document.body.style.color="black"; + modText.innerText="Dark Mode"; + + anchorColors.forEach((a) => { + a.style.color = "#01438a"; + }); + } else { + mode = "dark"; + bodyNode.style.backgroundImage = "url('pxfuelDark.jpg')"; + document.body.style.color="white"; + modText.innerText="Light Mode"; + + anchorColors.forEach((a) => { + a.style.color = "#aef2f5"; + }); + }} +); + +anchorColors.forEach((a) => { + a.addEventListener("mousemove",(e)=>{ + a.style.fontSize="20px"; + a.style.transition="all 0.3s ease" + }); + a.addEventListener("mouseleave",(e)=>{ + a.style.fontSize="16px"; + }); +}); + + + + + + + +let ground=document.querySelector("#ground"); +let fire=document.querySelector("#fire"); +let grass=document.querySelector("#grass"); +let water=document.querySelector("#water"); +let flying=document.querySelector("#flying"); + +ground.addEventListener("click",(e) =>{ + userchoice="ground"; + console.log(`Your Choice ${userchoice}`); + computerPlay(); + result(userchoice,randchoice); +}) +fire.addEventListener("click",(e) =>{ + userchoice="fire"; + console.log(`Your Choice ${userchoice}`); + computerPlay(); + result(userchoice,randchoice); +}) +grass.addEventListener("click",(e) =>{ + userchoice="grass"; + console.log(`Your Choice ${userchoice}`); + computerPlay(); + result(userchoice,randchoice); +}) +water.addEventListener("click",(e) =>{ + userchoice="water"; + console.log(`Your Choice ${userchoice}`); + randchoice=computerPlay(); + result(userchoice,randchoice); +}) + +flying.addEventListener("click",(e) =>{ + userchoice="flying"; + + console.log(`Your Choice ${userchoice}`); + randchoice=computerPlay(); + result(userchoice,randchoice); +}) + +let computerchoice = ["ground", "fire", "grass", "water", "flying"]; + +function computerPlay() { + randchoice= computerchoice[Math.floor(Math.random()*computerchoice.length)]; +console.log(`Computer Choice ${randchoice}`); +return randchoice; +} + +function result(userchoice,randchoice){ +if(userchoice===randchoice){ + console.log("It's a tie!"); + draw(); + choice(); +} +else{ + if( (userchoice==="ground") &&(randchoice==="flying" ||randchoice==="fire")){ + console.log("You win!"); + win(); + choice(); + } + else if( (userchoice==="ground") &&(randchoice==="grass" ||randchoice==="water")){ + console.log("You Lost!"); + lost(); + choice(); + } + else if( (userchoice==="flying") &&(randchoice==="water" ||randchoice==="grass")){ + console.log("You win!"); + win(); + choice(); + } + else if( (userchoice==="flying") &&(randchoice==="fire" ||randchoice==="ground")){ + console.log("You Lost!"); + lost(); + choice(); + } + else if( (userchoice==="water") &&(randchoice==="fire" ||randchoice==="ground")){ + console.log("You win!"); + win(); + choice(); + } + else if( (userchoice==="water") &&(randchoice==="grass" ||randchoice==="flying")){ + console.log("You Lost!"); + lost(); + choice(); + } + else if( (userchoice==="fire") &&(randchoice==="flying" ||randchoice==="grass")){ + console.log("You win!"); + win(); + choice(); + } + else if( (userchoice==="fire") &&(randchoice==="water" ||randchoice==="ground")){ + console.log("You Lost!"); + lost(); + choice(); + } + else if( (userchoice==="grass") &&(randchoice==="water" ||randchoice==="ground")){ + console.log("You win!"); + win(); + choice(); + } + else if( (userchoice==="grass") &&(randchoice==="fire" ||randchoice==="flying")){ + console.log("You Lost!"); + lost(); + choice(); + } + } +} + + + + +let aboutmeFrame = document.querySelector("#aboutmeFrame"); +let scaledFrameNode = document.querySelector("#scaledFrame"); +scaledFrameNode.classList.add("removeFrame"); +let frame=0; + +aboutmeFrame.addEventListener("click", (e) => { + if (frame === 0){ + scaledFrameNode.classList.remove("removeFrame"); + frame=1; + } + else{ + scaledFrameNode.classList.add("removeFrame"); + frame=0; + } +}); + + +let anchorFontAwesome=document.querySelectorAll("a"); + +anchorFontAwesome.forEach((a) => { + a.addEventListener("mouseenter",(e)=>{ + console.log("Mouse over anchor element:", a.textContent); + a.style.display="inline"; + let icon = document.createElement("icon"); + icon.innerHTML = ' '; + a.append(icon); + icon.style.fontSize="16px"; + icon.style.transition="all 1s ease"; + }); + a.addEventListener("mouseleave",(e)=>{ + let icon = a.querySelector("icon"); + if (icon) { + a.removeChild(icon); + } + }); +}); + + + + + + + + + + + + + + + + + diff --git a/Pokemon-Mini-Game/style.css b/Pokemon-Mini-Game/style.css new file mode 100644 index 00000000..b4328b9b --- /dev/null +++ b/Pokemon-Mini-Game/style.css @@ -0,0 +1,288 @@ +*{ + margin: 0; + padding: 0; +} + +.loader{ + height:100%; + width:100%; + position: fixed; + z-index: 100; + background-color: #27313d; +} +.forLoadingBody{ + height:100vh; + width:100vw; + position: fixed; + z-index: 99; + background-color: #27313d; + margin:0px; +} +.removeLoader{ + visibility: hidden; +} + +body{ + transition: all 1s ease; +} +div{ + margin-left: 20px; + margin-right: 10px; + margin-bottom: 10px; +} +#result{ + margin:0; +} + +#welcome{ + text-align: center; +} + +#wel{ + color:black; + display: inline-block; + text-align: center; + padding: 40px; + padding-top: 10px; + padding-bottom: 35px; + border: 1px solid black; +background-image: url("pokemon-icon-vector-free.jpg"); + background-size: cover; + border-radius: 20px; +margin-top: 10px; + position:relative; +transition: all .5s ease; +} +#wel:hover{ + text-shadow: 0 0 4px cyan,0 0 3px cyan,0 0 2px cyan,0 0 1px cyan; +} + +#mode{ + padding: 10px; + border-radius: 13px; + font-size: 20px; + position: fixed; + top:15px; + right:15px; +} +button:hover{ + background-color: gray; + color:whitesmoke; + transform: scale(1.08); + cursor:pointer; +} +button:focus { + background-color: #969695; + color:whitesmoke; + transform: scale(1.04); +} +button:active { + background-color: #5c5c5b; + color: white; + transform:scale(0.9); +} + + +.choices{ + display: flex; + /* position: relative; + top:100px; */ + justify-content: space-around; + gap:50px; +} +.choice{ + text-align: center; + font-size: 20px; + font-weight: bold; + +} +.choice img{ + height: 150px; + width:150px; +border-radius: 50%; + transition: all 0.1s ease; +} + + .choice :hover{ + cursor: pointer; + transform: scale(1.1); + filter:brightness(110%); + + } + +.choices:has(img:hover) img:not(:hover){ + opacity: 50%; + transform: scale(0.9); + filter:grayscale(5%); +} + +.choices:has(img:active) img:not(:active){ + opacity: 80%; + transform: scale(0.9); + filter:blur(1px); +} +.choice :active{ + cursor: pointer; + transform: scale(0.85); + filter:brightness(110%) sepia(10%) contrast(10px); + transition: all 0.1s ease; +} +#ground :hover{ + box-shadow: 0px 0px 25px 10px #795548; + +} +#water :hover{ + box-shadow: 0px 0px 25px 5px #03a9f4; +} +#fire :hover{ + box-shadow: 0px 0px 25px 5px#ff9800; +} +#grass :hover{ + box-shadow: 0px 0px 25px 5px #8bc34a; +} +#flying :hover{ + box-shadow: 0px 0px 25px 10px #607d8b; +} + + + + + +#fight{ + display: block; + text-align: center; +padding:10px; + border: 1px solid black; + background-color: #808080; + } +#result{ + display: flex; + font-size: 25px; + font-weight: bold; + padding: 20px; + justify-content: center; + gap:50px; + text-align: center; +border: 1px solid black; + margin-top: 20px; + background-color: #808080; +} + +#choose{ + display: block; + text-align: center; + padding:10px; + border: 1px solid black; + background-color: #808080; + margin-bottom: 20px; + font-size: 25px;; +} + +#rules,#choose_your_pokemon{ + margin-left: 5px; +} +#rules p{ + font-family: 'Times New Roman', Times, serif; +} + +#aboutMe{ +margin: 10px; + text-align: center; + font-weight: bold; + padding: 10px; +} + + #aboutMe a{ + color:#aef2f5; + text-decoration: dotted underline; + + text-decoration-color: #e34646; + text-decoration-thickness: 3px;; +} + #aboutMe p{ +margin: 20px; +} + + + + +#scaledFrame{ + height: 600px; + width: 599px; + border: 1px solid black; + background-color: #808080; +} + +@media(max-width:600px){ + body{ + width:600px; + } + + .choice :active{ + opacity: 100%; + cursor: pointer; + transform: scale(0.9); + } + .choice :hover{ + opacity: 100%; + cursor: pointer; + transform: scale(1); + } + +.choices{ + display: flex; + justify-content: space-around; + gap:50px; + flex-wrap: wrap; +} + #rules{ + font-size: 16px; + } +} + +@media(min-width:600px)and (max-width:1000px){ + body{ + width:900px; + } + .choices{ + display: flex; + justify-content: space-around; + gap:50px; + flex-wrap: wrap; +} + .choice :active{ + opacity: 100%; + cursor: pointer; + transform: scale(0.9); + } + .choice :hover{ + opacity: 100%; + cursor: pointer; + transform: scale(1); + } + +} +/* @media(min-width:900px)and (max-width:1024px){ +body{ + width:1024px; +} +} */ + + + +.removeFrame{ + display:none; +} + + + +body ::selection{ + background-color:#7f98b5; +} +body :not(a)::selection{ + color: #b52a48; +} +.choices ::selection, button::selection, br::selection, #mode ::selection, a::selection, iframe::selection{ + background-color: transparent; +} + diff --git a/Pokemon-Mini-Game/water-removebg-preview (1).png b/Pokemon-Mini-Game/water-removebg-preview (1).png new file mode 100644 index 00000000..6ec19ac1 Binary files /dev/null and b/Pokemon-Mini-Game/water-removebg-preview (1).png differ