Skip to content

Commit 2466f5d

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1976 from nguyenkhoi2806/rock-paper-scsissors
Add Rock paper scsissors game
2 parents 246355c + ddc34cc commit 2466f5d

8 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎Projects/RockPaperScsissors/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Rock Paper Scissors Game
2+
3+
## Overview
4+
5+
This is a simple Rock Paper Scissors game implemented in JavaScript, HTML, and CSS. The game allows a user to play against the computer by choosing between Rock, Paper, and Scissors. The winner is determined based on the classic rules of the game.
6+
7+
## Features
8+
9+
- User vs. Computer: Play the classic Rock Paper Scissors game against the computer.
10+
- Visual Feedback: The game provides visual feedback with images representing the player's and computer's choices.
11+
- Score Tracking: The game keeps track of the player's score, updating it based on wins and losses.
12+
Responsive Design: The interface is designed to be responsive and accessible on various devices.
13+
14+
## How to Play
15+
16+
1 Open the game in a web browser.
17+
2 Click on one of the available choices: Rock, Paper, or Scissors.
18+
3 The computer randomly selects its choice.
19+
4 The winner is determined based on the game rules.
20+
5 The result is displayed along with an updated score.
21+
22+
## Setup
23+
24+
No special setup is required to run the game. Simply open the index.html file in a web browser.
25+
26+
## Technologies Used
27+
28+
- HTML
29+
- Tailwind CSS
30+
- JavaScript
31+
32+
### Project Structure
33+
34+
- index.html: The main HTML file containing the game structure.
35+
- style.css: The CSS file for styling the game.
36+
- main.js: The JavaScript file containing the game logic.
37+
38+
# CONTRIBUTED BY:
39+
40+
[https://github.com/nguyenkhoi2806](KHOI)

‎Projects/RockPaperScsissors/assets/svg/bg-triangle.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RockPaperScsissors/assets/svg/icon-paper.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RockPaperScsissors/assets/svg/icon-rock.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RockPaperScsissors/assets/svg/icon-scissors.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RockPaperScsissors/assets/svg/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/RockPaperScsissors/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.tailwindcss.com"></script>
7+
<title>Rock Paper Sscissors</title>
8+
</head>
9+
<body>
10+
<div class="bg-gradient-to-r from-cyan-500 to-blue-500 h-[100vh]">
11+
<div class="xl:w-[50%] md-w-[100%] m-auto pt-5 flex flex-col gap-[100px]">
12+
<div class="border-2 rounded-md p-5 flex justify-between">
13+
<img src="./assets/svg/logo.svg" />
14+
<div
15+
class="flex flex-col justify-center text-center bg-white rounded-lg p-5 gap-3"
16+
>
17+
<span class="text-2xl text-blue-400">Score</span>
18+
<span class="font-bold text-4xl text-blue-400" id="score">0</span>
19+
</div>
20+
</div>
21+
<div class="justify-center flex" id="game">
22+
<div
23+
class="relative bg-[url('./assets/svg/bg-triangle.svg')] h-[300px] w-[305px] bg-no-repeat bg-center"
24+
>
25+
<div
26+
onclick="Main.play(PAPER)"
27+
class="bg-white absolute left-0 top-[-10%] rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
28+
>
29+
<img
30+
src="./assets/svg/icon-paper.svg"
31+
alt="paper"
32+
class="m-auto"
33+
/>
34+
</div>
35+
<div
36+
onclick="Main.play(SCISSORS)"
37+
class="bg-white absolute right-0 top-[-10%] rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
38+
>
39+
<img
40+
src="./assets/svg/icon-scissors.svg"
41+
alt="scissors"
42+
class="m-auto"
43+
/>
44+
</div>
45+
<div
46+
onclick="Main.play(ROCK)"
47+
class="bg-white absolute left-[34%] bottom-0 rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
48+
>
49+
<img src="./assets/svg/icon-rock.svg" alt="rock" class="m-auto" />
50+
</div>
51+
</div>
52+
</div>
53+
<div
54+
class="flex justify-between w-[100%] md:w-[80%] m-auto hidden"
55+
id="result"
56+
>
57+
<div class="flex-col flex gap-5 items-center">
58+
<span class="text-xl md:text-2xl font-bold text-white"
59+
>You picked</span
60+
>
61+
<div class="bg-white rounded-full w-[100px] h-[100px] flex">
62+
<img alt="player" class="m-auto" id="player" />
63+
</div>
64+
</div>
65+
<div class="flex flex-col items-center gap-4">
66+
<span
67+
class="text-xl md:text-2xl font-bold text-white"
68+
id="result-text"
69+
>You win</span
70+
>
71+
<button
72+
onclick="Main.playAgain()"
73+
class="bg-white w-[100px] border-0 text-sky-500 rounded-lg pointer"
74+
>
75+
Play again
76+
</button>
77+
</div>
78+
<div class="flex-col flex items-center gap-5">
79+
<span class="text-xl md:text-2xl font-bold text-white"
80+
>Computer pick</span
81+
>
82+
<div class="bg-white rounded-full w-[100px] h-[100px] flex">
83+
<img alt="computer" id="computer" class="m-auto" />
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</body>
90+
<script src="./main.js"></script>
91+
</html>

0 commit comments

Comments
 (0)