├── images
├── favicon-32x32.png
├── bg-triangle.svg
├── bg-pentagon.svg
├── icon-close.svg
├── icon-rock.svg
├── icon-scissors.svg
├── icon-spock.svg
├── icon-paper.svg
├── icon-lizard.svg
├── image-rules.svg
├── logo.svg
├── image-rules-bonus.svg
└── logo-bonus.svg
├── design
├── desktop-preview.jpg
├── original
│ ├── mobile-step-1.jpg
│ ├── mobile-step-2.jpg
│ ├── mobile-step-3.jpg
│ ├── desktop-step-1.jpg
│ ├── desktop-step-2.jpg
│ ├── desktop-step-3.jpg
│ ├── desktop-step-4-win.jpg
│ ├── mobile-rules-modal.jpg
│ ├── mobile-step-4-lose.jpg
│ ├── mobile-step-4-win.jpg
│ ├── desktop-rules-modal.jpg
│ └── desktop-step-4-lose.jpg
└── bonus
│ ├── desktop-step-1-bonus.jpg
│ ├── desktop-step-2-bonus.jpg
│ ├── desktop-step-3-bonus.jpg
│ ├── desktop-step-4-bonus.jpg
│ ├── mobile-step-1-bonus.jpg
│ ├── mobile-step-2-bonus.jpg
│ ├── mobile-step-3-bonus.jpg
│ ├── mobile-step-4-bonus.jpg
│ ├── desktop-rules-modal-bonus.jpg
│ └── mobile-rules-modal-bonus.jpg
├── .gitignore
├── style-guide.md
├── LICENSE
├── README.md
├── script.js
├── style.css
└── index.html
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/images/favicon-32x32.png
--------------------------------------------------------------------------------
/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/desktop-preview.jpg
--------------------------------------------------------------------------------
/design/original/mobile-step-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-step-1.jpg
--------------------------------------------------------------------------------
/design/original/mobile-step-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-step-2.jpg
--------------------------------------------------------------------------------
/design/original/mobile-step-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-step-3.jpg
--------------------------------------------------------------------------------
/design/original/desktop-step-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-step-1.jpg
--------------------------------------------------------------------------------
/design/original/desktop-step-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-step-2.jpg
--------------------------------------------------------------------------------
/design/original/desktop-step-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-step-3.jpg
--------------------------------------------------------------------------------
/design/bonus/desktop-step-1-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/desktop-step-1-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/desktop-step-2-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/desktop-step-2-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/desktop-step-3-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/desktop-step-3-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/desktop-step-4-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/desktop-step-4-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/mobile-step-1-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/mobile-step-1-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/mobile-step-2-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/mobile-step-2-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/mobile-step-3-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/mobile-step-3-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/mobile-step-4-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/mobile-step-4-bonus.jpg
--------------------------------------------------------------------------------
/design/original/desktop-step-4-win.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-step-4-win.jpg
--------------------------------------------------------------------------------
/design/original/mobile-rules-modal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-rules-modal.jpg
--------------------------------------------------------------------------------
/design/original/mobile-step-4-lose.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-step-4-lose.jpg
--------------------------------------------------------------------------------
/design/original/mobile-step-4-win.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/mobile-step-4-win.jpg
--------------------------------------------------------------------------------
/design/original/desktop-rules-modal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-rules-modal.jpg
--------------------------------------------------------------------------------
/design/original/desktop-step-4-lose.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/original/desktop-step-4-lose.jpg
--------------------------------------------------------------------------------
/images/bg-triangle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/design/bonus/desktop-rules-modal-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/desktop-rules-modal-bonus.jpg
--------------------------------------------------------------------------------
/design/bonus/mobile-rules-modal-bonus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/all-my-frontend-mini-projects/Rock-paper-scissors_frontend_project/HEAD/design/bonus/mobile-rules-modal-bonus.jpg
--------------------------------------------------------------------------------
/images/bg-pentagon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/icon-close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/icon-rock.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Avoid accidental Sketch file upload
2 | ###############################################
3 | ## Please do not remove line 5 - thanks! 🙂 ##
4 | ###############################################
5 | *.sketch
6 |
7 | # Avoid accidental XD or Figma upload if you convert the design file
8 | #######################################################
9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ##
10 | #######################################################
11 | *.xd
12 | *.fig
13 |
14 | # Avoid your project being littered with annoying .DS_Store files!
15 | .DS_Store
16 |
--------------------------------------------------------------------------------
/images/icon-scissors.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/icon-spock.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
1 | # Front-end Style Guide
2 |
3 | ## Layout
4 |
5 | The designs were created to the following widths:
6 |
7 | - Mobile: 375px
8 | - Desktop: 1366px
9 |
10 | ## Colors
11 |
12 | ### Primary
13 |
14 | - Scissors Gradient: hsl(39, 89%, 49%) to hsl(40, 84%, 53%)
15 | - Paper Gradient: hsl(230, 89%, 62%) to hsl(230, 89%, 65%)
16 | - Rock Gradient: hsl(349, 71%, 52%) to hsl(349, 70%, 56%)
17 | - Lizard Gradient: hsl(261, 73%, 60%) to hsl(261, 72%, 63%)
18 | - Cyan: hsl(189, 59%, 53%) to hsl(189, 58%, 57%)
19 |
20 | ### Neutral
21 |
22 | - Dark Text: hsl(229, 25%, 31%)
23 | - Score Text: hsl(229, 64%, 46%)
24 | - Header Outline: hsl(217, 16%, 45%)
25 |
26 | ### Background
27 |
28 | - Radial Gradient: hsl(214, 47%, 23%) to hsl(237, 49%, 15%)
29 |
30 | ## Fonts
31 |
32 | - Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed)
33 | - Weights: 600, 700
34 |
--------------------------------------------------------------------------------
/images/icon-paper.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD 3-Clause License
2 |
3 | Copyright (c) 2024, Sarthak Sachdev
4 |
5 | Redistribution and use in source and binary forms, with or without
6 | modification, are permitted provided that the following conditions are met:
7 |
8 | 1. Redistributions of source code must retain the above copyright notice, this
9 | list of conditions and the following disclaimer.
10 |
11 | 2. Redistributions in binary form must reproduce the above copyright notice,
12 | this list of conditions and the following disclaimer in the documentation
13 | and/or other materials provided with the distribution.
14 |
15 | 3. Neither the name of the copyright holder nor the names of its
16 | contributors may be used to endorse or promote products derived from
17 | this software without specific prior written permission.
18 |
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 |
--------------------------------------------------------------------------------
/images/icon-lizard.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/image-rules.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Rock Paper Scissors
2 |
3 | ## Experience the classic game of Rock Paper Scissors in a sleek and interactive online format. Play against the computer and test your luck!
4 |
5 | ## Table of Contents
6 |
7 | - [Overview](#overview)
8 | - [The Challenge](#the-challenge)
9 | - [Screenshot](#screenshot)
10 | - [Links](#links)
11 | - [My Process](#my-process)
12 | - [Built With](#built-with)
13 | - [What I Learned](#what-i-learned)
14 | - [Continued Development](#continued-development)
15 | - [Useful Resources](#useful-resources)
16 | - [Author](#author)
17 | - [Acknowledgments](#acknowledgments)
18 | - [Got Feedback for Me?](#got-feedback-for-me)
19 |
20 | ## Overview
21 |
22 | ### The Challenge
23 |
24 | Experience the classic game of Rock Paper Scissors in a sleek and interactive online format. Play against the computer and test your luck!
25 |
26 | Users should be able to:
27 |
28 | - View the optimal layout for the site depending on their device's screen size
29 | - See hover states for all interactive elements on the page
30 |
31 | ### Screenshot
32 |
33 | 
34 |
35 | ### Links
36 |
37 | - Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Rock-paper-scissors_frontend_project)
38 | - Live Site URL: [Live Site](https://rock-paper-scissors-frontend.netlify.app/)
39 |
40 | ## My Process
41 |
42 | ### Built With
43 |
44 | - HTML5
45 | - CSS3
46 | - JavaScript
47 |
48 | You will find all the required assets in the `/design` folder. The assets are already optimized.
49 |
50 | There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts.
51 |
52 | ### What I Learned
53 |
54 | - Implementing game logic for Rock Paper Scissors in JavaScript
55 | - Styling and animating elements for an engaging user experience
56 | - Handling user input and computer-generated choices for gameplay
57 |
58 | This given code snippet I have mentioned took me a lot of time to implement due to the complexity of this design and thus really helped me out in clearing my CSS concepts to the next level.
59 |
60 | ```css
61 | .game-body__circle-container-paper{
62 | position: absolute;
63 | left: 0;
64 | top: -6.5rem;
65 | }
66 | .game-body__circle-container-scissors{
67 | position: absolute;
68 | right: 0;
69 | top: -6.5rem;
70 | }
71 | .game-body__circle-container-rock{
72 | position: absolute;
73 | left: 50%;
74 | bottom: 6rem;
75 | transform: translateX(-50%);
76 | }
77 | .game-body__circle-container-paper,
78 | .game-body__circle-container-scissors,
79 | .game-body__circle-container-rock{
80 | transition: all 0.5s ease-in-out;
81 | }
82 | .game-body__big-circle{
83 | width: 13rem;
84 | height: 13rem;
85 | border-radius: 50%;
86 | overflow: hidden;
87 | position: relative;
88 | box-shadow: 0 3px 3px rgb(0 0 0 / 25%);
89 | }
90 | .game-body__big-circle--dark-blue{
91 | background-color: #2642bf;
92 | }
93 | .game-body__big-circle--dark-yellow{
94 | background-color: #c76b18;
95 | }
96 | .game-body__big-circle--dark-red{
97 | background-color: #9d1736;
98 | }
99 | .game-body__big-circle--light-blue,
100 | .game-body__big-circle--light-yellow,
101 | .game-body__big-circle--light-red{
102 | transform: translateY(-6px) scale(1.03);
103 | }
104 | .game-body__big-circle--light-blue{
105 | background-image: linear-gradient(120deg, hsl(230, 89%, 62%), hsl(230, 89%, 65%));
106 | }
107 | .game-body__big-circle--light-yellow{
108 | background-image: linear-gradient(120deg, hsl(39, 89%, 49%), hsl(40, 84%, 53%));
109 | }
110 | .game-body__big-circle--light-red{
111 | background-image: linear-gradient(120deg, hsl(349, 71%, 52%), hsl(349, 70%, 56%));
112 | }
113 | .game-body__tiny-circle{
114 | width: 10rem;
115 | height: 10rem;
116 | border-radius: 50%;
117 | }
118 | .game-body__tiny-circle--dark-white{
119 | background-color: #bfbfbf;
120 | overflow: hidden;
121 | position: absolute;
122 | left: 50%;
123 | top: 50%;
124 | transform: translate(-50%, -50%);
125 | }
126 | .game-body__tiny-circle--light-white{
127 | background-color: #ddd;
128 | transform: translateY(4px) scale(1.02);
129 | }
130 | ```
131 |
132 | ### Continued development
133 |
134 | The continuously learning journey of a programmer never ends. This project made me realize that there are many concepts that I need to work upon including fundamentals like flex-box and its properties, to more complex concepts like working with fetch and async await in javascript. These areas are some that I think I need to work more upon in the upcoming future as they highlight some of the most significant regions of web development that are important for every developer to know of.
135 |
136 | These key points mentioned here will help me grow accountable and consistent towards improving at writing good quality code and be a successful full stack developer one day.
137 |
138 | ### Useful resources
139 |
140 | - [Harkirat Singh course notes](https://github.com/SartHak-0-Sach/harkirat-singh-course_code_and_notes) - I have added notes of all lectures along with code and lecture insights of all weeks along with bonus lectures to help you all as much as I can.
141 | - [My development code and notes](https://github.com/SartHak-0-Sach/cwh-web-dev-playlist_code_and_notes) - These are my notes that I made while working on my development skills in initial days and did these courses. Make sure to star the repository if you like it.✨💫
142 | - [MDN documentation hover state for CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - This is an amazing article which helped me finally understand hover states. I'd recommend it to anyone still learning this concept.
143 |
144 | ## Author
145 |
146 | Sarthak Sachdev
147 | - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/)
148 | - LeetCode - [@sarthak_sachdev](https://leetcode.com/u/sarthak_sachdev/)
149 | - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69)
150 |
151 | ## Acknowledgments
152 |
153 | I feel like the solutions provided on the website and the continuous doubt solving by industry experts on discord for free is something that is unmatched by anyone else and need to be acknowledged for their efforts in improving me as a developer by suggesting the best practices in your respective tech stack.
154 |
155 | ## Got feedback for me?
156 |
157 | I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com.
158 |
159 | If you liked this project make sure to spread the word and share it with all your friends.
160 |
161 | **Happy coding!** ☺️🚀
162 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | document.querySelector('.rules-btn').addEventListener('click', (e) => {
2 | e.preventDefault();
3 | document.querySelector('.rules-popup').classList.toggle('rules-popup--active');
4 | document.querySelector('.overlay').classList.toggle('overlay--active');
5 | });
6 | document.querySelector('.close-icon').addEventListener('click', () => {
7 | document.querySelector('.rules-popup').classList.remove('rules-popup--active');
8 | document.querySelector('.overlay').classList.toggle('overlay--active');
9 | });
10 |
11 | let gameItemsCont = Array.from(document.querySelectorAll("div[class^='game-body__circle-container'"));
12 | let tempoV;
13 | let tempoArr = [];
14 | let stateFlag = false;
15 | let score = document.querySelector('.header__value');
16 |
17 | setScore(state = 'init', tar = score);
18 | // Loop through Each Game Item
19 | gameItemsCont.forEach((e) => {
20 | // Listen For Click Event
21 | e.addEventListener('click', function () {
22 | // Store The Clicked Item in Variable
23 | tempoV = e;
24 | // Trigger Game Fuction
25 | swipe(flag = stateFlag, arr = gameItemsCont, slim = tempoV, tmpArr = tempoArr);
26 | // Swipe Game State Flag
27 | stateFlag = true;
28 | // Play Again
29 |
30 | });
31 | });
32 | // Stage 1 to 2 trigger Function
33 | function swipe(flag, arr, slim, tmpArr) {
34 | // Stage 2 If TRUE
35 | if (flag === true) {
36 |
37 | }
38 | // Stage 1 if FALSE. And Go To Stage 2
39 | else {
40 | // Add Stage 2 Class to Element
41 | document.querySelector('.bg-triangle').classList.add('bg-triangle--s2');
42 | document.querySelector('.choosed-item--com__bg-circle').classList.add('choosed-item--com__bg-circle--s2');
43 |
44 | // Separation of the elements of an array
45 | arr.filter((e) => {
46 | // Make Sure of Regarding Clicked Item
47 | if (slim !== arr[arr.indexOf(e)]) {
48 | // Add NotClicked Items
49 | tmpArr.push(e);
50 | }
51 | });
52 | // Choose Random Item
53 | let comItem = tmpArr[Math.floor(Math.random() * 2)];
54 | // Add Classes
55 | slim.classList.add('choosed-item--user');
56 | tmpArr.forEach((e) => {
57 | e.classList.add('unchoosed-item');
58 | });
59 | // Show Computer Choice
60 | setTimeout(() => {
61 | comItem.classList.remove('unchoosed-item');
62 | comItem.classList.add('choosed-item--com');
63 | }, 1000)
64 | setTimeout(() => {
65 | document.querySelector('.choosed-item--com__bg-circle').classList.remove('choosed-item--com__bg-circle--s2');
66 | }, 1000)
67 | // Create Heading
68 | let headingUser = document.createElement('h3');
69 | let headingUserContent = document.createTextNode('You Picked');
70 | headingUser.classList.add('you-picked');
71 | headingUser.append(headingUserContent);
72 | slim.append(headingUser);
73 | let headingCom = document.createElement('h3');
74 | let headingComContent = document.createTextNode('The house Picked');
75 | headingCom.append(headingComContent);
76 | headingCom.classList.add('you-picked');
77 | comItem.append(headingCom);
78 | // Check for The Winning Item
79 | // Check for User Choice and Compare With Game Rules
80 | /* Game RULES
81 | Paper beats Rock beats Scissors beats Paper
82 | */
83 | if (slim.className.includes('paper')) {
84 | // If User's Choice is paper, then check for possibilities
85 | if (comItem.className.includes('rock')) {
86 | // WIN
87 | gameOver(state = 'win', hUser1 = headingUser, hCom1 = headingCom);
88 | setTimeout(() => { setScore(state = 'win', tar = score); }, 1500)
89 | // Add Highlight Effect For Choosed Item
90 | setTimeout(() => { highlightEffect(slim = slim); }, 1250);
91 | } else {
92 | //LOSE
93 | gameOver(state = 'lose', hUser1 = headingUser, hCom1 = headingCom);
94 | setTimeout(() => { setScore(state = 'lose', tar = score); }, 1500)
95 | // Add Highlight Effect For Choosed Item
96 | setTimeout(() => { highlightEffect(slim = comItem); }, 1250);
97 | }
98 | } else if (slim.className.includes('rock')) {
99 |
100 | if (comItem.className.includes('scissors')) {
101 | // WIN
102 | gameOver(state = 'win', hUser1 = headingUser, hCom1 = headingCom);
103 | setTimeout(() => { setScore(state = 'win', tar = score); }, 1500);
104 | // Add Highlight Effect For Choosed Item
105 | setTimeout(() => { highlightEffect(slim = slim); }, 1250);
106 | } else {
107 | //LOSE
108 | gameOver(state = 'lose', hUser1 = headingUser, hCom1 = headingCom);
109 | setTimeout(() => { setScore(state = 'lose', tar = score); }, 1500);
110 | // Add Highlight Effect For Choosed Item
111 | setTimeout(() => { highlightEffect(slim = comItem); }, 1250);
112 | }
113 | } else if (slim.className.includes('scissors')) {
114 | if (comItem.className.includes('rock')) {
115 | //LOSE
116 | gameOver(state = 'lose', hUser1 = headingUser, hCom1 = headingCom);
117 | setTimeout(() => { setScore(state = 'lose', tar = score); }, 1500);
118 | // Add Highlight Effect For Choosed Item
119 | setTimeout(() => { highlightEffect(slim = comItem); }, 1250);
120 | } else {
121 | // WIN
122 | gameOver(state = 'win', hUser1 = headingUser, hCom1 = headingCom);
123 | setTimeout(() => { setScore(state = 'win', tar = score); }, 1500);
124 | // Add Highlight Effect For Choosed Item
125 | setTimeout(() => { highlightEffect(slim = slim); }, 1250);
126 | }
127 | }
128 | }
129 | }
130 |
131 | function highlightEffect(slim) {
132 | let c1 = document.createElement('div');
133 | let c2 = document.createElement('div');
134 | let c3 = document.createElement('div');
135 | slim.append(c1);
136 | slim.append(c2);
137 | slim.append(c3);
138 | c1.classList.add('circle');
139 | c1.classList.add('circle--1');
140 | c2.classList.add('circle');
141 | c2.classList.add('circle--2');
142 | c3.classList.add('circle');
143 | c3.classList.add('circle--3');
144 | }
145 | function gameOver(state, hUser1, hCom1) {
146 | let heading = document.createElement('h2');
147 | let playAgain = document.createElement('button');
148 | let gameOverCont = document.createElement('div');
149 | let playAgainSen = document.createTextNode('Play Again');
150 | let winSen = document.createTextNode('You Win');
151 | let loseSen = document.createTextNode('You Lose');
152 | heading.classList.add('gameoversen');
153 | playAgain.classList.add('btn');
154 | gameOverCont.classList.add('game-over-container')
155 | playAgain.append(playAgainSen);
156 | if (state == 'win') {
157 | heading.append(winSen);
158 | } else if (state == 'lose') {
159 | heading.append(loseSen);
160 | }
161 | gameOverCont.append(heading);
162 | gameOverCont.append(playAgain);
163 | setTimeout(() => {
164 | document.querySelector('main').insertBefore(gameOverCont, document.querySelector('.rules-btn'));
165 | // document.querySelector('main').insertBefore(playAgain, document.querySelector('.rules-btn'));
166 | document.querySelector('.choosed-item--user').classList.add('choosed-item--user--s4');
167 | document.querySelector('.choosed-item--com').classList.add('choosed-item--com--s4');
168 | // document.querySelector('.game-body__big-circle').classList.add('game-body__big-circle--s4');
169 | // document.querySelector('.game-body__tiny-circle').classList.add('game-body__tiny-circle--s4');
170 | Array.from(document.querySelectorAll('.game-body__big-circle')).forEach((e) => {
171 | e.classList.add('game-body__big-circle--s4');
172 | });
173 | Array.from(document.querySelectorAll('.game-body__tiny-circle')).forEach((e) => {
174 | e.classList.add('game-body__tiny-circle--s4');
175 | });
176 |
177 | }, 1500)
178 | playAgain.addEventListener('click', () => { initGame(btn = playAgain, heading = heading, hUser = hUser1, hCom = hCom1, gmovCon = gameOverCont) });
179 | }
180 | function initGame(btn, heading, hUser, hCom, gmovCon) {
181 | document.querySelector('.bg-triangle').classList.remove('bg-triangle--s2');
182 | document.querySelector('.choosed-item--com__bg-circle').classList.remove('choosed-item--com__bg-circle--s2');
183 | document.querySelector('.choosed-item--user').classList.remove('choosed-item--user--s4');
184 | document.querySelector('.choosed-item--com').classList.remove('choosed-item--com--s4');
185 | Array.from(document.querySelectorAll('.game-body__big-circle')).forEach((e) => {
186 | e.classList.remove('game-body__big-circle--s4');
187 | });
188 | Array.from(document.querySelectorAll('.game-body__tiny-circle')).forEach((e) => {
189 | e.classList.remove('game-body__tiny-circle--s4');
190 | });
191 | gameItemsCont.forEach((e) => {
192 | if (e.className.includes('choosed-item--user')) {
193 | for (let i = 1; i <= 3; i++) {
194 | document.querySelector(`.circle--${i}`).remove();
195 | }
196 | e.classList.remove('choosed-item--user');
197 | } else if (e.className.includes('choosed-item--com')) {
198 | e.classList.remove('choosed-item--com');
199 | } else {
200 | e.classList.remove('unchoosed-item');
201 | }
202 | });
203 | btn.remove();
204 | heading.remove();
205 | gmovCon.remove();
206 | hUser.remove();
207 | hCom.remove();
208 | stateFlag = false;
209 | tempoArr = [];
210 | }
211 | function setScore(state, tar) {
212 | if (state == 'win') {
213 | tar.textContent++;
214 | } else if (state == 'lose') {
215 | if (tar.textContent > 0) {
216 | tar.textContent--;
217 | }
218 | } else if (state == 'init') {
219 | tar.textContent = 0;
220 | }
221 | }
--------------------------------------------------------------------------------
/images/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/image-rules-bonus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html{
2 | font-size: 62.5%;
3 | box-sizing: border-box;
4 | }
5 | body{
6 | background-image: linear-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%));
7 | background-size: cover;
8 | background-repeat: no-repeat;
9 | min-height: 100vh;
10 | font-family: 'Barlow Semi Condensed', sans-serif;
11 | }
12 | *, *::after, *::before{
13 | box-sizing: border-box;
14 | margin: 0;
15 | padding: 0;
16 | }
17 | main{
18 | position: relative;
19 | margin-top: 10rem;
20 | }
21 | header.header{
22 | border: 5px solid hsl(217, 16%, 45%);
23 | border-radius: 5px;
24 | padding: 1.5rem;
25 | width: 30rem;
26 | margin: 2rem auto;
27 | display: flex;
28 | justify-content: space-between;
29 | align-items: center;
30 | transition: width 0.5s ease-in-out;
31 | }
32 | .heading-main{
33 | color: #ddd;
34 | text-transform: uppercase;
35 | font-weight: 600;
36 | line-height: 0.85;
37 | font-size: 2rem;
38 | }
39 | .header__score-box{
40 | padding: 1rem 2rem;
41 | background-color: #ddd;
42 | text-align: center;
43 | border-radius: 5px;
44 | }
45 | .heading-custom{
46 | text-transform: uppercase;
47 | color: hsl(229, 64%, 46%);
48 | font-size: 1.2rem;
49 | letter-spacing: 2px;
50 | }
51 | .header__value{
52 | color: hsl(229, 25%, 31%);
53 | font-size: 4rem;
54 | font-weight: 700;
55 | line-height: 1;
56 | transition: all 0.3s ease-in-out;
57 | }
58 | .game-body{
59 | width: 30rem;
60 | min-height: 26.25rem;
61 | margin: auto;
62 | position: relative;
63 | }
64 | .bg-triangle{
65 | position: absolute;
66 | left: 50%;
67 | top: 0;
68 | transform: translateX(-50%);
69 | width: 75%;
70 | transition: all 0.5s ease-in-out;
71 | }
72 | .game-body__circle-container-paper{
73 | position: absolute;
74 | left: 0;
75 | top: -6.5rem;
76 | }
77 | .game-body__circle-container-scissors{
78 | position: absolute;
79 | right: 0;
80 | top: -6.5rem;
81 | }
82 | .game-body__circle-container-rock{
83 | position: absolute;
84 | left: 50%;
85 | bottom: 6rem;
86 | transform: translateX(-50%);
87 | }
88 | .game-body__circle-container-paper,
89 | .game-body__circle-container-scissors,
90 | .game-body__circle-container-rock{
91 | transition: all 0.5s ease-in-out;
92 | }
93 | .game-body__big-circle{
94 | width: 13rem;
95 | height: 13rem;
96 | border-radius: 50%;
97 | overflow: hidden;
98 | position: relative;
99 | box-shadow: 0 3px 3px rgb(0 0 0 / 25%);
100 | }
101 | .game-body__big-circle--dark-blue{
102 | background-color: #2642bf;
103 | }
104 | .game-body__big-circle--dark-yellow{
105 | background-color: #c76b18;
106 | }
107 | .game-body__big-circle--dark-red{
108 | background-color: #9d1736;
109 | }
110 | .game-body__big-circle--light-blue,
111 | .game-body__big-circle--light-yellow,
112 | .game-body__big-circle--light-red{
113 | transform: translateY(-6px) scale(1.03);
114 | }
115 | .game-body__big-circle--light-blue{
116 | background-image: linear-gradient(120deg, hsl(230, 89%, 62%), hsl(230, 89%, 65%));
117 | }
118 | .game-body__big-circle--light-yellow{
119 | background-image: linear-gradient(120deg, hsl(39, 89%, 49%), hsl(40, 84%, 53%));
120 | }
121 | .game-body__big-circle--light-red{
122 | background-image: linear-gradient(120deg, hsl(349, 71%, 52%), hsl(349, 70%, 56%));
123 | }
124 | .game-body__tiny-circle{
125 | width: 10rem;
126 | height: 10rem;
127 | border-radius: 50%;
128 | }
129 | .game-body__tiny-circle--dark-white{
130 | background-color: #bfbfbf;
131 | overflow: hidden;
132 | position: absolute;
133 | left: 50%;
134 | top: 50%;
135 | transform: translate(-50%, -50%);
136 | }
137 | .game-body__tiny-circle--light-white{
138 | background-color: #ddd;
139 | transform: translateY(4px) scale(1.02);
140 | }
141 | .content-icon{
142 | position: absolute;
143 | left: 50%;
144 | top: 50%;
145 | transform: translate(-50%, -50%);
146 | }
147 | .rules-btn{
148 | color: #c9c9c9;
149 | text-decoration: none;
150 | text-transform: uppercase;
151 | padding: 0.75rem 0;
152 | border: 1.5px solid #c9c9c9;
153 | border-radius: 7px;
154 | font-size: 1.2rem;
155 | letter-spacing: 5px;
156 | margin: 5rem auto;
157 | width: 11rem;
158 | display: block;
159 | text-align: center;
160 | font-weight: 600;
161 | line-height: 1.2;
162 | z-index: 999;
163 | }
164 | .rules-popup{
165 | position: fixed;
166 | left: 0;
167 | top: 0;
168 | width: 100%;
169 | height: 100%;
170 | background-color: #eee;
171 | display: flex;
172 | flex-direction: column;
173 | align-items: center;
174 | justify-content: space-around;
175 | padding: 2rem;
176 | clip-path: circle(0 at 50% 50%);
177 | transition: all 0.5s ease-out;
178 | z-index: 999;
179 | }
180 | .rules-popup--active{
181 | clip-path: circle(100% at 50% 50%);
182 | }
183 | .rules-heading{
184 | font-size: 3rem;
185 | text-transform: uppercase;
186 | color: hsl(229, 25%, 31%);
187 | }
188 | @keyframes smoothGrowing1 {
189 | 0%{
190 | width: 0;
191 | height: 0;
192 | }
193 | 50%{
194 | width: 15rem;
195 | height: 15rem;
196 | }
197 | 100%{
198 | width: 17rem;
199 | height: 17rem;
200 | }
201 | }
202 | @keyframes smoothGrowing2 {
203 | 0%{
204 | width: 0;
205 | height: 0;
206 | }
207 | 50%{
208 | width: 17rem;
209 | height: 17rem;
210 | }
211 | 100%{
212 | width: 21rem;
213 | height: 21rem;
214 | }
215 | }
216 | @keyframes smoothGrowing3 {
217 | 0%{
218 | width: 0;
219 | height: 0;
220 | }
221 | 50%{
222 | width: 20rem;
223 | height: 20rem;
224 | }
225 | 100%{
226 | width: 25rem;
227 | height: 25rem;
228 | }
229 | }
230 | /*______________STAGE____2______________*/
231 |
232 | .choosed-item--user{
233 | top: 0;
234 | left: 0;
235 | right: auto;
236 | bottom: auto;
237 | transform: translate(0);
238 | }
239 | .choosed-item--com{
240 | top: 0;
241 | right: 0;
242 | left: auto;
243 | transform: translate(0);
244 | bottom: auto;
245 | }
246 | .unchoosed-item{
247 | opacity: 0;
248 | top: 0;
249 | right: 0;
250 | left: auto;
251 | bottom: auto;
252 | transform: translate(0);
253 | }
254 | .choosed-item--user,
255 | .choosed-item--com,
256 | .unchoosed-item{
257 | cursor: none;
258 | }
259 | .choosed-item--com__bg-circle{
260 | position: absolute;
261 | right: 1rem;
262 | top: 1rem;
263 | background-color: rgba(0, 0, 0, 0.1);
264 | width: 11rem;
265 | height: 11rem;
266 | border-radius: 50%;
267 | opacity: 0;
268 | visibility: hidden;
269 | transition: all 0.5s ease-in-out;
270 | }
271 | .choosed-item--com__bg-circle--s2{
272 | opacity: 1;
273 | visibility: visible;
274 | }
275 | .bg-triangle--s2{
276 | opacity: 0;
277 | }
278 | .you-picked,.house-picked{
279 | color: #eee;
280 | text-transform: uppercase;
281 | position: absolute;
282 | left: 50%;
283 | bottom: -3rem;
284 | transform: translateX(-50%);
285 | font-size: 1.25rem;
286 | white-space: nowrap;
287 | letter-spacing: 2px;
288 | font-weight: 600;
289 | transition: all 0.5s ease-in-out;
290 | text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
291 | }
292 | .circle{
293 | position: absolute;
294 | left: 50%;
295 | top: 50%;
296 | transform: translate(-50%, -50%);
297 | border-radius: 50%;
298 | z-index: -1;
299 | transition: all 0.3s ease-in-out;
300 | }
301 | .circle--1{
302 | width: 17rem;
303 | height: 17rem;
304 | background-color: rgba(255, 255, 255, 0.06);
305 | animation: smoothGrowing1 0.25s ease-in-out;
306 | }
307 | .circle--2{
308 | width: 21rem;
309 | height: 21rem;
310 | background-color: rgba(255, 255, 255, 0.03);
311 | animation: smoothGrowing2 0.5s ease-in-out;
312 | }
313 | .circle--3{
314 | width: 25rem;
315 | height: 25rem;
316 | background-color: rgba(255, 255, 255, 0.01);
317 | animation: smoothGrowing3 0.75s ease-in-out;
318 | }
319 | /* .game-over-container{} */
320 | .gameoversen{
321 | color: #eee;
322 | text-transform: uppercase;
323 | margin: auto;
324 | font-size: 5rem;
325 | font-weight: 700;
326 | text-align: center;
327 | transition: all 0.5s ease-in-out;
328 | }
329 | .btn{
330 | text-decoration: none;
331 | color: hsl(214, 47%, 23%);
332 | width: 20rem;
333 | padding: 1.25rem 3rem;
334 | border-radius: 7px;
335 | background-color: #eee;
336 | display: block;
337 | margin: 1rem auto;
338 | text-align: center;
339 | font-size: 1.4rem;
340 | text-transform: uppercase;
341 | letter-spacing: 2px;
342 | cursor: pointer;
343 | transition: all 0.5s ease-in-out;
344 | font-weight: 700;
345 | border: none;
346 | }
347 | /*______________STAGE____3______________*/
348 | /* MEDIA */
349 | @media only screen and (min-width: 600px) {
350 | header.header{
351 | padding: 1.5rem;
352 | width: 55rem;
353 | margin: 2rem auto;
354 | }
355 | }
356 | @media only screen and (min-width: 900px) {
357 | html{
358 | font-size: 75%;
359 | }
360 | header.header{
361 | padding: 1.5rem;
362 | width: 70rem;
363 | margin: 2rem auto;
364 | }
365 | .heading-main{
366 | font-size: 2.75rem;
367 | }
368 | .game-body{
369 | width: 45rem;
370 | min-height: 39rem;
371 | }
372 | .game-body__big-circle{
373 | border-radius: 50%;
374 | overflow: hidden;
375 | position: relative;
376 | cursor: pointer;
377 | transition: all 0.5s ease-in-out;
378 | width: 19rem;
379 | height: 19rem;
380 | }
381 | .game-body__tiny-circle{
382 | width: 14.5rem;
383 | height: 14.5rem;
384 | border-radius: 50%;
385 | }
386 | .game-body__big-circle--s4{
387 | width: 25rem;
388 | height: 25rem;
389 | }
390 | .game-body__tiny-circle--s4{
391 | width: 20rem;
392 | height: 20rem;
393 | }
394 | .game-body__circle-container-paper{
395 | top: -8rem;
396 | }
397 | .game-body__circle-container-scissors{
398 | top: -8rem;
399 | }
400 | .game-body__circle-container-rock{
401 | position: absolute;
402 | left: 50%;
403 | bottom: 8rem;
404 | transform: translateX(-50%);
405 | }
406 | .rules-btn{
407 | margin: -7rem 3rem 4rem auto;
408 | }
409 | .content-icon{
410 | transform: translate(-50%, -50%) scale(1.75);
411 | }
412 | .game-body__big-circle:hover{
413 | transform: scale(1.09) translateY(-5px);
414 | }
415 | .game-body__tiny-circle--light-white{
416 | background-color: #ddd;
417 | transform: translateY(7px) scale(1.02);
418 | }
419 | .game-body__big-circle--light-blue,
420 | .game-body__big-circle--light-yellow,
421 | .game-body__big-circle--light-red{
422 | transform: translateY(-9px) scale(1.03);
423 | }
424 | .choosed-item--com__bg-circle{
425 | width: 15rem;
426 | height: 15rem;
427 | }
428 | .rules-popup{
429 | left: 50%;
430 | top: 50%;
431 | transform: translate(-50%, -50%);
432 | width: auto;
433 | height: auto;
434 | flex-direction: row;
435 | flex-wrap: wrap;
436 | align-items: center;
437 | justify-content: space-between;
438 | padding: 2rem;
439 | border-radius: 8px;
440 | backdrop-filter: opacity(20%);
441 | }
442 | .rules-popup--active{
443 | clip-path: circle(100% at 50% 50%);
444 | }
445 | .rules-heading{
446 | font-size: 3rem;
447 | text-transform: uppercase;
448 | color: hsl(229, 25%, 31%);
449 | }
450 | .rules-content{
451 | flex-basis: 100%;
452 | order: 3;
453 | display: flex;
454 | justify-content: center;
455 | margin-top: 3rem;
456 | }
457 | .close-icon{
458 | cursor: pointer;
459 | }
460 | .close-icon path{
461 | fill: #3B4262;
462 | fill-rule: "evenodd";
463 | opacity: .25;
464 | transition: all 0.2s ease-in-out;
465 | }
466 | .close-icon:hover path{
467 | opacity: 1;
468 | }
469 | .overlay{
470 | position: fixed;
471 | z-index: 9;
472 | left: 0;
473 | top: 0;
474 | width: 100%;
475 | height: 100%;
476 | background-color: rgba(0, 0, 0, 0.35);
477 | visibility: hidden;
478 | transition: all 0.25s ease-in-out;
479 | }
480 | .overlay--active{
481 | visibility: visible;
482 | }
483 | .choosed-item--user{
484 | top: 0;
485 | left: 0;
486 | right: auto;
487 | bottom: auto;
488 | transform: translate(0);
489 | }
490 | .choosed-item--com{
491 | top: 0;
492 | right: 0;
493 | left: auto;
494 | transform: translate(0);
495 | bottom: auto;
496 | }
497 | .unchoosed-item{
498 | top: 0;
499 | right: 0;
500 | left: auto;
501 | transform: translate(0);
502 | bottom: auto;
503 | }
504 | .choosed-item--user--s4{
505 | left: -15rem;
506 | }
507 | .choosed-item--com--s4{
508 | right: -15rem;
509 | }
510 | .you-picked,.house-picked{
511 | color: #eee;
512 | text-transform: uppercase;
513 | position: absolute;
514 | left: 50%;
515 | bottom: auto;
516 | top: -3rem;
517 | transform: translateX(-50%);
518 | }
519 | .circle--1{
520 | width: 25rem;
521 | height: 25rem;
522 | background-color: rgba(255, 255, 255, 0.06);
523 | animation: smoothGrowing1 0.25s ease-in-out;
524 | }
525 | .circle--2{
526 | width: 35rem;
527 | height: 35rem;
528 | background-color: rgba(255, 255, 255, 0.03);
529 | animation: smoothGrowing2 0.5s ease-in-out;
530 | }
531 | .circle--3{
532 | width: 45rem;
533 | height: 45rem;
534 | background-color: rgba(255, 255, 255, 0.01);
535 | animation: smoothGrowing3 0.75s ease-in-out;
536 | }
537 | .game-over-container{
538 | position: absolute;
539 | left: 50%;
540 | top: 12.5rem;
541 | transform: translate(-50%, -50%);
542 | }
543 | .btn:hover{
544 | color: hsl(349, 71%, 52%);
545 | }
546 | @keyframes smoothGrowing1 {
547 | 0%{
548 | width: 0;
549 | height: 0;
550 | }
551 | 50%{
552 | width: 10rem;
553 | height: 10rem;
554 | }
555 | 100%{
556 | width: 25rem;
557 | height: 25rem;
558 | }
559 | }
560 | @keyframes smoothGrowing2 {
561 | 0%{
562 | width: 0;
563 | height: 0;
564 | }
565 | 50%{
566 | width: 25rem;
567 | height: 25rem;
568 | }
569 | 100%{
570 | width: 35rem;
571 | height: 35rem;
572 | }
573 | }
574 | @keyframes smoothGrowing3 {
575 | 0%{
576 | width: 0;
577 | height: 0;
578 | }
579 | 50%{
580 | width: 30rem;
581 | height: 30rem;
582 | }
583 | 100%{
584 | width: 45rem;
585 | height: 45rem;
586 | }
587 | }
588 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Rock Paper Scissors
8 |
9 |
10 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
41 |
52 |
53 |
54 |
55 |
56 |
57 |
60 |
67 |
78 |
79 |
80 |
81 |
82 |
83 |
86 |
93 |
104 |
105 |
106 |
107 |
108 |