-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4219 from tanishkaa08/main
CREATED THE GAME ELEPHANT ANT MAN
- Loading branch information
Showing
10 changed files
with
205 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # **Elephant_ant_man** | ||
|
|
||
| --- | ||
|
|
||
| <br> | ||
|
|
||
| ## **Description 📃** | ||
|
|
||
| It is a cuter version of the classic game rock paper scissors. It is inspired by the famous bedtime story the ant and the elephant where the ant despite his small size teaches a lesson to the elephant. | ||
| - | ||
|
|
||
| ## **Functionalities 🎮** | ||
|
|
||
| ->the user can select one of the three choices and a message will display on the screen if the user won or lost. if the user lost the computer gets the point and vice versa. | ||
| - | ||
| <br> | ||
|
|
||
| ## **How to play? 🕹️** | ||
|
|
||
| click on any of the three images | ||
| the computer will randomly select a choice of his own | ||
| score will be updated as you won or lost | ||
| its a endless game enjoy playing | ||
|
|
||
| <br> | ||
|
|
||
| ## **Screenshots 📸** | ||
|
|
||
| <br> | ||
|
|
||
| [image](screenshot.png) | ||
|
|
||
|
|
||
| <br> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>ROCK,PAPER and SCISSORS</title> | ||
| <link rel="stylesheet" href="style.css"/> | ||
| </head> | ||
| <body> | ||
| <h1>Ant, Boy and Elephant</h1> | ||
| <div class="choices"> | ||
| <div class="choice" id="Boy"> | ||
| <img src="boyy.jpg"> | ||
| </div> | ||
| <div class="choice" id="Elephant"> | ||
| <img src="elephant.jpg"> | ||
| </div> | ||
| <div class="choice" id="Ant"> | ||
| <img src="ant.jpg"> | ||
| </div> | ||
| </div> | ||
| <div class="scoreboard"> | ||
| <div class="score"> | ||
| <p id="userscore">0</p> | ||
| <p>You</p> | ||
| </div> | ||
| <div class="score"> | ||
| <p id="compscore">0</p> | ||
| <p>Computer</p> | ||
| </div> | ||
| </div> | ||
| <div class="msgcontainer"> | ||
| <p id="msg">Play your move!</p> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| let userScore=0; | ||
| let compScore=0; | ||
|
|
||
| const choices = document.querySelectorAll(".choice"); | ||
| const msg=document.querySelector("#msg"); | ||
| const userScorePara=document.querySelector("#userscore"); | ||
| const compScorePara=document.querySelector("#compscore"); | ||
|
|
||
| const genCompChoice = () => { | ||
| const options=["Boy","Elephant","Ant"]; | ||
| const randIdx=Math.floor(Math.random()*3); | ||
| return options[randIdx]; | ||
| } | ||
| const drawGame=()=>{ | ||
| console.log("It's a tie. Play again!") | ||
| msg.innerText="It's a tie. Play again!" | ||
| msg.style.backgroundColor="rgb(109, 130, 100)" | ||
| } | ||
| const showWinner=(userWin, userChoice, compChoice)=>{ | ||
| if(userWin){ | ||
| console.log("Congratulations! You won.") | ||
| userScore++; | ||
| userScorePara.innerText =userScore; | ||
| msg.innerText=`Congratulations! You won. ${userChoice} beats the ${compChoice}` | ||
| msg.style.backgroundColor="green"; | ||
| } | ||
| else{ | ||
| console.log("Sorry you lost, better luck next time.") | ||
| compScore++; | ||
| compScorePara.innerText=compScore; | ||
| msg.innerText=`Sorry you lost, better luck next time. ${userChoice} lost to the ${compChoice}` | ||
| msg.style.backgroundColor="red"; | ||
| } | ||
| } | ||
|
|
||
| const playGame= (userChoice)=>{ | ||
| console.log("userchoice = ", userChoice); | ||
| const compChoice=genCompChoice(); | ||
| console.log("compChoice= ", compChoice); | ||
|
|
||
| if (userChoice==compChoice){ | ||
| drawGame(); | ||
| }else{ | ||
| let userWin=true; | ||
| if(userChoice=="Boy"){ | ||
| userWin=compChoice==="Elephant"? false:true; | ||
| } | ||
| else if(userChoice=="Elephant"){ | ||
| userWin=compChoice==="Ant"? false:true; | ||
| } | ||
| else{ | ||
| userWin=compChoice==="Boy"? false:true; | ||
| } | ||
| showWinner(userWin, userChoice, compChoice); | ||
|
|
||
| } | ||
| }; | ||
|
|
||
| choices.forEach((choice)=>{ | ||
| choice.addEventListener("click",()=>{ | ||
| const userChoice= choice.getAttribute("id"); | ||
| playGame(userChoice); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| *{ | ||
| margin:0; | ||
| padding:0; | ||
| text-align: center; | ||
| background-color: rgb(217, 251, 223); | ||
| } | ||
| h1 { | ||
| background-color: rgb(109, 130, 100); | ||
| color: azure; | ||
| height: 80px; | ||
| line-height: 80px; | ||
| font: 80px; | ||
|
|
||
| } | ||
| .choice:hover{ | ||
| opacity: 0.5; | ||
| cursor:grab; | ||
| } | ||
| .choice{ | ||
| height: 200px; | ||
| width: 200px; | ||
| border-radius: 50%; | ||
| } | ||
| img{ | ||
| height:175px; | ||
| width:175px; | ||
| border-radius: 50%; | ||
| object-fit: cover; | ||
|
|
||
| } | ||
| .choices{ | ||
| display:flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap:50px; | ||
| margin-top: 90px; | ||
| } | ||
|
|
||
| .scoreboard{ | ||
| display:flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap:100px; | ||
| margin-top:40px; | ||
| font-size:40px; | ||
| color:rgb(53, 76, 53) | ||
| } | ||
| #userscore,#compscore{ | ||
| font-size:60px; | ||
| } | ||
| #msg{ | ||
| background-color: rgb(109, 130, 100); | ||
| color:azure; | ||
| font-size:35px; | ||
| font-style:italic; | ||
| height:60px; | ||
| display:inline; | ||
| padding: 20px; | ||
| border-radius: 1rem; | ||
|
|
||
| } | ||
| .msgcontainer{ | ||
| margin-top: 60px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.