سازنده آواتار با استفاده از HTML، CSS و Vanilla JS
سازنده آواتار یک ابزار کاربردی است که به کاربران اجازه می‌دهد تا آواتارهای سفارشی بسازند. این پروژه می‌تواند به سادگی با استفاده از HTML، CSS و JavaScript خالص (Vanilla JS) ایجاد شود. بیایید نگاهی دقیق‌تر به مراحل ساخت این ابزار بیندازیم.
مرحله اول: ساختار 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 id="avatar-creator">
<canvas id="avatar" width="200" height="200"></canvas>
<input type="color" id="hair-color" value="#000000">
<input type="color" id="eye-color" value="#000000">
<button id="save">ذخیره آواتار</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، یک عنصر `<canvas>` برای نمایش آواتار داریم و از ورودی‌های رنگی برای انتخاب رنگ مو و رنگ چشم استفاده می‌کنیم.
مرحله دوم: استایل CSS
حالا بیایید به استایل‌دهی بپردازیم.
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#avatar-creator {
text-align: center;
}
canvas {
border: 1px solid #000;
}
```
این کد CSS، صفحه را به صورت مرکز قرار می‌دهد و یک پس‌زمینه ملایم ایجاد می‌کند.
مرحله سوم: منطق JavaScript
اکنون نوبت به اضافه کردن منطق با استفاده از JavaScript خالص می‌رسد.
```javascript
const canvas = document.getElementById('avatar');
const ctx = canvas.getContext('2d');
function drawAvatar(hairColor, eyeColor) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // پاک‌کردن canvas
// رسم سر
ctx.fillStyle = '#ffcc99'; // رنگ پوست
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fill();
// رسم مو
ctx.fillStyle = hairColor;
ctx.beginPath();
ctx.arc(100, 60, 80, Math.PI, 0);
ctx.fill();
// رسم چشم‌ها
ctx.fillStyle = eyeColor;
ctx.beginPath();
ctx.arc(80, 90, 10, 0, Math.PI * 2); // چشم چپ
ctx.fill();
ctx.beginPath();
ctx.arc(120, 90, 10, 0, Math.PI * 2); // چشم راست
ctx.fill();
}
document.getElementById('hair-color').addEventListener('input', (e) => {
drawAvatar(e.target.value, document.getElementById('eye-color').value);
});
document.getElementById('eye-color').addEventListener('input', (e) => {
drawAvatar(document.getElementById('hair-color').value, e.target.value);
});
// رسم اولیه آواتار
drawAvatar('#000000', '#000000');
```
در این کد، ما یک تابع برای رسم آواتار ایجاد می‌کنیم که رنگ مو و رنگ چشم را می‌پذیرد. ما همچنین به ورودی‌های رنگی گوش می‌دهیم تا با تغییر رنگ، آواتار به‌روزرسانی شود.
نتیجه‌گیری
با این کدها، شما یک سازنده آواتار ساده و کاربردی دارید که به کاربران امکان می‌دهد تا آواتارهای خود را به راحتی طراحی کنند. این پروژه می‌تواند به عنوان یک نقطه آغاز برای توسعه‌های بیشتر مانند اضافه کردن ویژگی‌های جدید یا بهبود UI استفاده شود.
