Gameproject

gameproject.markdown

Gameproject

A Pen by Nandhini on CodePen.

License.

index.html

<h1 style="color:blue"><b><center>Let's <span style="color: green">play</b> &#128512</h1></center>
  <h><i><center><strong><span style="color:red">Rock</span>,<span style="color: green">Paper</span>,&<span style="color: blue"> scissors </span>!</strong></i></h>
    <div id="scoreboard">
      <style>
        table,th,td{
          border:1px solid blue;
          }
        </style>
      <h2 style="color:#FF5733;">SCORES</h2>
      
        
     <table style="width:50%;"> 
        
        
      
        <tr>
          <th style="color:orange;">You</th>
            <th style="color: orange;" >Bot</th>
          </tr>
        <tr>
          <td class='scores'id='human-score' style="color:  
#C70039"value ="hs"><center>0</center></td>
          <td class='scores'id='computer-score' style="color:  
#C70039" value="cs"><center>0</center></td>
          
          </tr>
        </table>
      <br>
      <h style="color:  
#00008B;font-size:20px;" ><strong><i>Choose Me <span style="font-size :30px;">&#128521</span></i><strong></h>
      </div>
        
          
    
      <button class="buttons"id="rock" style="font-size:30px; background-color: white">&#9994</button>
            
          
          <button class="buttons" id="paper"  style="font-size:30px; background-color: white;">&#9995</button>
            
          <button class="buttons" id="scissors" style="font-size:30px; background-color: white;">&#9996</button>
        <div class="msg" id="alertmsg" style="color:blue"></div>
        
        <br><br>
        <button id="cleargame" style="background-color:white;color:
#C70039;"  >Clear Game</button>
        </center>
          
          
      
      
      
      
      

script.js

const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
const button= document.querySelectorAll('.buttons');

button.forEach(buttons => {
  buttons.addEventListener("click", () => {
    audio.play();
  });
});

var humanScore=0;
var computerScore=0;
const humanScore_span=document.getElementById('human-score');
const computerScore_span=document.getElementById('computer-score');
    




document.getElementById('rock').onclick=playRock;

document.getElementById('paper').onclick=playPaper;
document.getElementById('scissors').onclick=playScissors;
function playRock(){
  play("rock");
  }
function playPaper(){
  play("paper");
  }
function playScissors(){
  play("scissors");
  } 

function play(humanPlay){
  computerPlay=getComputerPlay();
  document.getElementById('alertmsg').innerHTML= "<p><i>Bot played </i><strong> <b>" +computerPlay+ "</b></strong>.</p> ";
  if(humanPlay=='rock'){
    if(computerPlay=='rock'){
      document.getElementById('alertmsg').innerHTML +="<p>Draw</p>";
      }else if(computerPlay=='paper'){
        document.getElementById('alertmsg').innerHTML+= "<p>You Lose</p>";
       
       computerScore++;
        computerScore_span.textContent=computerScore;
        
        }else if(computerPlay=='scissors'){
          document.getElementById('alertmsg').innerHTML+="<p>You Win</p>";
          humanScore++;
          humanScore_span.textContent=humanScore;
          
          }
          }else if(humanPlay=='paper'){
            if(computerPlay=='rock'){
              document.getElementById('alertmsg').innerHTML+="<p>You Win</p>";
             humanScore++;
              humanScore_span.textContent=humanScore;
              
              }else if(computerPlay=='paper'){
                document.getElementById('alertmsg').innerHTML+="<p>Draw</p>";
              
              
           }else if(computerPlay=='scissors'){
                  document.getElementById('alertmsg').innerHTML+="<p>You Lose</p>";
                computerScore++;
             computerScore_span.textContent=computerScore;
             
                  }
            }else if(humanPlay=='scissors'){
              if(computerPlay=='rock'){
                document.getElementById('alertmsg').innerHTML+="<p>You Lose</p>";
             computerScore++;
                computerScore_span.textContent=computerScore;
                
                } else if(computerPlay=='paper'){
                  document.getElementById('alertmsg').innerHTML+="<p>You Win</p>";
                  humanScore++;
                  humanScore_span.textContent=humanScore;
                  
               }else if(computerPlay=='scissors'){
                    document.getElementById('alertmsg').innerHTML+="<p>Draw<p>";
                    }
              }
              
  
    
     
    }
              
      
    function getComputerPlay() {
      var choices=['rock','paper','scissors'];
      var index=choices[Math.floor(Math.random()*choices.length)];
      return index;
      }


const msgs=document.getElementById('alertmsg')
const Scores=document.querySelectorAll('.scores')
function clearScore(){
  humanScore=0;
  computerScore=0;
  humanScore_span.innerHTML=0;
  computerScore_span.innerHTML=0;
  msgs.innerHTML="";
  
  
  }
const clearGame=document.getElementById('cleargame')
clearGame.onclick=()=>clearScore()