تاس با انیمیشن در 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 آشنا شوید. با کمی خلاقیت، می‌توانید ویژگی‌های بیشتری به این پروژه اضافه کنید و آن را گسترش دهید.
تاس با انیمیشن با استفاده از 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">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="dice" id="dice">🎲</div>
<button id="rollButton">تاس بینداز</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، ما یک دکمه برای پرتاب تاس و یک عنصر برای نمایش نتیجه تاس داریم.
مرحله دوم: استایل CSS
حالا بیایید به استایل دهی بپردازیم. با استفاده از CSS می‌توانیم ظاهر تاس و دکمه را زیباتر کنیم.
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
.dice {
font-size: 100px;
margin-bottom: 20px;
transition: transform
- 5s;
```
در این بخش، ما از خاصیت‌های CSS برای تنظیم موقعیت و اندازه عناصر استفاده کردیم.
مرحله سوم: منطق JavaScript
اکنون باید با استفاده از JavaScript منطق پرتاب تاس را پیاده‌سازی کنیم. به این صورت که با هر بار کلیک بر روی دکمه، یک عدد تصادفی بین ۱ تا ۶ تولید شود و انیمیشن نیز به تاس اضافه شود.
```javascript
document.getElementById('rollButton').addEventListener('click', function() {
let dice = document.getElementById('dice');
dice.style.transform = 'rotate(360deg)';
setTimeout(() => {
let randomNumber = Math.floor(Math.random() * 6) + 1;
dice.innerText = randomNumber;
dice.style.transform = 'rotate(0deg)';
}, 500);
});
```
در این کد، با کلیک بر روی دکمه، تاس می‌چرخد و سپس عدد تصادفی نمایش داده می‌شود.
نتیجه‌گیری
اکنون یک بازی تاس ساده با انیمیشن داریم. این پروژه، نه تنها به ما کمک می‌کند که HTML، CSS و JavaScript را یاد بگیریم، بلکه ما را با مفهوم انیمیشن و تعامل در وب آشنا می‌کند. با تغییرات و بهبودهای بیشتر، می‌توانیم این بازی را جذاب‌تر کنیم.
