Skip to content

Commit 69ea324

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #829 from abhinesh-pr/main
Added Initial Bottle Flip Game
2 parents fed3c5f + d58c039 commit 69ea324

File tree

5 files changed

+339
-0
lines changed

5 files changed

+339
-0
lines changed

‎Bottle Flip Game/broken-bottle.png‎

18.2 KB
Loading

‎Bottle Flip Game/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bottle Flip Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="game-container">
11+
<h1>Bottle Flip Game</h1>
12+
13+
<!-- Bottle Container -->
14+
<div class="bottle-container">
15+
<div class="bottle" id="bottle"></div>
16+
<img id="broken-bottle" src="broken-bottle.png" alt="Broken Bottle">
17+
</div>
18+
19+
<!-- Horizontal Strength Bar -->
20+
<div class="strength-container">
21+
<label for="strength-bar">Strength</label>
22+
<div class="strength-bar-wrapper">
23+
<progress id="strength-bar" value="0" max="100"></progress>
24+
<div id="strength-value">0%</div>
25+
</div>
26+
</div>
27+
28+
<!-- Score and High Score -->
29+
<div id="score">Score: 0</div>
30+
<div id="high-score">High Score: 0</div>
31+
32+
<!-- New Game Button (Initially Hidden) -->
33+
<button id="new-game" onclick="startGame()">New Game</button>
34+
</div>
35+
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Bottle Flip Game/juice.png‎

11.8 KB
Loading

‎Bottle Flip Game/script.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
let score = 0;
2+
let highScore = 0;
3+
let strength = 10; // Start strength at 10
4+
let isFlipping = false;
5+
let pressStartTime = 0;
6+
const maxStrength = 100;
7+
let strengthIncrement = 1; // Controls whether strength is increasing or decreasing
8+
let bottleAngle = 0;
9+
let strengthLoop;
10+
let speedFactor = 1; // This factor increases after successful flips
11+
12+
const bottle = document.getElementById('bottle');
13+
const brokenBottle = document.getElementById('broken-bottle');
14+
const scoreDisplay = document.getElementById('score');
15+
const highScoreDisplay = document.getElementById('high-score');
16+
const strengthBar = document.getElementById('strength-bar');
17+
const strengthValue = document.getElementById('strength-value');
18+
const newGameBtn = document.getElementById('new-game');
19+
const progressFill = document.createElement('div');
20+
progressFill.classList.add('progress-fill');
21+
document.querySelector('.strength-bar-wrapper').appendChild(progressFill);
22+
23+
// Start game function
24+
function startGame() {
25+
// Reset everything for a new game
26+
score = 0;
27+
updateScore();
28+
brokenBottle.style.display = 'none';
29+
bottle.style.display = 'block';
30+
newGameBtn.style.display = 'none';
31+
bottleAngle = 0;
32+
bottle.style.transform = 'rotate(0deg)';
33+
speedFactor = 1; // Reset speed factor
34+
35+
// Reset the strength bar to 0
36+
strength = 0;
37+
strengthBar.value = strength;
38+
strengthValue.textContent = `${strength}%`;
39+
}
40+
41+
// Handle mouse down (start strength calculation)
42+
bottle.addEventListener('mousedown', () => {
43+
if (!isFlipping) {
44+
isFlipping = true;
45+
pressStartTime = Date.now();
46+
strengthIncrement = 1; // Start with increasing strength
47+
startStrengthLoop();
48+
}
49+
});
50+
51+
// Handle mouse up (calculate strength and flip the bottle)
52+
bottle.addEventListener('mouseup', () => {
53+
if (isFlipping) {
54+
isFlipping = false;
55+
clearInterval(strengthLoop);
56+
57+
// Check if the strength is in the success range
58+
if (strength >= 50 && strength <= 60) {
59+
flipBottle(); // Successful flip
60+
} else {
61+
breakBottle(); // Bottle breaks due to incorrect strength
62+
}
63+
}
64+
});
65+
66+
// Loop strength bar from 10-100 and back to 10, with increasing complexity
67+
function startStrengthLoop() {
68+
strengthLoop = setInterval(() => {
69+
strength += strengthIncrement * speedFactor;
70+
if (strength >= 100) {
71+
strengthIncrement = -1; // Switch to decreasing strength
72+
} else if (strength <= 10) {
73+
strengthIncrement = 1; // Switch to increasing strength
74+
}
75+
76+
strengthBar.value = strength;
77+
updateStrengthBarColor();
78+
strengthValue.textContent = `${Math.floor(strength)}%`;
79+
80+
// Spin bottle according to strength
81+
bottleAngle += (strength / 5) * speedFactor; // Adjust spin speed
82+
bottle.style.transform = `rotate(${bottleAngle}deg)`;
83+
}, 50); // Adjust timing for smooth strength increase
84+
}
85+
86+
// Function to update the strength bar color and width dynamically
87+
function updateStrengthBarColor() {
88+
// Set the width of the progress fill according to strength percentage
89+
progressFill.style.width = `${strength}%`;
90+
91+
// Change the color based on strength value
92+
if (strength >= 0 && strength < 50) {
93+
// Yellow for 0% - 49%
94+
progressFill.style.backgroundColor = 'yellow';
95+
} else if (strength >= 50 && strength <= 59) {
96+
// Green for 50% - 59%
97+
progressFill.style.backgroundColor = 'green';
98+
} else if (strength >= 60 && strength <= 100) {
99+
// Red for 60% - 100%
100+
progressFill.style.backgroundColor = 'red';
101+
}
102+
103+
// Update the text value for the strength
104+
strengthValue.textContent = `${Math.floor(strength)}%`;
105+
}
106+
107+
108+
// Flip the bottle
109+
function flipBottle() {
110+
// Random angle between +7 to -7 from 360 degrees
111+
let finalAngle = 360 + (Math.random() * 14 - 7);
112+
bottle.style.transform = `rotate(${finalAngle}deg)`;
113+
114+
// Success, reset strength, increase difficulty, and reset progress bar to 0
115+
score++;
116+
updateScore();
117+
resetStrength();
118+
speedFactor += 0.2; // Increase speed factor to make next flip harder
119+
120+
// Reset the strength bar to 0
121+
strength = 0;
122+
strengthBar.value = strength;
123+
strengthValue.textContent = `${strength}%`;
124+
}
125+
126+
// Break the bottle
127+
function breakBottle() {
128+
brokenBottle.style.display = 'block';
129+
bottle.style.display = 'none';
130+
newGameBtn.style.display = 'block'; // Show "New Game" button
131+
clearInterval(strengthLoop); // Stop strength loop
132+
}
133+
134+
// Reset strength bar and values
135+
function resetStrength() {
136+
strength = 10;
137+
strengthIncrement = 1;
138+
strengthBar.value = strength;
139+
updateStrengthBarColor();
140+
strengthValue.textContent = `${strength}%`;
141+
}
142+
143+
// Update the score display
144+
function updateScore() {
145+
scoreDisplay.textContent = `Score: ${score}`;
146+
if (score > highScore) {
147+
highScore = score;
148+
updateHighScore();
149+
}
150+
}
151+
152+
// Update the high score display
153+
function updateHighScore() {
154+
highScoreDisplay.textContent = `High Score: ${highScore}`;
155+
}

