forked from kunjgit/GameZone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (93 loc) · 5.63 KB
/
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Include Tailwind CSS from CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom Tailwind configuration -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brown: {
500: '#8B4513',
600: '#7A3C12',
700: '#693511',
}
}
}
}
}
</script>
<title>Rock, Paper, Scissors, Lizard, Spock Game</title>
<!-- Link to custom styles -->
<link rel="stylesheet" href="./styles.css" />
</head>
<!-- Body with background image and overlay -->
<body class="text-center text-white bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url('img/RPSLS-Title.png');">
<!-- Semi-transparent overlay for better text readability -->
<div class="fixed inset-0 bg-black bg-opacity-50 -z-10"></div>
<!-- Game title -->
<h1 class="text-4xl my-5">Let's play Rock, Paper, Scissors, Lizard, Spock!</h1>
<main class="container mx-auto px-4">
<!-- Rules section with animated border -->
<div class="px-[10px] py-[1px] rounded-2xl animate-gradient-border inline-block">
<details class="rules-container bg-white bg-opacity-90 text-gray-900 rounded-xl p-5 max-w-2xl mx-auto my-5">
<summary class="cursor-pointer">Rules to the game</summary>
<!-- Game rules content -->
<div class="text-center mt-4 space-y-2">
<!-- ... (rules content) ... -->
<p>You will be playing against the computer.</p>
<p>You can choose between Rock, Paper, Scissors, Lizard and Spock.</p>
<p>The first one to five points wins.</p>
<p>Here are the rules to getting a point in the game:</p>
<ul class="list-none space-y-1">
<li><span>✂️</span> Scissors cuts Paper <span>📄</span></li>
<li><span>📄</span> Paper covers Rock <span>🗿</span></li>
<li><span>🗿</span> Rock crushes Lizard <span>🦎</span></li>
<li><span>🦎</span> Lizard poisons Spock <span>🖖</span></li>
<li><span>🖖</span> Spock smashes Scissors <span>✂️</span></li>
<li><span>✂️</span> Scissors decapitates Lizard <span>🦎</span></li>
<li><span>🦎</span> Lizard eats Paper <span>📄</span></li>
<li><span>📄</span> Paper disproves Spock <span>🖖</span></li>
<li><span>🖖</span> Spock vaporizes Rock <span>🗿</span></li>
<li>(and as it always has) <span>🗿</span> Rock crushes Scissors <span>✂️</span></li>
</ul>
<p>
If the player and computer choose the same option (Ex. Paper and
Paper), then no one gets the point.
</p>
</div>
</details>
</div>
<!-- Score display -->
<div class="score-container flex justify-around my-8 text-xl">
<strong>Player Score: <span class="score font-medium" id="player-score">0</span></strong>
<strong>Computer Score: <span class="score font-medium" id="computer-score">0</span></strong>
</div>
<!-- Game options section -->
<section class="options-container">
<h2 class="text-2xl mb-4">Choose an option:</h2>
<!-- Buttons for player choices -->
<div class="btn-container">
<button id="rock-btn" class="btn bg-brown-600 bg-opacity-80 text-white border-brown-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-brown-700 hover:shadow-lg hover:shadow-brown-500/50 hover:scale-105">Rock</button>
<button id="paper-btn" class="btn bg-white bg-opacity-80 text-black border-gray-300 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-gray-100 hover:shadow-lg hover:shadow-gray-300/50 hover:scale-105">Paper</button>
<button id="scissors-btn" class="btn bg-red-600 bg-opacity-80 text-white border-red-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-red-700 hover:shadow-lg hover:shadow-red-500/50 hover:scale-105">Scissors</button>
<button id="lizard-btn" class="btn bg-violet-600 bg-opacity-80 text-white border-violet-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-violet-700 hover:shadow-lg hover:shadow-violet-500/50 hover:scale-105">Lizard</button>
<button id="spock-btn" class="btn bg-blue-600 bg-opacity-80 text-white border-blue-700 border-2 rounded-full px-6 py-2 m-2 transition duration-300 ease-in-out hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/50 hover:scale-105">Spock</button>
</div>
</section>
<!-- Results display and reset button -->
<div class="results-container text-xl my-4">
<p id="results-msg"></p>
<p id="winner-msg"></p>
<!-- Hidden by default, shown when game ends -->
<button class="btn hidden bg-gradient-to-r from-blue-500 via-violet-500 to-red-500 text-white border-2 border-white rounded-full px-6 py-2 mx-auto mt-5 transition duration-300 ease-in-out hover:scale-105 hover:shadow-lg hover:ring-4 ring-offset-white ring-offset-2 hover:shadow-purple-500/50 animate-gradient" id="reset-game-btn">Play again?</button>
</div>
</main>
<!-- Link to JavaScript file -->
<script src="./script.js"></script>
</body>
</html>