کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک بازی **شکار عبارات** (Phrase Hunter) با استفاده از 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;
}
.phrase-container {
font-size: 24px;
margin: 20px 0;
}
input[type="text"] {
width: calc(100% - 60px);
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
.hidden {
display: none;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// آرایه‌ای از عبارات برای بازی
const phrases = [
"سلام دنیا",
"برنامه نویسی جالب است",
"یادگیری زبان های جدید",
"من عاشق کدنویسی هستم",
"این یک بازی ساده است"
];
// انتخاب یک عبارت تصادفی
let selectedPhrase = phrases[Math.floor(Math.random() * phrases.length)];
let attempts = 0;
// تابع برای نمایش عبارات
function displayPhrase() {
const phraseContainer = document.getElementById('phraseContainer');
phraseContainer.innerHTML = selectedPhrase.replace(/./g, (char) => (char === ' ' ? ' ' : '_'));
}
// تابع برای بررسی حدس کاربر
function checkGuess() {
const guessInput = document.getElementById('guessInput');
const guess = guessInput.value.trim();
if (guess.toLowerCase() === selectedPhrase.toLowerCase()) {
document.getElementById('message').textContent = 'تبریک! شما عبارت را حدس زدید.';
document.getElementById('restartBtn').classList.remove('hidden');
} else {
attempts++;
if (attempts >= 3) {
document.getElementById('message').textContent = `متاسفم! شما عبارت را حدس نزدید. عبارت درست: ${selectedPhrase}`;
document.getElementById('restartBtn').classList.remove('hidden');
} else {
document.getElementById('message').textContent = 'حدس اشتباه است. دوباره امتحان کنید!';
}
}
guessInput.value = ''; // پاک کردن ورودی
}
// تابع برای راه‌اندازی دوباره بازی
function restartGame() {
attempts = 0;
selectedPhrase = phrases[Math.floor(Math.random() * phrases.length)];
displayPhrase();
document.getElementById('message').textContent = '';
document.getElementById('restartBtn').classList.add('hidden');
}
// رویدادهای کلیک
document.getElementById('guessBtn').addEventListener('click', checkGuess);
document.getElementById('restartBtn').addEventListener('click', restartGame);
// راه‌اندازی اولیه بازی
displayPhrase();
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، یک ورودی برای حدس زدن عبارت، دکمه‌ای برای حدس زدن، و یک بخش برای نمایش پیام‌ها است.
2. **CSS**: طراحی برای بازی شکار عبارات که شامل طراحی ورودی، دکمه و نمایش عبارت می‌شود.
3. **JavaScript**:
- **آرایه عبارات**: یک آرایه از عبارات برای انتخاب.
- **تابع `displayPhrase`**: نمایش عبارت انتخاب شده به صورت پنهان.
- **تابع `checkGuess`**: بررسی حدس کاربر و نمایش پیام‌های مناسب.
- **تابع `restartGame`**: راه‌اندازی دوباره بازی.
- **رویدادهای کلیک**: برای دکمه‌های حدس زدن و راه‌اندازی دوباره بازی.
### نتیجه‌گیری
این پروژه **بازی شکار عبارات** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و مدیریت رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن زمان‌بندی یا ثبت امتیاز اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **شکار عبارات** (Phrase Hunter) با استفاده از HTML، CSS و JavaScript می‌باشد
