گردونه شانس با جاوا اسکریپت
گردونه شانس، یک ابزار سرگرم‌کننده و جذاب است که به‌طور معمول در بازی‌ها، مسابقات یا برنامه‌های تبلیغاتی استفاده می‌شود. این گردونه به کاربران اجازه می‌دهد تا با چرخاندن آن، شانس خود را برای برنده شدن جوایز یا امتیازات مختلف آزمایش کنند.
ساختار اصلی گردونه
برای پیاده‌سازی گردونه شانس با استفاده از جاوا اسکریپت، معمولاً به عناصر زیر نیاز داریم:
- HTML: برای ساختار پایه گردونه
- CSS: برای استایل‌دهی و زیباسازی
- جاوا اسکریپت: برای منطق چرخش و تعاملات کاربری
مثال ساده از کد
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<style>
/* استایل پایه */
#wheel {
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #f39c12;
position: relative;
overflow: hidden;
}
.slice {
position: absolute;
width: 50%;
height: 50%;
background: #3498db;
transform-origin: 100% 100%;
}
/* چرخش */
.spin {
animation: spin 4s ease-out forwards;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="wheel"></div>
<button id="spinBtn">چرخش</button>
<script>
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spinBtn');
function createSlices() {
for (let i = 0; i < 12; i++) {
const slice = document.createElement('div');
slice.classList.add('slice');
slice.style.transform = `rotate(${i * 30}deg)`;
wheel.appendChild(slice);
}
}
spinBtn.addEventListener('click', () => {
wheel.classList.add('spin');
setTimeout(() => {
wheel.classList.remove('spin');
}, 4000); // مدت زمان چرخش
});
createSlices();
</script>
</body>
</html>
```
توضیحات کد
- HTML: ساختار پایه گردونه و دکمه چرخش است.
- CSS: برای طراحی گردونه و اضافه کردن انیمیشن چرخش استفاده می‌شود.
- جاوا اسکریپت: منطق چرخش را کنترل کرده و شش بخش گردونه را می‌سازد.
نتیجه‌گیری
با استفاده از کد بالا، شما می‌توانید یک گردونه شانس ساده بسازید. این پروژه می‌تواند به‌عنوان نقطه شروعی برای اضافه کردن ویژگی‌های بیشتر مانند جوایز، صداها، یا انیمیشن‌های پیچیده‌تر باشد. با کمی خلاقیت، می‌توانید این گردونه را به یک ابزار سرگرم‌کننده و جذاب تبدیل کنید.