‎Bottle Flip Game/style.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
body {
2+
background-color: #f9f9f9;
3+
font-family: 'Arial', sans-serif;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.game-container {
13+
text-align: center;
14+
background: #ffffff;
15+
border-radius: 15px;
16+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
17+
padding: 20px;
18+
max-width: 400px;
19+
width: 90%;
20+
}
21+
22+
h1 {
23+
color: #4A4A4A;
24+
}
25+
26+
.bottle-container {
27+
position: relative;
28+
margin: 20px auto;
29+
width: 100px;
30+
height: 150px;
31+
}
32+
33+
.bottle {
34+
background-image: url('juice.png');
35+
background-size: cover;
36+
background-position: center;
37+
width: 100%;
38+
height: 100%;
39+
transition: transform 0.1s linear;
40+
}
41+
42+
#broken-bottle {
43+
display: none;
44+
width: 100px;
45+
height: auto;
46+
}
47+
48+
#score, #high-score {
49+
font-size: 24px;
50+
margin-top: 10px;
51+
color: #333;
52+
}
53+
54+
/* Horizontal Strength Bar */
55+
.strength-container {
56+
margin: 10px 0;
57+
position: relative;
58+
}
59+
60+
.strength-bar-wrapper {
61+
width: 300px;
62+
height: 30px;
63+
background-color: #e0e0e0;
64+
border-radius: 5px;
65+
position: relative;
66+
margin: 0 auto;
67+
}
68+
69+
#strength-bar {
70+
width: 100%;
71+
height: 100%;
72+
appearance: none;
73+
}
74+
75+
#strength-bar::-webkit-progress-bar {
76+
background-color: #e0e0e0;
77+
border-radius: 5px;
78+
}
79+
80+
#strength-bar::-webkit-progress-value {
81+
transition: background-color 0.3s;
82+
border-radius: 5px;
83+
}
84+
85+
#strength-value {
86+
position: absolute;
87+
top: 0;
88+
left: 50%;
89+
transform: translateX(-50%);
90+
color: #000;
91+
font-size: 16px;
92+
line-height: 30px;
93+
}
94+
95+
/* Button Styling */
96+
button {
97+
background-color: #007bff;
98+
color: white;
99+
padding: 10px 15px;
100+
border: none;
101+
border-radius: 5px;
102+
cursor: pointer;
103+
font-size: 16px;
104+
transition: background-color 0.3s;
105+
margin-top: 20px;
106+
}
107+
108+
button:hover {
109+
background-color: #0056b3;
110+
}
111+
112+
/* New Game Button is initially hidden */
113+
#new-game {
114+
display: none;
115+
}
116+
117+
@media (max-width: 600px) {
118+
.game-container {
119+
padding: 10px;
120+
}
121+
122+
h1 {
123+
font-size: 24px;
124+
}
125+
126+
#score, #high-score {
127+
font-size: 20px;
128+
}
129+
130+
button {
131+
width: 100%;
132+
}
133+
}
134+
135+
/* Custom styles for the progress bar */
136+
#strength-bar {
137+
width: 100%;
138+
height: 100%;
139+
appearance: none; /* Remove default styles */
140+
}
141+
142+
#strength-bar::-webkit-progress-bar {
143+
background-color: #e0e0e0; /* Background of the progress bar */
144+
border-radius: 5px;
145+
}
146+

0 commit comments

Comments
 (0)