RPSjs is a rock paper scissors game library that helps
in creating a fun and awsome RPS games.
https://cdn.jsdelivr.net/npm/rpsjs@1.0.0/rockPaperScissors.min.js
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>
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>
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>
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>
there are two functions left
this two functions are not necessarily important but maybe you may need it for the following reasons:
the Roll function does this under the hood for you.
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>
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>
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.