کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک **بازی هانگمن (Hangman)** با استفاده از JavaScript یک پروژه جالب و آموزشی است که به شما کمک می‌کند با مفاهیم برنامه‌نویسی وب و مدیریت وضعیت در بازی‌ها آشنا شوید. در این بازی، بازیکن باید یک کلمه مخفی را با حدس زدن حروف آن حدس بزند، قبل از اینکه تعداد مشخصی از اشتباهات را انجام دهد.
### ویژگی‌های اصلی پروژه
1. **انتخاب کلمات تصادفی**: کلمات از یک لیست انتخاب می‌شوند.
2. **حدس زدن حروف**: بازیکن می‌تواند حروف را حدس بزند.
3. **نمایش وضعیت**: نمایش حروف حدس زده شده و تعداد تلاش‌های باقی‌مانده.
4. **پیام‌های برد و باخت**: نمایش پیام‌های مناسب بر اساس نتیجه بازی.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:
```html
بازی هانگمن
بازی هانگمن
```
#### ۲. استایل‌دهی با CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.hangman-game {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
#word-container {
font-size: 32px;
margin: 20px 0;
}
input {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 15px;
border: none;
border-radius: 3px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#message {
margin-top: 20px;
font-size: 20px;
}
```
#### ۳. اسکریپت JavaScript
در نهایت، یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
```javascript
const words = ['برنامه‌نویسی', 'کامپیوتر', 'دیجیتال', 'تکنولوژی', 'داده', 'سیستم', 'بازی', 'هشدار', 'مشتری'];
let selectedWord = '';
let guessedLetters = [];
let attempts = 6;
const wordContainer = document.getElementById('word-container');
const letterInput = document.getElementById('letter-input');
const guessButton = document.getElementById('guess-button');
const message = document.getElementById('message');
const remainingAttempts = document.getElementById('remaining-attempts');
const restartButton = document.getElementById('restart-button');
// انتخاب کلمه تصادفی
function selectRandomWord() {
selectedWord = words[Math.floor(Math.random() * words.length)];
guessedLetters = [];
attempts = 6;
updateWordContainer();
updateAttempts();
message.textContent = '';
letterInput.value = '';
letterInput.focus();
guessButton.disabled = false;
}
// به روز رسانی نمایش کلمه
function updateWordContainer() {
wordContainer.innerHTML = selectedWord.split('').map(letter => (guessedLetters.includes(letter) ? letter : ' _ ')).join('');
}
// به روز رسانی تعداد تلاش‌های باقی‌مانده
function updateAttempts() {
remainingAttempts.textContent = attempts;
}
// بررسی حدس کاربر
function checkGuess() {
const letter = letterInput.value;
letterInput.value = '';
if (guessedLetters.includes(letter) || letter.length !== 1) {
message.textContent = 'لطفاً یک حرف جدید وارد کنید.';
return;
}
guessedLetters.push(letter);
if (!selectedWord.includes(letter)) {
attempts--;
}
updateWordContainer();
updateAttempts();
if (attempts === 0) {
message.textContent = `متاسفم! کلمه: ${selectedWord} بود.`;
guessButton.disabled = true;
} else if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {
message.textContent = 'تبریک! شما برنده شدید!';
guessButton.disabled = true;
}
}
// شروع مجدد بازی
function restartGame() {
selectRandomWord();
restartButton.style.display = 'none';
}
// رویدادها
guessButton.addEventListener('click', checkGuess);
letterInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
checkGuess();
}
});
restartButton.addEventListener('click', restartGame);
// راه‌اندازی اولیه
selectRandomWord();
```
### نحوه اجرای پروژه
1. تمامی فایل‌ها (`index.html`, `style.css`, `script.js`) را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید تا بازی اجرا شود.
### توضیحات کد
1. **HTML**: در این قسمت، ساختار بازی شامل ورودی‌ها، دکمه‌ها و بخش‌های نمایش نتایج مشخص شده است.
2. **CSS**: این بخش به طراحی و استایل‌دهی رابط کاربری بازی اختصاص دارد.
3. **JavaScript**:
- در این بخش، کلمات تصادفی انتخاب می‌شوند و وضعیت بازی مدیریت می‌شود.
- تابع `selectRandomWord` یک کلمه تصادفی انتخاب می‌کند و بازی را راه‌اندازی می‌کند.
- تابع `checkGuess` حدس کاربر را بررسی می‌کند و نتیجه بازی را به‌روز می‌کند.
- اگر کاربر برنده یا بازنده شود، پیام مناسبی نمایش داده می‌شود و دکمه حدس زدن غیرفعال می‌شود.
- دکمه "شروع مجدد" برای بازی دوباره قابل مشاهده است.
### نتیجه‌گیری
این پروژه "بازی هانگمن" با استفاده از JavaScript، HTML و CSS به شما امکان می‌دهد تا با مفاهیم پایه برنامه‌نویسی وب آشنا شوید. میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن حالت‌های مختلف یا کلمات با سطح دشواری متفاوت را پیاده‌سازی کنید. این تجربه به شما کمک می‌کند تا مهارت‌های برنامه‌نویسی خود را تقویت کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی هانگمن (Hangman)** با استفاده از JavaScript می‌باشد
