├── images ├── paper.png ├── rock.png └── scissors.png ├── index.html ├── README.md ├── styles.css └── scripts.js /images/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seo-asif/Rock-Paper-Scissors/HEAD/images/paper.png -------------------------------------------------------------------------------- /images/rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seo-asif/Rock-Paper-Scissors/HEAD/images/rock.png -------------------------------------------------------------------------------- /images/scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/seo-asif/Rock-Paper-Scissors/HEAD/images/scissors.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | rock-paper-scissors 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Challenge 3: Rock Paper Scissors

15 |

Players deliver hand signals representing rock, paper, or scissors, with the outcome determined by these three rules:
16 | 17 |
  • Rock wins against scissors.
    • 18 |
  • Scissors win against paper.
    • 19 |
  • Paper wins against rock.
    • 20 |

    21 | 22 |
    23 |
    24 |
    25 | rock 26 | paper 27 | scissors 28 | 29 |
    30 |
    31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rock-Paper-Scissors 2 | 3 | This is a simple implementation of the classic Rock Paper Scissors game using HTML, CSS, and JavaScript. The game allows Human player and Bot player to compete against each other by selecting one of the three options: Rock, Paper, or Scissors. The winner is determined based on the standard rules of the game. 4 | 5 | #Demo
    6 | You can try out the game by visiting the following link: [Rock Paper Scissors Game Demo](https://rock-pap.vercel.app/)

    7 | ![Alt Text](https://static.vecteezy.com/system/resources/previews/000/691/497/original/rock-paper-scissors-neon-icons-vector.jpg) 8 |

    #Features
    9 | Human player and Bot player can compete against each other. 10 | Real-time updates and feedback on the game result. 11 | Clear and intuitive user interface. 12 | Option to restart the game after each round.
    13 |
    #Technologies Used
    14 | HTML
    15 | CSS
    16 | JavaScript

    17 | 18 |
    #Getting Started
    19 | To run the game locally on your machine, follow these steps:
    20 | 21 |
    #Clone the repository:
    22 | shell 23 | Copy code 24 | git clone https://github.com/seo-asif/rock-paper-scissors.git 25 | 26 |
    #Navigate to the project directory:
    27 | shell 28 | Copy code 29 | cd rock-paper-scissors 30 | Open the index.html file in your preferred web browser. 31 | 32 |
    #Usage
    33 | Player 1 and Bot should each select one of the three options (Rock, Paper, or Scissors) by clicking on the corresponding buttons. 34 | Once both players have made their choices, the result will be displayed on the screen. 35 | To play again, click on the "Again Play" button. 36 | 37 | 38 |
    #Contributing
    39 | Contributions to the project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request. 40 | 41 |
    #License
    42 | This project is licensed under the MIT License. You are free to use, modify, and distribute the code as per the terms of the license. 43 | 44 |
    #Acknowledgments
    45 | The game logic and rules are based on the traditional Rock Paper Scissors game. 46 | The CSS styling is inspired by modern web design trends. 47 |

    Contact
    48 | If you have any questions or feedback, feel free to contact the project maintainer at asif064@gmail.com. 49 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } 12 | 13 | .container-1, 14 | .container-2, 15 | .flex-box-rps { 16 | display: flex; 17 | flex-direction: column; 18 | width: 70%; 19 | align-items: center; 20 | justify-content: center; 21 | background-color: rgb(171, 171, 171); 22 | min-height: 10vh; 23 | margin: 0 auto; 24 | } 25 | 26 | .flex-box-rps { 27 | min-height: 55vh; 28 | flex-direction: row; 29 | flex-wrap: wrap; 30 | } 31 | 32 | .list { 33 | text-align: center; 34 | margin: 40px; 35 | color: #1a1a1a; 36 | font-family: sans-serif; 37 | font-size: 16px; 38 | line-height: 1.5rem; 39 | } 40 | 41 | .flex-box-rps img { 42 | margin: 25px; 43 | box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4); 44 | } 45 | 46 | .flex-box-rps img:hover { 47 | box-shadow: 0 10px 50px rgba(37, 50, 233, 1); 48 | } 49 | 50 | .btn { 51 | align-items: center; 52 | background-clip: padding-box; 53 | background-color: #fa6400; 54 | border: 1px solid transparent; 55 | border-radius: .25rem; 56 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02); 57 | box-sizing: border-box; 58 | color: #fff; 59 | cursor: pointer; 60 | display: inline-flex; 61 | font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; 62 | font-size: 16px; 63 | font-weight: 600; 64 | justify-content: center; 65 | line-height: 1.25; 66 | min-height: 3rem; 67 | padding: calc(.875rem - 1px) calc(1.5rem - 1px); 68 | position: relative; 69 | text-decoration: none; 70 | transition: all 250ms; 71 | user-select: none; 72 | -webkit-user-select: none; 73 | touch-action: manipulation; 74 | vertical-align: baseline; 75 | width: auto; 76 | } 77 | 78 | .btn:hover, 79 | .btn:focus { 80 | background-color: #fb8332; 81 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 82 | } 83 | 84 | .btn:hover { 85 | transform: translateY(-1px); 86 | } 87 | 88 | .btn:active { 89 | background-color: #c85000; 90 | box-shadow: 0 2px 4px rgba(0, 0, 0, .06); 91 | transform: translateY(0); 92 | } 93 | 94 | @media (max-width: 768px) { 95 | .container-1, 96 | .container-2, 97 | .flex-box-rps { 98 | width: 100%; 99 | } 100 | .flex-box-rps { 101 | margin-bottom: 20px; 102 | flex-direction: column; 103 | } 104 | 105 | .list { 106 | margin: 20px; 107 | } 108 | 109 | .flex-box-rps img { 110 | margin: 15px; 111 | } 112 | } 113 | 114 | 115 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | function rpsGame(yourChoice){ 2 | //console.log(yourChoice); 3 | let humanChoice,botChoice; 4 | humanChoice=yourChoice.id; 5 | botChoice=numberTochoice(randToRpsInt()); 6 | //console.log(botChoice); 7 | results= decideWinner(humanChoice,botChoice); 8 | console.log(results); 9 | message=finalMessage(results); 10 | console.log(message); 11 | rpsFrontEnd(humanChoice,botChoice,message); 12 | 13 | 14 | } 15 | 16 | function randToRpsInt(){ 17 | return Math.floor(Math.random()*3) 18 | } 19 | 20 | function numberTochoice(number){ 21 | return ['rock','paper','scissors'][number]; 22 | } 23 | 24 | function decideWinner(yourChoice,computerChoice){ 25 | const rpsDatabase ={ 26 | 'rock':{'scissors':1,'rock':0.5,'paper':0}, 27 | 'paper':{'rock':1,'paper':0.5,'scissors':0}, 28 | 'scissors':{'paper':1,'scissors':0.5,'rock':0}, 29 | } 30 | 31 | const yourScore=rpsDatabase[yourChoice][computerChoice]; 32 | const botScore=rpsDatabase[computerChoice][yourChoice]; 33 | 34 | return [yourScore,botScore] ; 35 | } 36 | 37 | 38 | function finalMessage([yourScore,botScore]){ 39 | if(yourScore===0){ 40 | return {'message':'You Lost!','color':'red'}; 41 | }else if (yourScore===0.5){ 42 | return {'message':'You Tied!','color':'blue'}; 43 | }else{ 44 | return {'message':'You Won!','color':'green'}; 45 | } 46 | 47 | } 48 | 49 | 50 | function rpsFrontEnd(humanImageChoice,botImageChoice,finalMessage){ 51 | 52 | let imageDatabase={ 53 | 'rock' :document.getElementById('rock').src, 54 | 'paper' :document.getElementById('paper').src, 55 | 'scissors' :document.getElementById('scissors').src, 56 | } 57 | 58 | //Remove all the image 59 | document.getElementById('rock').remove(); 60 | document.getElementById('paper').remove(); 61 | document.getElementById('scissors').remove(); 62 | 63 | 64 | 65 | //Creation result 66 | 67 | const humanDiv=document.createElement('div'); 68 | const botDiv=document.createElement('div'); 69 | const messagediv=document.createElement('div'); 70 | 71 | 72 | humanDiv.innerHTML=""; 73 | document.getElementById('flex-box-rps-div').appendChild(humanDiv); 74 | 75 | messagediv.innerHTML="

    "+finalMessage['message'] +"

    " 76 | document.getElementById('flex-box-rps-div').appendChild(messagediv); 77 | 78 | 79 | botDiv.innerHTML=""; 80 | document.getElementById('flex-box-rps-div').appendChild(botDiv); 81 | 82 | } 83 | 84 | 85 | 86 | function reload(){ 87 | location.reload(); 88 | } --------------------------------------------------------------------------------