تاس با انیمیشن در HTML، CSS و JS
برای ساخت یک تاس با انیمیشن، به سه بخش اصلی نیاز داریم: HTML، CSS و JavaScript. هر کدام از این اجزا نقش مهمی در عملکرد کلی بازی دارند. بیایید به تفکیک هر کدام بپردازیم.
HTML: ساختار پایه
ابتدا، برای ایجاد ساختار تاس، از تگ‌های HTML استفاده می‌کنیم. بیایید نگاهی به کد زیر بیندازیم:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<title>تاس با انیمیشن</title>
</head>
<body>
<div class="dice" id="dice">1</div>
<button id="rollButton">پرتاب تاس</button>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، یک div برای نمایش عدد تاس و یک دکمه برای پرتاب تاس داریم.
CSS: استایل‌دهی و انیمیشن
حالا به استایل‌دهی می‌پردازیم. CSS به ما کمک می‌کند تا تاس را زیبا و انیمیشن‌های حرکتی را به آن اضافه کنیم.
```css
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.dice {
width: 100px;
height: 100px;
background: white;
border: 2px solid #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
transition: transform
- 5s;
.dice.animate {
transform: rotateY(360deg);
}
```
در اینجا، با استفاده از CSS، تاس را طراحی کرده‌ایم و انیمیشن چرخش را تعریف کرده‌ایم.
JavaScript: عملکرد و منطق
در نهایت، جاوا اسکریپت به ما کمک می‌کند تا عملکرد تاس را فعال کنیم. با کلیک روی دکمه، تاس باید عددی بین ۱ تا ۶ نشان دهد.
```javascript
const dice = document.getElementById('dice');
const rollButton = document.getElementById('rollButton');
rollButton.addEventListener('click', () => {
// اضافه کردن کلاس انیمیشن
dice.classList.add('animate');
// تولید عدد تصادفی
setTimeout(() => {
const randomNumber = Math.floor(Math.random() * 6) + 1;
dice.textContent = randomNumber;
dice.classList.remove('animate');
}, 500); // زمان انیمیشن
});
```
در اینجا، با کلیک روی دکمه، عدد تصادفی تولید می‌شود و تاس با انیمیشن چرخش نشان داده می‌شود.
نتیجه‌گیری
این پروژه ساده و در عین حال جذاب می‌تواند به شما کمک کند تا با مفاهیم HTML، CSS و JavaScript آشنا شوید. با کمی خلاقیت، می‌توانید ویژگی‌های بیشتری به این پروژه اضافه کنید و آن را گسترش دهید.
