-
Notifications
You must be signed in to change notification settings - Fork 841
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 #4142 from nisargaa20/Fidget-Spinner
Fidget spinner #4119
- Loading branch information
Showing
8 changed files
with
335 additions
and
8 deletions.
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,37 @@ | ||
# Fidget Spinner | ||
|
||
A fidget spinner made in JavaScript. | ||
|
||
## Description 📃 | ||
|
||
Fidget Spinner is an interactive online simulation of a physical fidget spinner. This digital version allows users to experience the satisfying and stress-relieving sensation of spinning a fidget spinner directly from their browser. | ||
|
||
## Functionalities 🎮 | ||
|
||
- **Interactive Spinning**: Users can spin the fidget spinner by dragging the mouse across the screen. | ||
- **Speed Display**: The current speed of the spinner is displayed, giving users real-time feedback. | ||
- **Custom Speed Setting**: Users can set a custom speed for the fidget spinner, allowing for a personalized experience. | ||
- **Automatic Spin**: For those who prefer not to drag their mouse, a button is available to automatically spin the fidget spinner. | ||
|
||
## How to Play? 🕹️ | ||
|
||
1. **Drag to Spin**: Click and drag the mouse across the spinner to make it spin. The faster you drag, the faster the spinner will rotate. | ||
2. **View Speed**: Watch the speedometer to see how fast the spinner is going. | ||
3. **Set Custom Speed**: Use the input box to set a custom speed for the spinner. | ||
4. **Automatic Spin**: Click the "Spin" button to make the spinner spin without dragging. | ||
|
||
## Screenshots 📸 | ||
|
||
![Fidget Spinner](assets/images/Fidget.png) | ||
|
||
|
||
|
||
## Updates | ||
|
||
- **Speed Display**: Added for real-time feedback. | ||
- **Custom Speed Setting**: Introduced a feature to set custom speed. | ||
- **Automatic Spin**: Added a "Spin" button for automatic spinning. | ||
|
||
|
||
|
||
Enjoy the virtual spinning experience and have fun! |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,26 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Fidget Spinner</title> | ||
|
||
|
||
|
||
<link rel="stylesheet" href="styles.css"> | ||
|
||
|
||
</head> | ||
|
||
<body> | ||
<b><font color="#fa8072">Current Speed : <span class="corner" id="svalue"></span></font></b><br> | ||
<input type="text" maxlength="3" style="width: 30px" name="value" id='value' /> | ||
<input type="button" value="set speed" onclick="verifyorder()" /><br> | ||
<b> <font color="#fa8072">--------------------</font></b><br> | ||
<input type="button" value="Spin It For Me!" onclick="spin()" /><br> | ||
<b> <font color="#fa8072">For Lazy People</font></b> | ||
<canvas id="canvas" width="500" height="500"></canvas> | ||
<!-- DEVELOPED..... --> | ||
<script src="index.js"></script> | ||
<!-- FOR THE MPGH SHITPOSTER --> | ||
</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,103 @@ | ||
'use strict'; | ||
|
||
var canvas = document.getElementById('canvas'); | ||
var ctx = canvas.getContext('2d'); | ||
var step = 2 * Math.PI / 360; | ||
var radius = 120; | ||
|
||
var dragStart = false; | ||
var angle = 0; | ||
var speed = 7; | ||
document.getElementById("svalue").innerHTML = speed; | ||
ctx.strokeStyle = '#FA8072'; | ||
ctx.lineWidth = radius / 5.5; | ||
|
||
function spin() { | ||
speed = document.getElementById("svalue").innerHTML; | ||
} | ||
|
||
function verifyorder() { | ||
speed = document.getElementById('value').value; | ||
document.getElementById("svalue").innerHTML = speed; | ||
} | ||
|
||
|
||
|
||
canvas.addEventListener('mousedown', function (_ref) { | ||
var clientX = _ref.clientX; | ||
var clientY = _ref.clientY; | ||
|
||
dragStart = { clientX: clientX, clientY: clientY }; | ||
}); | ||
canvas.addEventListener('touchstart', function (_ref2) { | ||
var originalEvent = _ref2.originalEvent; | ||
|
||
dragStart = { | ||
clientX: originalEvent.touches[0].pageX, | ||
clientY: originalEvent.touches[0].pageY | ||
}; | ||
}); | ||
canvas.addEventListener('mousemove', function (_ref3) { | ||
var clientX = _ref3.clientX; | ||
var clientY = _ref3.clientY; | ||
return dragStart && function () { | ||
updateSpeed(dragStart, { clientX: clientX, clientY: clientY }); | ||
dragStart = { clientX: clientX, clientY: clientY }; | ||
}(); | ||
}); | ||
canvas.addEventListener('touchmove', function (_ref4) { | ||
var originalEvent = _ref4.originalEvent; | ||
return dragStart && function () { | ||
updateSpeed(dragStart, { | ||
clientX: originalEvent.touches[0].pageX, | ||
clientY: originalEvent.touches[0].pageY | ||
}); | ||
dragStart = { | ||
clientX: originalEvent.touches[0].pageX, | ||
clientY: originalEvent.touches[0].pageY | ||
}; | ||
}(); | ||
}); | ||
window.addEventListener('mouseup', function () { | ||
dragStart = false; | ||
}); | ||
window.addEventListener('touchend', function () { | ||
dragStart = false; | ||
}); | ||
|
||
function updateSpeed(startPos, endPos) { | ||
speed = (Math.atan2(startPos.clientX - (canvas.offsetLeft + canvas.width / 2), startPos.clientY - (canvas.offsetTop + canvas.height / 2)) - Math.atan2(endPos.clientX - (canvas.offsetLeft + canvas.width / 2), endPos.clientY - (canvas.offsetTop + canvas.height / 2))) * radius; | ||
} | ||
|
||
function render() { | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
|
||
angle += step * speed; | ||
speed = Math.max(speed - 0.08, Math.min(speed + 0.08, 0)); | ||
|
||
for (var i = 0; i < 3; i++) { | ||
var x = canvas.width / 2 + radius * Math.sin(angle + i * (120 * step)); | ||
var y = canvas.height / 2 - radius * Math.cos(angle + i * (120 * step)); | ||
ctx.beginPath(); | ||
ctx.moveTo(canvas.width / 2, canvas.height / 2); | ||
ctx.lineTo(x, y); | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
|
||
ctx.beginPath(); | ||
ctx.arc(x, y, radius / 2.5, 0, 2 * Math.PI); | ||
ctx.stroke(); | ||
ctx.fill(); | ||
ctx.closePath(); | ||
} | ||
|
||
ctx.beginPath(); | ||
ctx.arc(canvas.width / 2, canvas.height / 2, radius / 2.5, 0, 2 * Math.PI); | ||
ctx.stroke(); | ||
ctx.fill(); | ||
ctx.closePath(); | ||
|
||
window.requestAnimationFrame(render); | ||
} | ||
|
||
render(); |
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,14 @@ | ||
body { | ||
margin: 0; | ||
background: #000; | ||
} | ||
|
||
canvas { | ||
display: block; | ||
margin: 0 auto; | ||
} | ||
corner{ | ||
position: absolute; | ||
top: 5px; | ||
right: 10px; | ||
} |
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.
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