Skip to content

Commit

Permalink
Merge pull request #5098 from kosuri-indu/add/gravity-drops
Browse files Browse the repository at this point in the history
Added: Gravity Drops Game
  • Loading branch information
kunjgit authored Aug 7, 2024
2 parents 1748881 + 4659ea9 commit 1832fe2
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 1 deletion.
34 changes: 34 additions & 0 deletions Games/Gravity_Dropss/README.md
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>

---
33 changes: 33 additions & 0 deletions Games/Gravity_Dropss/index.html
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>
104 changes: 104 additions & 0 deletions Games/Gravity_Dropss/script.js
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();
72 changes: 72 additions & 0 deletions Games/Gravity_Dropss/style.css
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;
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,7 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
| [Boom_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast) |
| [Shadow_Runner](https://github.com/kunjgit/GameZone/tree/main/Games/Shadow_Runner) |
| [Underwater_Shoot](https://github.com/kunjgit/GameZone/tree/main/Games/Underwater_Shoot) |

| [Gravity_Drops](https://github.com/kunjgit/GameZone/tree/main/Games/Gravity_Drops) |

</center>
<br>
Expand Down
Binary file added assets/images/Gravity_Drops.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1832fe2

Please sign in to comment.