├── README.md
├── dice1.png
├── dice2.png
├── dice3.png
├── dice4.png
├── dice5.png
├── dice6.png
├── script.js
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Dice-Game
2 | Play Dice With Your Friends...
3 |
--------------------------------------------------------------------------------
/dice1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice1.png
--------------------------------------------------------------------------------
/dice2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice2.png
--------------------------------------------------------------------------------
/dice3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice3.png
--------------------------------------------------------------------------------
/dice4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice4.png
--------------------------------------------------------------------------------
/dice5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice5.png
--------------------------------------------------------------------------------
/dice6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PB2204/Dice-Game/HEAD/dice6.png
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | var User1 = "User1"
2 | var User2 = "User2"
3 | function editName() {
4 | User1 = prompt("Change user 1 name")
5 | User2 = prompt("Change user 2 name")
6 | document.querySelector(".user-1").innerHTML = User1
7 | document.querySelector(".user-2").innerHTML = User2
8 |
9 | }
10 |
11 | function rollDice() {
12 | const randomNumber1 = Math.floor(Math.random() * 6) + 1
13 | document.querySelector(".image1").setAttribute("src", "dice" + randomNumber1 + ".png")
14 | const randomNumber2 = Math.floor(Math.random() * 6) + 1
15 | document.querySelector(".image2").setAttribute("src", "dice" + randomNumber2 + ".png")
16 |
17 | if (randomNumber1 > randomNumber2) {
18 | document.querySelector("h1").innerHTML = User1 + " won "
19 | }
20 |
21 | else if (randomNumber2 > randomNumber1) {
22 | document.querySelector("h1").innerHTML = User2 + " won "
23 | }
24 | else {
25 | document.querySelector("h1").innerHTML = "Draw"
26 | }
27 |
28 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html.fontawesome-i2svg-active.fontawesome-i2svg-complete {
2 | background: rgb(106, 41, 150);
3 | background: linear-gradient(142deg, rgba(106, 41, 150, 1) 0%, rgba(4, 29, 38, 1) 46%, rgba(81, 59, 126, 1) 100%);
4 | }
5 |
6 | body {
7 | background-color: #FDF6F0;
8 | backdrop-filter: blur(4px) saturate(175%);
9 | -webkit-backdrop-filter: blur(4px) saturate(175%);
10 | background-color: rgba(255, 255, 255, 0.03);
11 | border-radius: 12px;
12 | }
13 |
14 | .heading {
15 | text-align: center;
16 | margin: auto;
17 | }
18 |
19 | p {
20 | text-align: center;
21 | margin-right: 5rem;
22 | font-size: 2rem;
23 | color: white;
24 | font-family: serif;
25 | }
26 |
27 | .image1 {
28 | width: 80%;
29 | }
30 |
31 | .image2 {
32 | width: 80%;
33 | }
34 |
35 | h1 {
36 | font-family: "Lucida Console", "Courier New", monospace;
37 |
38 | font-size: 4rem;
39 | color: white;
40 | }
41 |
42 |
43 |
44 | .user1 {
45 | float: left;
46 | margin-left: 10rem;
47 | }
48 |
49 | .user2 {
50 | float: right;
51 | margin-right: 10rem;
52 | }
53 |
54 | .dice-container {
55 | padding-top: 23rem;
56 | text-align: center;
57 | }
58 |
59 | .edit-container {
60 | padding-top: 1rem;
61 | text-align: center;
62 | }
63 |
64 | .btn {
65 | background: white;
66 | font-family: "Indie Flower", cursive;
67 | border-radius: 7px;
68 | color: black;
69 | font-size: 1rem;
70 | padding: 16px 16px 16px 16px;
71 | text-decoration: none;
72 | box-shadow: transparent;
73 | }
74 |
75 | .btn:hover {
76 | background: rgb(0, 0, 0);
77 | background: linear-gradient(142deg, rgba(0, 0, 0, 1) 7%, rgba(115, 0, 0, 1) 59%);
78 | color: white;
79 | font-weight: bolder;
80 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Lets roll
24 |
25 |
26 |
User 1
27 |
28 |
29 |
32 |
User 2
33 |
34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------