کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد **بازی پر کردن مخزن** (Tank Fill-up) با استفاده از 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 {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
#tank {
width: 100px;
height: 200px;
border: 2px solid #333;
position: relative;
margin: 20px auto;
background-color: #e0e0e0;
overflow: hidden;
border-radius: 5px;
}
#water {
position: absolute;
bottom: 0;
width: 100%;
background-color: #007bff;
height: 0%;
transition: height 0.5s ease;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
#status {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
در نهایت منطق بازی پر کردن مخزن را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const fillBtn = document.getElementById('fillBtn');
const waterDiv = document.getElementById('water');
const statusDiv = document.getElementById('status');
let currentHeight = 0; // درصد پر بودن مخزن
const fillAmount = 20; // درصدی که هر بار مخزن پر می‌شود
fillBtn.addEventListener('click', function() {
if (currentHeight < 100) {
currentHeight += fillAmount;
if (currentHeight > 100) {
currentHeight = 100; // محدود کردن به 100 درصد
statusDiv.textContent = "مخزن پر است!";
} else {
statusDiv.textContent = "مخزن در حال پر شدن...";
}
waterDiv.style.height = currentHeight + '%'; // تنظیم ارتفاع آب
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، مخزن، دکمه پر کردن و نمایش وضعیت است.
2. **CSS**: طراحی برای بازی پر کردن مخزن که شامل طراحی مخزن و آب می‌شود.
3. **JavaScript**:
- **متغیرها**: `currentHeight` برای نگه‌داشتن درصد پر بودن مخزن و `fillAmount` برای مقدار پر شدن هر بار.
- **رویداد کلیک**: وقتی کاربر روی دکمه "پر کردن مخزن" کلیک می‌کند، درصد آب در مخزن افزایش می‌یابد و وضعیت به‌روزرسانی می‌شود.
### نتیجه‌گیری
این پروژه **بازی پر کردن مخزن** یک مثال ساده و عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و مدیریت رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند صدای پر شدن مخزن یا اضافه کردن نازل را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی پر کردن مخزن** (Tank Fill-up) با استفاده از HTML، CSS و JavaScript می‌باشد
