کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی "حدس عدد" در JavaScript**
در این پروژه، یک بازی ساده "حدس عدد" ایجاد می‌شود که به کاربران اجازه می‌دهد عددی را حدس بزنند. کاربر باید عددی را که کامپیوتر به‌طور تصادفی انتخاب کرده است، حدس بزند. پس از هر حدس، بازی به کاربر می‌گوید که حدس او خیلی کم، خیلی زیاد یا درست است.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی "حدس عدد" ایجاد می‌کنیم.
```html
بازی حدس عدد
بازی حدس عدد
عدد را حدس بزنید (بین 1 تا 100):
```
### 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;
width: 90%;
max-width: 400px;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
width: 80%;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
.message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
let randomNumber;
let attempts;
const guessInput = document.getElementById('guessInput');
const guessBtn = document.getElementById('guessBtn');
const messageDiv = document.getElementById('message');
const restartBtn = document.getElementById('restartBtn');
// شروع بازی
function startGame() {
randomNumber = Math.floor(Math.random() * 100) + 1; // عدد تصادفی بین 1 تا 100
attempts = 0;
messageDiv.textContent = 'عدد را حدس بزنید!';
guessInput.value = '';
guessInput.disabled = false;
guessBtn.disabled = false;
restartBtn.style.display = 'none';
}
// بررسی حدس کاربر
guessBtn.addEventListener('click', function() {
const userGuess = Number(guessInput.value);
attempts++;
if (userGuess === randomNumber) {
messageDiv.textContent = `تبریک! شما عدد ${randomNumber} را در ${attempts} تلاش حدس زدید!`;
guessInput.disabled = true;
guessBtn.disabled = true;
restartBtn.style.display = 'block'; // نمایش دکمه شروع دوباره
} else if (userGuess < randomNumber) {
messageDiv.textContent = 'عدد شما خیلی کم است. دوباره امتحان کنید.';
} else if (userGuess > randomNumber) {
messageDiv.textContent = 'عدد شما خیلی زیاد است. دوباره امتحان کنید.';
}
});
// شروع بازی مجدد
restartBtn.addEventListener('click', function() {
startGame();
});
// شروع بازی
startGame();
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی، ورودی عددی برای حدس کاربر، دکمه حدس و نمایش پیام‌ها.
2. **CSS**:
- طراحی ساده و جذاب برای ورودی‌ها، دکمه‌ها و نمایش نتیجه.
3. **JavaScript**:
- **متغیرهای global**: شامل عدد تصادفی و تعداد تلاش‌ها.
- **شروع بازی**: تابعی برای انتخاب یک عدد تصادفی و تنظیم مقادیر اولیه.
- **رویداد کلیک دکمه حدس**: بررسی عدد ورودی و به‌روزرسانی پیام‌ها بر اساس حدس کاربر.
- **دکمه بازی مجدد**: فعال‌سازی دوباره بازی پس از اتمام.
### نتیجه‌گیری
این پروژه **بازی حدس عدد** یک مثال عالی برای درک نحوه کار با ورودی‌های کاربر، انجام محاسبات و به‌روزرسانی وضعیت در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌هایی مانند شمارش معکوس، محدود کردن تعداد تلاش‌ها، یا افزودن انیمیشن‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی "حدس عدد" در JavaScript** می‌باشد
