-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5098 from kosuri-indu/add/gravity-drops
Added: Gravity Drops Game
- Loading branch information
Showing
6 changed files
with
244 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# **Gravity Drops** | ||
|
||
--- | ||
|
||
<br> | ||
|
||
## **Description 📃** | ||
Gravity Drops is a fun and interactive game where players click on the canvas to add paint drops. The goal is to create unique patterns by manipulating gravity and the movement of the paint drops. | ||
|
||
## **Functionalities 🎮** | ||
- Click on the canvas to add paint drops. | ||
- Change the color of the paint drops using the color picker. | ||
- Increase or decrease gravity to control the movement of the drops. | ||
- Clear the canvas without resetting the timer. | ||
- Reset the canvas and timer to start fresh. | ||
|
||
## **How to Play? 🕹️** | ||
- Open `index.html` in your web browser to start the game. | ||
- Click on the canvas to add paint drops. | ||
- Use the color picker to change the color of the drops. | ||
- Use the buttons to increase or decrease gravity. | ||
- Click the "Clear" button to clear the canvas without resetting the timer. | ||
- Click the "Reset" button to reset the canvas and timer. | ||
|
||
<br> | ||
|
||
--- | ||
|
||
## **Screenshots 📸** | ||
![image](../../assets/Gravity_Drops.png) | ||
|
||
<br> | ||
|
||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Gravity Drops</title> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
<body> | ||
<div class="controls"> | ||
<button id="reset">Reset</button> | ||
<button id="clear">Clear</button> | ||
<button id="increase-gravity">Increase Gravity</button> | ||
<button id="decrease-gravity">Decrease Gravity</button> | ||
<select id="color-picker"> | ||
<option value="blue">Blue</option> | ||
<option value="red">Red</option> | ||
<option value="green">Green</option> | ||
<option value="yellow">Yellow</option> | ||
<option value="purple">Purple</option> | ||
</select> | ||
</div> | ||
<div id="timer">Time: 0s</div> | ||
<canvas id="canvas"></canvas> | ||
<div class="rules"> | ||
<h2>Gravity Drops Rules</h2> | ||
<p>Click on the canvas to add paint drops.</p> | ||
<p>Use the buttons to adjust gravity and control the movement of the drops.</p> | ||
<p>Try to create specific patterns or fill shapes by manipulating gravity.</p> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
const canvas = document.getElementById('canvas'); | ||
const ctx = canvas.getContext('2d'); | ||
|
||
canvas.width = window.innerWidth; | ||
canvas.height = window.innerHeight; | ||
|
||
let drops = []; | ||
let gravity = { x: 0, y: 0.1 }; | ||
let timer = 0; | ||
let timerInterval; | ||
let currentColor = 'blue'; | ||
|
||
class PaintDrop { | ||
constructor(x, y, color) { | ||
this.x = x; | ||
this.y = y; | ||
this.vx = 0; | ||
this.vy = 0; | ||
this.radius = 5; | ||
this.color = color; | ||
} | ||
|
||
update() { | ||
this.vx += gravity.x; | ||
this.vy += gravity.y; | ||
this.x += this.vx; | ||
this.y += this.vy; | ||
|
||
if (this.x + this.radius > canvas.width || this.x - this.radius < 0) { | ||
this.vx *= -1; | ||
} | ||
|
||
if (this.y + this.radius > canvas.height || this.y - this.radius < 0) { | ||
this.vy *= -1; | ||
} | ||
} | ||
|
||
draw() { | ||
ctx.beginPath(); | ||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); | ||
ctx.fillStyle = this.color; | ||
ctx.fill(); | ||
ctx.closePath(); | ||
} | ||
} | ||
|
||
function addDrop(x, y) { | ||
drops.push(new PaintDrop(x, y, currentColor)); | ||
} | ||
|
||
canvas.addEventListener('click', (e) => { | ||
addDrop(e.clientX, e.clientY); | ||
}); | ||
|
||
function resetCanvas() { | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
drops = []; | ||
resetTimer(); | ||
} | ||
|
||
function clearCanvas() { | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
} | ||
|
||
document.getElementById('reset').addEventListener('click', resetCanvas); | ||
document.getElementById('clear').addEventListener('click', clearCanvas); | ||
|
||
document.getElementById('increase-gravity').addEventListener('click', () => { | ||
gravity.y += 0.1; | ||
}); | ||
|
||
document.getElementById('decrease-gravity').addEventListener('click', () => { | ||
gravity.y = Math.max(0, gravity.y - 0.1); | ||
}); | ||
|
||
document.getElementById('color-picker').addEventListener('change', (e) => { | ||
currentColor = e.target.value; | ||
}); | ||
|
||
function update() { | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
drops.forEach(drop => { | ||
drop.update(); | ||
drop.draw(); | ||
}); | ||
requestAnimationFrame(update); | ||
} | ||
|
||
function startTimer() { | ||
timerInterval = setInterval(() => { | ||
timer++; | ||
document.getElementById('timer').innerText = `Time: ${timer}s`; | ||
}, 1000); | ||
} | ||
|
||
function resetTimer() { | ||
clearInterval(timerInterval); | ||
timer = 0; | ||
document.getElementById('timer').innerText = `Time: ${timer}s`; | ||
startTimer(); | ||
} | ||
|
||
update(); | ||
startTimer(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
body, html { | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
height: 100vh; | ||
background: linear-gradient(135deg, #f0f0f0, #e0e0e0); | ||
font-family: 'Arial', sans-serif; | ||
} | ||
|
||
canvas { | ||
border: 2px solid #000; | ||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | ||
background: #fff; | ||
border-radius: 10px; | ||
} | ||
|
||
.controls { | ||
position: absolute; | ||
top: 10px; | ||
display: flex; | ||
gap: 10px; | ||
} | ||
|
||
.controls button, .controls select { | ||
padding: 10px 20px; | ||
border: none; | ||
border-radius: 5px; | ||
background: #007bff; | ||
color: #fff; | ||
font-size: 16px; | ||
cursor: pointer; | ||
transition: background 0.3s; | ||
} | ||
|
||
.controls button:hover, .controls select:hover { | ||
background: #0056b3; | ||
} | ||
|
||
#timer { | ||
position: absolute; | ||
top: 50px; | ||
font-size: 24px; | ||
background: rgba(255, 255, 255, 0.9); | ||
padding: 10px; | ||
border-radius: 5px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | ||
} | ||
|
||
.rules { | ||
position: absolute; | ||
bottom: 10px; | ||
background: rgba(255, 255, 255, 0.9); | ||
padding: 20px; | ||
border-radius: 10px; | ||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | ||
text-align: justify; | ||
max-width: 800px; | ||
} | ||
|
||
.rules h2 { | ||
margin: 0 0 10px; | ||
font-size: 24px; | ||
} | ||
|
||
.rules p { | ||
margin: 5px 0; | ||
font-size: 16px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.