├── img ├── Rock.png ├── Paper.png ├── Rock-logo.png ├── Scissors.png ├── Paper-logo.png ├── Scissors-logo.png └── favicon_io │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ └── android-chrome-512x512.png ├── .gitattributes ├── README.md ├── css ├── style.css.map ├── style.scss └── style.css ├── index.html └── script.js /img/Rock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Rock.png -------------------------------------------------------------------------------- /img/Paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Paper.png -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rock Paper Scissors 2 | 3 | ### https://theomorphic.github.io/Suefa 4 | -------------------------------------------------------------------------------- /img/Rock-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Rock-logo.png -------------------------------------------------------------------------------- /img/Scissors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Scissors.png -------------------------------------------------------------------------------- /img/Paper-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Paper-logo.png -------------------------------------------------------------------------------- /img/Scissors-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/Scissors-logo.png -------------------------------------------------------------------------------- /img/favicon_io/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/favicon.ico -------------------------------------------------------------------------------- /img/favicon_io/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/favicon-16x16.png -------------------------------------------------------------------------------- /img/favicon_io/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/favicon-32x32.png -------------------------------------------------------------------------------- /img/favicon_io/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/apple-touch-icon.png -------------------------------------------------------------------------------- /img/favicon_io/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/android-chrome-192x192.png -------------------------------------------------------------------------------- /img/favicon_io/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theomorphic/Suefa/HEAD/img/favicon_io/android-chrome-512x512.png -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACQ,gGAAA;AAKR;EACC,SAAA;EACA,UAAA;EACA,sBAAA;EACA,wCAAA;ACJD;;ADOA;EACC,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,yBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACJD;;ADQA;EACC,sBAAA;EACA,kBAAA;EACA,mBAAA;EACA,yCAAA;ACLD;;ADQA;EACC,aAAA;EACA,qBAAA;OAAA,gBAAA;ACLD;;ADQA;EACC,uCAAA;EACA,sBAAA;ACLD;;ADQA;EACC;IACC,wBAAA;ECLA;AACF;ADQA;EACC,sCAAA;EACA,uBAAA;ACND;;ADSA;EACC;IACC,yBAAA;ECNA;AACF;ADSA;EACC,YAAA;ACPD;;ADUA;EACC,wBAAA;ACPD;;ADUA;EACC,yCAAA;ACPD;;ADUA;EACC,kBAAA;EACA,eAAA;EAEA,kBAAA;ACRD;;ADYA;EACC,WAAA;ACTD;;ADYA;EACC,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,kBAAA;ACTD;;ADaA;EACC,oBAAA;ACVD;;ADaA;EACC,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,YAAA;EACA,6BAAA;EACA,eAAA;ACVD;;ADcA;EACC,UAAA;ACXD;;ADcA;EACC,UAAA;ACXD;;ADcA;EACC,oBAAA;ACXD;;ADeA;EACC,mBAAA;EACA,gBAAA;EACA,oBAAA;ACZD","file":"style.css"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Suefa 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | Let's fight! 30 |
31 | 32 |
33 | 34 | 35 |

Rock

36 | 37 | 38 | 39 | 40 |

Paper

41 | 42 | 43 | 44 |

Scissors

