diff --git a/Rock-Paper-Scissors/index.html b/Rock-Paper-Scissors/index.html
new file mode 100644
index 0000000..9f577e0
--- /dev/null
+++ b/Rock-Paper-Scissors/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Rock-Paper-Scissors
+
+
+
+
+
+
+
+
Rock-Paper-Scissors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Rock-Paper-Scissors/script.js b/Rock-Paper-Scissors/script.js
new file mode 100644
index 0000000..a0132c3
--- /dev/null
+++ b/Rock-Paper-Scissors/script.js
@@ -0,0 +1,204 @@
+window.onload = function() {
+ $(".choiceButton").click(buttonClick);
+}
+
+function buttonClick() {
+ if (this.id == "rockButton"){
+ userPlay("rock");
+ }
+ else if (this.id == "paperButton"){
+ userPlay("paper");
+ }
+ else if (this.id == "scissorButton"){
+ userPlay("scissors");
+ }
+}
+
+var userMove, computerMove, lastPlay;
+
+var userPlay = function(move){
+ resetHands();
+
+ userMove = move;
+
+ if (move == "rock"){
+ rockHand("user");
+ }
+ else if (move == "paper"){
+ paperHand("user");
+ }
+ else if (move == "scissors"){
+ scissorHand("user");
+ }
+
+ computerPlay();
+
+}
+
+var resetHands = function(){
+ $(".finger").css("width","70px");
+ $(".finger").css("height","30px");
+ $(".finger").css("border-radius","20px");
+ $(".finger").css("left","80px");
+ $(".finger").css("transform-origin","0 50%");
+
+ $(".finger-1").css("top","50px");
+ $(".finger-1").css("--dif","0px");
+
+ $(".finger-2").css("top","78px");
+ $(".finger-2").css("left","84px");
+ $(".finger-2").css("--dif","4px");
+
+ $(".finger-3").css("top","106px");
+ $(".finger-3").css("--dif","0px");
+
+ $(".finger-4").css("top","134px");
+ $(".finger-4").css("height","26px");
+ $(".finger-4").css("left","76px");
+ $(".finger-4").css("--dif","-8px");
+
+ $("div #user-hand .finger-1").css("transform","rotate(0deg)");
+ $("div #user-hand .finger-2").css("transform","rotate(0deg)");
+
+ $("div #computer-hand .finger-1").css("transform","rotate(0deg)");
+ $("div #computer-hand .finger-2").css("transform","rotate(0deg)");
+}
+
+var computerPlay = function(){
+ options = ["rock","paper","scissors"];
+ computerMove = options[Math.floor(Math.random() * 3)];
+
+ if ( computerMove == "rock"){
+ rockHand("computer");
+ }
+ else if ( computerMove == "paper"){
+ paperHand("computer");
+ }
+ else if ( computerMove == "scissors"){
+ scissorHand("computer");
+ }
+
+ console.log(computerMove, userMove);
+ if (computerMove == "rock"){
+ if (userMove == "rock"){
+ lastPlay = "Tied";
+ }
+ else if (userMove == "paper"){
+ lastPlay = "Won";
+ }
+ else if (userMove == "scissors"){
+ lastPlay = "Lost";
+ }
+ }
+
+ else if (computerMove == "paper"){
+ if (userMove == "rock"){
+ lastPlay = "Lost";
+ }
+ else if (userMove == "paper"){
+ lastPlay = "Tied";
+ }
+ else if (userMove == "scissors"){
+ lastPlay = "Won";
+ }
+ }
+ else if (computerMove == "scissors"){
+ if (userMove == "rock"){
+ lastPlay = "Won";
+ }
+ else if (userMove == "paper"){
+ lastPlay = "Lost";
+ }
+ else if (userMove == "scissors"){
+ lastPlay = "Tied";
+ }
+ }
+
+ console.log(lastPlay);
+ $("#message h2").html(lastPlay);
+
+}
+
+var rockHand = function(player){
+
+ var userID;
+ if (player == "user"){
+ userID = "#user-hand"
+ }
+ else if (player == "computer"){
+ userID = "#computer-hand"
+ }
+
+ $(userID + ".finger").css("width","70px");
+ $(userID + ".finger").css("height","30px");
+ $(userID + ".finger").css("border-radius","20px");
+ $(userID + ".finger").css("left","80px");
+ $(userID + ".finger").css("transform-origin","0 50%");
+
+ $(userID + ".finger-1").css("top","50px");
+ $(userID + ".finger-1").css("--dif","0px");
+
+ $(userID + ".finger-2").css("top","78px");
+ $(userID + ".finger-2").css("left","84px");
+ $(userID + ".finger-2").css("--dif","4px");
+
+ $(userID + ".finger-3").css("top","106px");
+ $(userID + ".finger-3").css("--dif","0px");
+
+ $(userID + ".finger-4").css("top","134px");
+ $(userID + ".finger-4").css("height","26px");
+ $(userID + ".finger-4").css("left","76px");
+ $(userID + ".finger-4").css("--dif","-8px");
+
+}
+
+var scissorHand = function(player){
+
+ var userID;
+ if (player == "user"){
+ userID = "#user-hand"
+ }
+ else if (player == "computer"){
+ userID = "#computer-hand"
+ }
+
+ $("div "+ userID +" .finger-1").css("width","130px");
+ $("div "+ userID +" .finger-1").css("transform","rotate(-5deg)");
+ $("div "+ userID +" .finger-2").css("width","130px");
+ $("div "+ userID +" .finger-2").css("transform","rotate(5deg)");
+
+}
+
+var paperHand = function(player){
+
+ var userID;
+ if (player == "user"){
+ userID = "#user-hand"
+ }
+ else if (player == "computer"){
+ userID = "#computer-hand"
+ }
+
+ $("div "+ userID +" .finger").css("left", "124px");
+ $("div "+ userID +" .finger").css("left", "calc(124px + var(--dif))");
+ $("div "+ userID +" .finger").css("width", "80px");
+ $("div "+ userID +" .finger").css("border-left", "0");
+ $("div "+ userID +" .finger").css("border-radius", "0 20px 20px 0");
+
+}
+
+
+if(annyang){
+ console.log("We have annyang!");
+ var commands = {
+ 'stone' : function() { userPlay("rock"); },
+ 'rock' : function() { userPlay("rock"); },
+ 'paper' : function() { userPlay("paper"); },
+ 'scissors' : function() { userPlay("scissors"); }
+ }
+
+ annyang.addCommands(commands);
+
+ annyang.start();
+
+}
\ No newline at end of file
diff --git a/Rock-Paper-Scissors/style.css b/Rock-Paper-Scissors/style.css
new file mode 100644
index 0000000..fc1809d
--- /dev/null
+++ b/Rock-Paper-Scissors/style.css
@@ -0,0 +1,186 @@
+// Credits : alvaromontoro (https://codepen.io/alvaromontoro)
+
+@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');
+
+@keyframes changeOrder {
+ from { z-index: 9;}
+ to { z-index: 1; }
+}
+
+@keyframes handShake {
+ 0%,100% { transform: rotate(10deg); }
+ 50% { transform: rotate(-10deg); }
+}
+
+@keyframes handShake2 {
+ 0%,100% { transform: rotateY(180deg) rotate(10deg); }
+ 50% { transform: rotateY(180deg) rotate(-10deg); }
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ line-height: 1;
+ font-family: Acme, Arial, sans-serif;
+}
+
+form {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+h1 {
+ text-align: center;
+}
+
+#hands {
+ text-align: center;
+}
+
+input:checked ~ div .hand {
+ animation: none !important;
+}
+
+.hand {
+ margin: 20px;
+ width: 200px;
+ height: 200px;
+ position: relative;
+ transform: rotate(10deg);
+ display: inline-block;
+ animation: handShake 2s infinite;
+}
+
+.hand > div {
+ position: absolute;
+ box-sizing: border-box;
+ border: 2px solid black;
+ background: gold;
+ transition: all 0.1s;
+}
+
+.fist {
+ height: 110px;
+ left: 40px;
+ top: 50px;
+ width: 90px;
+ border-radius: 20px 0 0 20px;
+}
+
+.finger {
+ width: 70px;
+ height: 30px;
+ border-radius: 20px;
+ left: 80px;
+ transform-origin: 0 50%;
+}
+
+.finger-1 { top: 50px; --dif: 0px; }
+.finger-2 { top: 78px; left: 84px; --dif: 4px; }
+.finger-3 { top: 106px; --dif: 0px; }
+.finger-4 { top: 134px; height: 26px; left: 76px; --dif: -8px; }
+
+div.thumb {
+ width: 35px;
+ height: 70px;
+
+ border-radius: 0 20px 20px 20px;
+ top: 50px;
+ left: 80px;
+ border-left: 0 solid;
+ box-shadow: -17px 6px 0 -15px black;
+}
+
+div.arm {
+ width: 22px;
+ height: 70px;
+ left: 20px;
+ top: 70px;
+ border: 0;
+ border-top: 2px solid black;
+ border-bottom: 2px solid black;
+}
+
+#user-hand {
+ transform: rotateY(180deg);
+ animation: handShake2 2s infinite;
+ position: relative;
+}
+
+#hands {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#icons {
+ width: 30px;
+ height: 200px;
+ display: inline-flex;
+ flex-direction: column;
+}
+
+#icons > div {
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ width: 60px;
+ height: 60px;
+ overflow: hidden;
+ position: relative;
+}
+
+
+.choiceButton:active {
+ position:static;
+ margin-left: 60px;
+}
+
+.choiceButton:active::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 60px;
+ z-index: 10;
+ height: 60px;
+}
+
+
+.choiceButton {
+ animation: changeOrder 0.45s infinite linear;
+ background: #f5f5f5;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 60px;
+ width: 60px;
+ line-height: 60px;
+ font-size: 2rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+ user-select: none;
+}
+
+.choiceButton:focus {
+ outline: none;
+ box-shadow: none;
+}
+
+.choiceButton:nth-of-type(1) { animation-delay: -0.00s; }
+.choiceButton:nth-of-type(2) { animation-delay: -0.15s; }
+.choiceButton:nth-of-type(3) { animation-delay: -0.30s; }
+
+#message h2{
+ text-align: center;
+}
\ No newline at end of file