گردونه شانس با جاوا اسکریپت
گردونه شانس، یک ابزار سرگرم‌کننده و جذاب است که به‌طور معمول در بازی‌ها، مسابقات یا برنامه‌های تبلیغاتی استفاده می‌شود. این گردونه به کاربران اجازه می‌دهد تا با چرخاندن آن، شانس خود را برای برنده شدن جوایز یا امتیازات مختلف آزمایش کنند.
ساختار اصلی گردونه
برای پیاده‌سازی گردونه شانس با استفاده از جاوا اسکریپت، معمولاً به عناصر زیر نیاز داریم:
- 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: برای طراحی گردونه و اضافه کردن انیمیشن چرخش استفاده می‌شود.
- جاوا اسکریپت: منطق چرخش را کنترل کرده و شش بخش گردونه را می‌سازد.
نتیجه‌گیری
با استفاده از کد بالا، شما می‌توانید یک گردونه شانس ساده بسازید. این پروژه می‌تواند به‌عنوان نقطه شروعی برای اضافه کردن ویژگی‌های بیشتر مانند جوایز، صداها، یا انیمیشن‌های پیچیده‌تر باشد. با کمی خلاقیت، می‌توانید این گردونه را به یک ابزار سرگرم‌کننده و جذاب تبدیل کنید.
گردونه‌شانس (Spin Wheel) در برنامه‌نویسی جاوا اسکریپت، یکی از جذاب‌ترین و پرکاربردترین المان‌های تعاملی است که برای قرعه‌کشی، بازی‌های آنلاین، یا حتی برنامه‌های تبلیغاتی و سرگرمی‌ها استفاده می‌شود. این ابزار، با ظاهر جذاب و عملکرد ساده، امکان چرخش تصادفی و در عین حال کنترل‌شده را فراهم می‌کند. در ادامه، به صورت کامل و جامع، مفهوم، پیاده‌سازی، و نکات مهم مربوط به ساختن یک گردونه شانس با جاوا اسکریپت را شرح می‌دهم.
---
مفاهیم اولیه و ساختار کلی
در اصل، گردونه شانس یک دایره است که قسمت‌های مختلف آن با رنگ‌ها یا برچسب‌های متفاوت پر شده است. کاربر، با کلیک روی دکمه‌ای، این دایره را می‌چرخاند و در نهایت، بر روی یکی از بخش‌ها توقف می‌کند. هدف، ایجاد حرکت طبیعی و تصادفی است که حس واقعی چرخش را تداعی کند.
در پیاده‌سازی این ابزار، چند عنصر اصلی وجود دارد:
- HTML: برای ساختار قسمت‌های مختلف گردونه، دکمه شروع و نمایش نتایج.
- CSS: برای استایل‌دهی جذاب و جذاب کردن ظاهر گردونه.
- JavaScript: برای کنترل منطق چرخش، تصادفی بودن، و تعامل کاربر.
---
ساختار HTML پایه
ابتدا، ساختار پایه‌ای HTML را تعریف می‌کنیم:
```html
<div class="wheel-container">
<canvas id="wheel" width="500" height="500"></canvas>
<button id="spin">چرخش</button>
</div>
<div id="result"></div>
```
اینجا، یک عنصر `<canvas>` برای رسم گردونه استفاده شده است، چون رسم در این عنصر، کنترل و انعطاف بیشتری می‌دهد. همچنین، دکمه‌ای برای شروع چرخش داریم.
---
استایل CSS
برای جذاب‌تر کردن ظاهر، چند استایل ساده می‌نویسیم:
```css
.wheel-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#spin {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
```
با این استایل‌ها، ظاهر ساده و کاربر پسند ساخته می‌شود.
---
منطق جاوا اسکریپت برای چرخش گردونه
حالا، نوبت به نوشتن کد جاوا اسکریپت می‌رسد. در این بخش، چند نقطه کلیدی وجود دارد:
- رسم قسمت‌های مختلف گردونه با برچسب‌ها
- تنظیم زاویه‌های شروع و پایان هر قسمت
- کنترل چرخش و توقف تصادفی آن
- اعلام نتیجه به کاربر
در ادامه، نمونه کد کامل آورده شده است:
```javascript
const canvas = document.getElementById("wheel");
const ctx = canvas.getContext("2d");
const segments = ["پیشنهاد 1", "پیشنهاد 2", "پیشنهاد 3", "پیشنهاد 4", "پیشنهاد 5", "پیشنهاد 6"];
const startAngle = 0;
const arc = Math.PI * 2 / segments.length;
let currentAngle = 0;
let isSpinning = false;
let spinTimeout;
document.getElementById("spin").addEventListener("click", () => {
if (isSpinning) return;
startSpin();
});
function drawSegment(index, label, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.arc(canvas.width / 2, canvas.height / 2, 200, startAngle + index * arc, startAngle + (index + 1) * arc);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.fill();
// نوشتن برچسب در وسط هر قسمت
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(startAngle + index * arc + arc / 2);
ctx.textAlign = "right";
ctx.fillStyle = "white";
ctx.font = "14px Arial";
ctx.fillText(label, 180, 10);
ctx.restore();
}
function drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
segments.forEach((label, index) => {
const color = index % 2 === 0 ? "#e74c3c" : "#3498db";
drawSegment(index, label, color);
});
// خط نشانگر
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2 - 20, 30);
ctx.lineTo(canvas.width / 2 + 20, 30);
ctx.closePath();
ctx.fill();
}
function startSpin() {
isSpinning = true;
let spinSpeed = Math.random() * 10 + 10; // سرعت اولیه تصادفی
let totalRotation = Math.random() * Math.PI * 4 + Math.PI * 4; // چرخش تصادفی و زیاد
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
// کاهش سرعت بر اساس زمان
let progress = Math.min(elapsed / 3000, 1);
let easedProgress = 1 - Math.pow(1 - progress, 3); // تسهیل کننده توقف نرم
currentAngle = easedProgress * totalRotation;
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(currentAngle);
ctx.restore();
drawWheel();
if (progress < 1) {
spinTimeout = requestAnimationFrame(animate);
} else {
// توقف، تعیین برنده
const normalizedAngle = currentAngle % (Math.PI * 2);
const index = Math.floor((normalizedAngle / (Math.PI * 2)) * segments.length);
document.getElementById("result").innerText = `برنده: ${segments[(segments.length - index) % segments.length]}`;
isSpinning = false;
}
}
requestAnimationFrame(animate);
}
// رسم اولیه
drawWheel();
```
---
نکات مهم و بهبودهای ممکن
- تصادفی بودن: برای هر چرخش، سرعت و زاویه نهایی متفاوت است، که حس طبیعی بودن را بیشتر می‌کند.
- پایان چرخش نرم: با استفاده از easing، چرخش آرام و طبیعی به توقف می‌رسد.
- پشتیبانی از تعداد قسمت‌ها: می‌توانید تعداد بخش‌ها را تغییر دهید، فقط باید آرایه `segments` را تنظیم کنید.
- اضافه کردن جلوه‌های صوتی یا تصویری: برای جذاب‌تر کردن، می‌توانید صدا یا انیمیشن‌های اضافی بیفزایید.
---
جمع‌بندی
در این مقاله، به صورت کامل، مفهوم، ساختار، و نحوه پیاده‌سازی یک گردونه شانس با جاوا اسکریپت را شرح دادم. این پروژه، نمونه‌ای عالی برای تمرین‌های تعاملی و سرگرمی‌های آنلاین است. با کمی خلاقیت و افزودن ویژگی‌های جدید، می‌توانید یک ابزار جذاب و کاربرپسند بسازید که در سایت‌ها و برنامه‌های شما، جذابیت و تعامل را افزایش دهد. اگر سوال دیگری دارید، حتما بپرسید!
