کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **سازنده هنر پیکسلی** (Pixel Art Maker) با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا یک بوم پیکسلی بسازند و رنگ‌ها را بر روی آن انتخاب کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای سازنده هنر پیکسلی ایجاد می‌کنیم.
```html
سازنده هنر پیکسلی
```
### 2. **CSS**
برای طراحی ظاهری سازنده هنر پیکسلی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.color-palette {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.color {
width: 40px;
height: 40px;
margin: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.color.selected {
border: 2px solid #000;
}
.canvas {
display: grid;
grid-template-columns: repeat(16, 40px);
grid-template-rows: repeat(16, 40px);
gap: 2px;
margin: 0 auto;
}
.pixel {
width: 40px;
height: 40px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const colorPalette = document.getElementById('colorPalette');
const pixelCanvas = document.getElementById('pixelCanvas');
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F1C40F', '#8E44AD', '#E74C3C', '#3498DB', '#2ECC71'];
let selectedColor = '#FF5733'; // رنگ پیش‌فرض
// تابع برای ایجاد پالت رنگ
function createColorPalette() {
colors.forEach(color => {
const colorDiv = document.createElement('div');
colorDiv.classList.add('color');
colorDiv.style.backgroundColor = color;
colorDiv.addEventListener('click', () => {
selectedColor = color;
document.querySelectorAll('.color').forEach(div => div.classList.remove('selected'));
colorDiv.classList.add('selected');
});
colorPalette.appendChild(colorDiv);
});
}
// تابع برای ایجاد بوم پیکسلی
function createPixelCanvas() {
for (let i = 0; i < 256; i++) { // 16x16 = 256 پیکسل
const pixel = document.createElement('div');
pixel.classList.add('pixel');
pixel.addEventListener('click', () => {
pixel.style.backgroundColor = selectedColor;
});
pixelCanvas.appendChild(pixel);
}
}
// ایجاد پالت رنگ و بوم پیکسلی
createColorPalette();
createPixelCanvas();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، پالت رنگ و بوم پیکسلی است.
2. **CSS**: طراحی زیبا و کاربرپسند برای پالت رنگ و بوم پیکسلی.
3. **JavaScript**:
- **ایجاد پالت رنگ**: تابعی برای ایجاد و نمایش رنگ‌های مختلف. وقتی کاربر بر روی یک رنگ کلیک می‌کند، رنگ انتخابی تغییر می‌کند.
- **ایجاد بوم پیکسلی**: تابعی برای ایجاد بوم پیکسلی 16x16. وقتی کاربر بر روی یک پیکسل کلیک می‌کند، رنگ آن به رنگ انتخاب شده تغییر می‌کند.
### نتیجه‌گیری
این پروژه **سازنده هنر پیکسلی** یک مثال عالی برای یادگیری نحوه کار با JavaScript، DOM و رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره آثار، بارگذاری از فایل یا تغییر اندازه بوم پیکسلی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **سازنده هنر پیکسلی** (Pixel Art Maker) با استفاده از HTML، CSS و JavaScript می‌باشد
