From 560727c5bf5d10b679bf8afc7bd5d4565bef9e9d Mon Sep 17 00:00:00 2001 From: Sri Ram Date: Sun, 9 Oct 2022 10:28:02 +0530 Subject: [PATCH] Added my Rock-Paper-Scissor game(It also has speech recogintion) --- Rock-Paper-Scissors/index.html | 66 +++++++++++ Rock-Paper-Scissors/script.js | 204 +++++++++++++++++++++++++++++++++ Rock-Paper-Scissors/style.css | 186 ++++++++++++++++++++++++++++++ 3 files changed, 456 insertions(+) create mode 100644 Rock-Paper-Scissors/index.html create mode 100644 Rock-Paper-Scissors/script.js create mode 100644 Rock-Paper-Scissors/style.css 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