کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **پد طراحی (Sketch Pad)** با استفاده از HTML5، CSS و JavaScript ارائه شده است. این پد به شما اجازه می‌دهد تا با استفاده از ماوس یا صفحه لمسی بر روی آن نقاشی کنید.
### 1. **HTML**
ابتدا ساختار HTML را برای پد طراحی ایجاد می‌کنیم.
```html
پد طراحی
پد طراحی
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهر پد طراحی استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
canvas {
border: 1px solid #ccc;
cursor: crosshair;
}
.controls {
margin-top: 10px;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق پد طراحی با JavaScript می‌رویم. در این کد، ما از عنصر `
```javascript
const canvas = document.getElementById('sketchPad');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearBtn');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
// تنظیم اندازه کانواس
canvas.width = 800;
canvas.height = 600;
// متغیرهای مورد نیاز برای رسم
let drawing = false;
// تابع شروع رسم
function startPosition(e) {
drawing = true;
draw(e);
}
// تابع پایان رسم
function endPosition() {
drawing = false;
ctx.beginPath(); // شروع مسیر جدید
}
// تابع رسم
function draw(e) {
if (!drawing) return;
ctx.lineWidth = brushSize.value; // تنظیم ضخامت قلم
ctx.strokeStyle = colorPicker.value; // تنظیم رنگ قلم
ctx.lineCap = 'round'; // شکل انتهای خط
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); // مشخص کردن موقعیت خط
ctx.stroke(); // رسم خط
ctx.beginPath(); // شروع مسیر جدید
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); // جابه‌جایی موقعیت شروع
}
// رویدادهای ماوس
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
// رویدادهای لمسی (برای دستگاه‌های لمسی)
canvas.addEventListener('touchstart', (e) => {
e.preventDefault(); // جلوگیری از رفتار پیش‌فرض
startPosition(e.touches[0]);
});
canvas.addEventListener('touchend', endPosition);
canvas.addEventListener('touchmove', (e) => {
e.preventDefault(); // جلوگیری از رفتار پیش‌فرض
draw(e.touches[0]);
});
// پاک کردن صفحه
clearBtn.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
```
### توضیحات کد:
1. **HTML**: شامل یک عنصر `
2. **CSS**: طراحی صفحه با استفاده از رنگ‌ها و حاشیه‌ها برای زیبایی.
3. **JavaScript**:
- **تنظیمات اولیه**: اندازه کانواس و متغیرهای مورد نیاز برای رسم را تنظیم می‌کنیم.
- **تابع `startPosition`**: تابعی برای شروع رسم که وضعیت رسم را به `true` تغییر می‌دهد.
- **تابع `endPosition`**: تابعی برای پایان رسم که وضعیت رسم را به `false` تغییر می‌دهد.
- **تابع `draw`**: تابعی که خط را بر اساس موقعیت ماوس رسم می‌کند.
- **رویدادهای ماوس و لمسی**: برای تعامل با پد طراحی از رویدادهای مختلف استفاده می‌شود.
- **پاک کردن صفحه**: با کلیک بر روی دکمه پاک کردن، صفحه خالی می‌شود.
### نتیجه‌گیری
این پد طراحی یک پروژه سرگرم‌کننده و آموزنده برای یادگیری HTML5 و JavaScript است. شما میتوانید ویژگی‌های بیشتری مانند ذخیره نقاشی، افزودن اشکال، و یا تنظیمات بیشتر برای قلم را به این پروژه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی پد طراحی (Sketch Pad)** با استفاده از HTML5، CSS و JavaScript می‌باشد
