introduction to RPSjs

RPSjs is a rock paper scissors game library that helps
in creating a fun and awsome RPS games.

V 1.0.1

#getting started

to get started you will need to bring in rockPaperScissorsJS (RPSjs) library by adding the script tags onto the head and pointing it to the RPSjs file

if you are using a cdn the src should point to that cdn link.


   <head>
        <script src="path/to/rockPaperScissors.js"> </script> 
   </head>    
   

#docs and examples

each of the examples bellow show how the library can be used and bellow each is a demo and a few words on how it works.

let's get started.

    
    data: <p id="text"></p> 

    <script>
      const player = new Play(e); // where e can be 'rock','paper' or 'scissors' 
       //this creates a new object player and the action must be passed as an argument
       //the three actions are users guess which could be `rock`,`paper` or `scissors`

     let data = player.Roll(); 
     document.getElementById('text').textContent = `computer:${data.computer} user:${data.user} won:${data.won}`
     //the Roll() function returns an object.
     // try it bellow
    </script>
    
    

#Play Object

the play object takes a parameter which would be the users input
allowed parameters should only be `rock`,`paper` or `scissors`.


note: the parameter passed is what the user placed as input and also notice the Roll() function cause we will use that a lot

        
    data: <p id="text"></p>  
    <input type="text" id="user-input" >

  <script>
    let input = document.queryselector('user-input');
    const player = new Play(input.value)// dynamically changing according to users input 

    let data = player.Roll();// always call the Roll function 
    document.getElementById('text').textContent = `computer:${data.computer} user:${data.user} won:${data.won}`
  </script>

        
        

#Roll function

the Roll function takes users input and generates computers guess then compares and returns output.

it is not necessary to pass the users guess as a parameter when creating a new Object, you can instead pass it on the Roll function and it perform exactly the same.
this is highly recommended.
allowed parameters should also be `rock`,`paper` or `scissors`.


  
data: <p id="text"></p>  

ltselect id="user-input" >
 <option>rock</option>  
 <option>paper</option>  
 <option>scissors</option>  
</select>

<script>
  let input = document.queryselector('user-input');
  const player = new Play()

    let data = player.Roll(input.value);// still works the same but this is recommended
    document.getElementById('text').textContent = `computer:${data.computer} user:${data.user} won:${data.won}`
</script>
        
        

#last two functions

there are two functions left

this two functions are not necessarily important but maybe you may need it for the following reasons:

  • you only need to generate the computers guess randomly.
  • you already got the computer and users results and need to determine who the winner is.

  • the Roll function does this under the hood for you.


    #compute function

    The compute function is the easiest cause it takes no parameters and returns at random either `rock`,`paper` or `scissors`.

    
    <p id="text"></p>
     <script> 
      const player = new Play();
      // the compute function will always be random
      document.querySelector('#text').textContent = player.compute();
     </script> 
       

    #won function

    the won funtion takes two parameters one is for the user and the other is for the computers result respectively and using it determines the champion.


    
     data: <p id="text"></p>
     <script> 
      const player = new Play();
      // find who won
        document.querySelector('#text').textContent = player.won('rock','paper');// (user, computer) renders false
        // here are more
        player.won('rock','scissors') // returns true
        player.won('paper','paper') // returns draw
        player.won('paper','scissors') // returns false
        player.won('scissors','rock') // returns false
        // you get the idea 
     </script> 
       

    and that's all :)

    about

    The library is at it's first stage of testing especially the package installed from npm is still in beta.
    improvements are being added to the library as it grows

    any issues should be reported here

    if you would like to support the project please consider starring it on github, it means a lot to me.

    about me

    hello I am bethuel, a 16y web developer or aspiring to be and i am the one maintaining this project. feel free to reach me on: