diff --git a/Games/Gravity_Dropss/README.md b/Games/Gravity_Dropss/README.md new file mode 100644 index 0000000000..701fb753a3 --- /dev/null +++ b/Games/Gravity_Dropss/README.md @@ -0,0 +1,34 @@ +# **Gravity Drops** + +--- + +
+ +## **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. + +
+ +--- + +## **Screenshots 📸** +![image](../../assets/Gravity_Drops.png) + +
+ +--- \ No newline at end of file diff --git a/Games/Gravity_Dropss/index.html b/Games/Gravity_Dropss/index.html new file mode 100644 index 0000000000..98420c139c --- /dev/null +++ b/Games/Gravity_Dropss/index.html @@ -0,0 +1,33 @@ + + + + + + Gravity Drops + + + +
+ + + + + +
+
Time: 0s
+ +
+

Gravity Drops Rules

+

Click on the canvas to add paint drops.

+

Use the buttons to adjust gravity and control the movement of the drops.

+

Try to create specific patterns or fill shapes by manipulating gravity.

+
+ + + \ No newline at end of file diff --git a/Games/Gravity_Dropss/script.js b/Games/Gravity_Dropss/script.js new file mode 100644 index 0000000000..ed592cceeb --- /dev/null +++ b/Games/Gravity_Dropss/script.js @@ -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(); \ No newline at end of file diff --git a/Games/Gravity_Dropss/style.css b/Games/Gravity_Dropss/style.css new file mode 100644 index 0000000000..0045cb8ad6 --- /dev/null +++ b/Games/Gravity_Dropss/style.css @@ -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; +} \ No newline at end of file diff --git a/assets/images/Gravity_Drops.png b/assets/images/Gravity_Drops.png new file mode 100644 index 0000000000..901436062e Binary files /dev/null and b/assets/images/Gravity_Drops.png differ