45 | 46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | const gameContainer = document.querySelector(".container"); 3 | const userResult = document.querySelector(".user_result img"); 4 | const cpuResult = document.querySelector(".cpu_result img"); 5 | const result = document.querySelector(".result"); 6 | const optionImages = document.querySelectorAll(".option_image"); 7 | 8 | optionImages.forEach((image, index) =>{ 9 | image.addEventListener("click", (e) =>{ 10 | image.classList.add("active"); 11 | 12 | userResult.src = cpuResult.src = "./img/Rock-logo.png"; 13 | result.textContent = "su ye fa..."; 14 | 15 | optionImages.forEach((image2, index2) =>{ 16 | image.classList.add("active"); 17 | index !== index2 && image2.classList.remove("active"); 18 | }); 19 | 20 | gameContainer.classList.add("start"); 21 | 22 | setTimeout(() =>{ 23 | gameContainer.classList.remove("start"); 24 | 25 | let imageSrc = e.target.querySelector("img").src; 26 | userResult.src = imageSrc; 27 | 28 | let randomNumber = Math.floor(Math.random() *3); 29 | 30 | let cpuImages = ["./img/Rock-logo.png", "./img/Paper-logo.png", "./img/Scissors-logo.png"]; 31 | cpuResult.src = cpuImages[randomNumber]; 32 | 33 | let cpuValue = ["R", "P", "S"][randomNumber]; 34 | let userValue = ["R", "P", "S"][index]; 35 | 36 | let outcomes = { 37 | RR: "Draw", 38 | RP: "Defeat", 39 | RS: "Victory", 40 | PP: "Draw", 41 | PR: "Victory", 42 | PS: "Defeat", 43 | SS: "Draw", 44 | SR: "Defeat", 45 | SP: "Victory", 46 | }; 47 | 48 | let outcomeValue = outcomes[userValue + cpuValue]; 49 | 50 | result.textContent = userValue === cpuValue ? "Draw" : `${outcomeValue}`; 51 | // console.log(outcomeValue); 52 | 53 | }, 1800); 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /css/style.scss: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); 3 | 4 | // color: #ff0000; 5 | 6 | 7 | *{ 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | font-family: "Space Grotesk", sans-serif; 12 | } 13 | 14 | body{ 15 | height: 100vh; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | background-color: #f6f7fb; 20 | user-select: none; 21 | 22 | } 23 | 24 | .container{ 25 | background-color: #fff; 26 | padding: 2rem 7rem; 27 | border-radius: 14px; 28 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 29 | } 30 | 31 | .result_images{ 32 | display: flex; 33 | column-gap: 7rem; 34 | } 35 | 36 | .container.start .user_result{ 37 | animation: userShake 0.7s ease infinite; 38 | transform-origin: left; 39 | } 40 | 41 | @keyframes userShake { 42 | 50%{ 43 | transform: rotate(10deg); 44 | } 45 | } 46 | 47 | .container.start .cpu_result{ 48 | animation: cpuShake 0.7s ease infinite; 49 | transform-origin: right; 50 | } 51 | 52 | @keyframes cpuShake { 53 | 50%{ 54 | transform: rotate(-10deg); 55 | } 56 | } 57 | 58 | .result_images img{ 59 | width: 100px; 60 | } 61 | 62 | .user_result img{ 63 | transform: rotate(90deg); 64 | } 65 | 66 | .cpu_result img{ 67 | transform: rotate(-90deg) rotateY(180deg); 68 | } 69 | 70 | .result{ 71 | text-align: center; 72 | font-size: 2rem; 73 | // color: #ff0000; 74 | margin-top: 1.5rem; 75 | } 76 | 77 | 78 | .option_image img{ 79 | width: 75px; 80 | } 81 | 82 | .option_images{ 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: center; 86 | margin-top: 2.5rem; 87 | 88 | } 89 | 90 | .container.start .option_images{ 91 | pointer-events: none; 92 | } 93 | 94 | .option_image{ 95 | display: flex; 96 | flex-direction: column; 97 | align-items: center; 98 | opacity: 0.5; 99 | transition: opacity 0.3s ease; 100 | cursor: pointer; 101 | 102 | } 103 | 104 | .option_image:hover{ 105 | opacity: 1; 106 | } 107 | 108 | .option_image.active{ 109 | opacity: 1; 110 | } 111 | 112 | .option_image img{ 113 | pointer-events: none; 114 | 115 | } 116 | 117 | .option_image p{ 118 | font-size: 1.235rem; 119 | margin-top: 1rem; 120 | pointer-events: none; 121 | 122 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Space Grotesk", sans-serif; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background-color: #f6f7fb; 15 | -webkit-user-select: none; 16 | -moz-user-select: none; 17 | user-select: none; 18 | } 19 | 20 | .container { 21 | background-color: #fff; 22 | padding: 2rem 7rem; 23 | border-radius: 14px; 24 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 25 | } 26 | 27 | .result_images { 28 | display: flex; 29 | -moz-column-gap: 7rem; 30 | column-gap: 7rem; 31 | } 32 | 33 | .container.start .user_result { 34 | animation: userShake 0.7s ease infinite; 35 | transform-origin: left; 36 | } 37 | 38 | @keyframes userShake { 39 | 50% { 40 | transform: rotate(10deg); 41 | } 42 | } 43 | .container.start .cpu_result { 44 | animation: cpuShake 0.7s ease infinite; 45 | transform-origin: right; 46 | } 47 | 48 | @keyframes cpuShake { 49 | 50% { 50 | transform: rotate(-10deg); 51 | } 52 | } 53 | .result_images img { 54 | width: 100px; 55 | } 56 | 57 | .user_result img { 58 | transform: rotate(90deg); 59 | } 60 | 61 | .cpu_result img { 62 | transform: rotate(-90deg) rotateY(180deg); 63 | } 64 | 65 | .result { 66 | text-align: center; 67 | font-size: 2rem; 68 | margin-top: 1.5rem; 69 | } 70 | 71 | .option_image img { 72 | width: 75px; 73 | } 74 | 75 | .option_images { 76 | display: flex; 77 | justify-content: space-between; 78 | align-items: center; 79 | margin-top: 2.5rem; 80 | } 81 | 82 | .container.start .option_images { 83 | pointer-events: none; 84 | } 85 | 86 | .option_image { 87 | display: flex; 88 | flex-direction: column; 89 | align-items: center; 90 | opacity: 0.5; 91 | transition: opacity 0.3s ease; 92 | cursor: pointer; 93 | } 94 | 95 | .option_image:hover { 96 | opacity: 1; 97 | } 98 | 99 | .option_image.active { 100 | opacity: 1; 101 | } 102 | 103 | .option_image img { 104 | pointer-events: none; 105 | } 106 | 107 | .option_image p { 108 | font-size: 1.235rem; 109 | margin-top: 1rem; 110 | pointer-events: none; 111 | }/*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------