کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی حدس عدد (Guess Number) با JavaScript**
این پروژه یک بازی ساده است که به کاربر اجازه می‌دهد یک عدد تصادفی را حدس بزند. کاربر باید سعی کند عدد مورد نظر را در کمترین تعداد حدس‌ها پیدا کند. این بازی با استفاده از 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);
width: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: calc(100% - 22px);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
#resultMessage {
margin-top: 20px;
font-size: 18px;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این کد عددی تصادفی را انتخاب می‌کند و به کاربر اجازه می‌دهد تا عدد را حدس بزند.
```javascript
// تعریف متغیرهای بازی
let randomNumber;
let attempts = 0;
// تابع برای شروع بازی
function startGame() {
randomNumber = Math.floor(Math.random() * 100) + 1; // تولید عدد تصادفی بین ۱ تا ۱۰۰
attempts = 0; // شمارش تلاش‌ها را صفر می‌کنیم
document.getElementById('resultMessage').textContent = ''; // پیام نتیجه را خالی می‌کنیم
document.getElementById('guessInput').value = ''; // ورودی عدد را خالی می‌کنیم
document.getElementById('restartBtn').style.display = 'none'; // دکمه شروع دوباره را مخفی می‌کنیم
}
// تابع برای حدس زدن عدد
function guessNumber() {
const guess = parseInt(document.getElementById('guessInput').value); // دریافت عدد حدس زده شده
attempts++; // شمارش تلاش‌ها را افزایش می‌دهیم
if (guess === randomNumber) {
document.getElementById('resultMessage').textContent = `تبریک! عدد درست ${randomNumber} بود. شما در ${attempts} تلاش موفق شدید!`;
document.getElementById('restartBtn').style.display = 'block'; // نمایش دکمه شروع دوباره
} else if (guess < randomNumber) {
document.getElementById('resultMessage').textContent = 'عدد بزرگتر است. دوباره تلاش کنید!';
} else {
document.getElementById('resultMessage').textContent = 'عدد کوچکتر است. دوباره تلاش کنید!';
}
}
// افزودن رویداد کلیک به دکمه‌ها
document.getElementById('guessBtn').addEventListener('click', guessNumber);
document.getElementById('restartBtn').addEventListener('click', startGame);
// شروع بازی هنگام بارگذاری صفحه
startGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای عدد، دکمه برای حدس زدن عدد، نمایش پیام نتیجه و دکمه‌ای برای شروع دوباره بازی.
2. **CSS**: طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **تولید عدد تصادفی**: عددی بین ۱ تا ۱۰۰ تولید می‌شود.
- **حدس عدد**: کاربر عددی را وارد می‌کند و برنامه با مقایسه عدد ورودی با عدد تصادفی، پیام مناسب را نمایش می‌دهد.
- **شمارش تلاش‌ها**: تعداد تلاش‌های کاربر برای حدس صحیح نیز شمارش می‌شود.
- **دکمه شروع دوباره**: پس از حدس صحیح، دکمه‌ای برای شروع دوباره بازی نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **بازی حدس عدد** یک مثال ساده و جذاب برای یادگیری JavaScript و کار با رویدادها و DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محدود کردن تعداد تلاش‌ها، اضافه کردن تایمر و غیره را به آن اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی حدس عدد (Guess Number) با JavaScript** می‌باشد
