Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fidget spinner #4119 #4142

Merged
merged 15 commits into from
Jun 22, 2024
Merged
37 changes: 37 additions & 0 deletions Games/Fidget_Spinner_Game/README.md
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.
26 changes: 26 additions & 0 deletions Games/Fidget_Spinner_Game/index.html
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>
&nbsp;<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>
&nbsp;<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>
103 changes: 103 additions & 0 deletions Games/Fidget_Spinner_Game/index.js
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();
14 changes: 14 additions & 0 deletions Games/Fidget_Spinner_Game/styles.css
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;
}
13 changes: 12 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -321,12 +321,21 @@ This repository also provides one such platforms where contributers come over an
| [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Screen Pet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Screen-Pet-Game) |
| [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) |
| [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) |

|[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|

[Fidget Spinner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Fidget_Spinner_Game)|
| [Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
|[Building Blocks Game](https://github.com/kunjgit/GameZone/tree/main/Games/Building_Block_Game)|
|[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)|

|[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)|
| [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game) |
| [Hit_the_hamster] (https://github.com/kunjgit/GameZone/tree/main/Games/Hit_the_hamster) |


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


| [Forest_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Forst_Guardian) |
| [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) |
| [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) |
Expand Down Expand Up @@ -804,8 +813,10 @@ This repository also provides one such platforms where contributers come over an
| [Bunny is Lost](https://github.com/kunjgit/GameZone/tree/main/Games/Bunny_is_Lost)|
|[Steam_Punk](https://github.com/kunjgit/GameZone/tree/main/Games/Steam_Punk)|
|[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)|

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


|[Ghost Busting Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ghost_busting_game)|
|[Wheel_of_fortune](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Wheel_of_fortune)|
|[Dot_Box_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Box_Game)|
Expand Down
Binary file added assets/images/Fidget.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 143 additions & 7 deletions assets/js/gamesData.json
Original file line number Diff line number Diff line change
Expand Up @@ -2000,6 +2000,136 @@
"thumbnailUrl": "Dot_Connect.png"
},


"396":{
"gameTitle": "path finder puzzle",
"gameUrl": "path_finder",
"thumbnailUrl": "pathfinder.png"
},
"414":{
"gameTitle": "NameFate",
"gameUrl": "namefate",
"thumbnailUrl": "namefate.png"
}
,
"500":{
"gameTitle": "Menja block breaker",
"gameUrl": "Menja_block_breaker",
"thumbnailUrl": "menja_Block_breaker.png"
},
"393":{

"gameTitle": "Pop My Balloon",
"gameUrl": "Pop_My_Balloon",
"thumbnailUrl": "Pop_My_Balloon.png"

},
"397":{
"gameTitle": "Tower Stack",
"gameUrl": "Tower_Stack",
"thumbnailUrl": "Tower_Stack.png"

},
"395":{

"gameTitle": "Virtual Pet Game",
"gameUrl": "Virtual_Pet_Game",
"thumbnailUrl": "Virtual_Pet_Game.png"

"gameTitle": "path finder puzzle",
"gameUrl": "path_finder",
"thumbnailUrl": "pathfinder.png"
},
"411":{ "gameTitle": "Tiny Fishing",
"gameUrl": "Tiny_Fishing",
"thumbnailUrl": "Tiny_Fishing.png"
},
"398":{
"410":{
"gameTitle": "Shrek Vs Wild",
"gameUrl": "Shrek_Vs_Wild",
"thumbnailUrl": "Shrek_Vs_Wild.png"
},
"409":{
"gameTitle": "Hover_Board_Effect",
"gameUrl": "Hover_Board_Effect",
"thumbnailUrl": "Hover_Board_Effect.png"
},
"405":{
"gameTitle": "Candy_Crush_Saga",
"gameUrl": "Candy_Crush_Saga",
"thumbnailUrl": "Candy_Crush_Saga.png"
},"419":{

"gameTitle": "16_Puzzle",
"gameUrl": "16_Puzzle",
"thumbnailUrl": "16_Puzzle.png"
},
"420":{
"gameTitle" : "Colour_Generator_Game",
"gameUrl": "Colour_Generator_Game",
"thumbnailUrl": "Colour_Generator_Game.png"
},
"406":{
"gameTitle": "Knife_hit",
"gameUrl": "Knife_hit",
"thumbnailUrl": "Knife_hit.png"
},"415":{
"gameTitle": "Anagram_Checker_Game",
"gameUrl": "Anagram_Checker_Game",
"thumbnailUrl": "Anagram_Checker_Game.png"

},
"407":{
"gameTitle": "Screen_Pet_Game",
"gameUrl": "Screen_Pet_Game",
"thumbnailUrl": "Screen_Pet_Game.png"

},"416":{


"gameTitle": "rapid_click_frenzy",
"gameUrl": "rapid_click_frenzy",
"thumbnailUrl": "rapidgame.png"



}
,"408":{
"gameTitle": "Pen_Pointer_Fight",
"gameUrl": "PenPointerFight",
"thumbnailUrl": "PenPointerFight.png"
},
"409":{
"gameTitle": "Guess_The_Song",
"gameUrl": "Guess_The_Song",
"thumbnailUrl": "Guess_The_Song.png"
}

},"418":{
"gameTitle": "Brick Buster",
"gameUrl": "Brick Buster",
"thumbnailUrl": "Brick.png"
}



},"410":{
"gameTitle": "Brick Buster",
"gameUrl": "Brick Buster",
"thumbnailUrl": "Brick.png"
},
"419":{
"gameTitle": "Soccer",
"gameUrl": "Soccer",
"thumbnailUrl": "Soccer"
},
"411":{"gameTitle": "Pen_Pointer_Fight",
"gameUrl": "PenPointerFight",
"thumbnailUrl": "PenPointerFight.png"
},


"398": {
"gameTitle": "path finder puzzle",
"gameUrl": "path_finder",
Expand Down Expand Up @@ -2101,6 +2231,7 @@
"thumbnailUrl": "MathQuiz.png"
},
"418":{

"gameTitle": "MathQuiz",
"gameUrl": "MathQuiz",
"thumbnailUrl": "MathQuiz.png"
Expand All @@ -2109,16 +2240,21 @@
"gameTitle":"Puzzle-Game",
"gameUrl":"puzzle-game",
"thumbnailUrl":"puzzle-game.png"
}
<<<<<<< HEAD
},



"419":{
"gameTitle": "Pottery",
"gameUrl": "Pottery-Game",
"thumbnailUrl": "Pottery.png"
=======

>>>>>>> c24ab932e1702441882a65b80d713ea232e18c46


}
}
},
"421":{
"gameTitle":"Fidget_Spinner_Game",
"gameUrl":"Fidget_Spinner_Game",
"thumbnailUrl":"Fidget.png"
},


Loading