مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه بازی **هَنگمن (Hangman)** با رابط کاربری گرافیکی (GUI) با استفاده از HTML، CSS و JavaScript

دانلود پروژه بازی **هَنگمن (Hangman)** با رابط کاربری گرافیکی (GUI) با استفاده از HTML، CSS و JavaScript

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



در اینجا یک پروژه ساده برای ایجاد یک بازی **هَنگمن (Hangman)** با رابط کاربری گرافیکی (GUI) با استفاده از 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: 300px;
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.word-display {
    font-size: 24px;
    letter-spacing: 5px;
    margin-bottom: 20px;
}
 
.wrong-letters {
    margin-top: 20px;
    color: #dc3545;
}
 
input {
    padding: 10px;
    margin: 10px 0;
    width: 60%;
    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;
}
 
.hidden {
    display: none;
}
 
.message {
    margin-top: 20px;
    color: #007bff;
}
```
 
### 3. **JavaScript**
سپس منطق بازی هَنگمن را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const words = ['کتاب', 'سیب', 'گربه', 'پروانه', 'کامپیوتر'];
let selectedWord = '';
let wrongLetters = [];
let correctLetters = [];
let maxAttempts = 6;
 
const wordDisplay = document.getElementById('wordDisplay');
const wrongLettersDiv = document.getElementById('wrongLetters');
const letterInput = document.getElementById('letterInput');
const guessBtn = document.getElementById('guessBtn');
const messageDiv = document.getElementById('message');
const restartBtn = document.getElementById('restartBtn');
 
// انتخاب یک کلمه تصادفی
function chooseWord() {
    selectedWord = words[Math.floor(Math.random() * words.length)];
}
 
// نمایش کلمه مخفی
function displayWord() {
    wordDisplay.innerHTML = selectedWord.split('').map(letter => (correctLetters.includes(letter) ? letter : '___')).join(' ');
}
 
// نمایش حروف نادرست
function displayWrongLetters() {
    wrongLettersDiv.innerHTML = `حروف نادرست: ${wrongLetters.join(', ')}`;
}
 
// بررسی وضعیت بازی
function checkGameStatus() {
    if (wrongLetters.length === maxAttempts) {
        messageDiv.textContent = `بازی تمام شد! کلمه: ${selectedWord}`;
        guessBtn.disabled = true;
        restartBtn.classList.remove('hidden');
    } else if (selectedWord.split('').every(letter => correctLetters.includes(letter))) {
        messageDiv.textContent = 'تبریک! شما برنده شدید!';
        guessBtn.disabled = true;
        restartBtn.classList.remove('hidden');
    }
}
 
// حدس زدن حرف
guessBtn.addEventListener('click', () => {
    const letter = letterInput.value.trim();
    letterInput.value = '';
 
    if (letter && !wrongLetters.includes(letter) && !correctLetters.includes(letter)) {
        if (selectedWord.includes(letter)) {
            correctLetters.push(letter);
        } else {
            wrongLetters.push(letter);
        }
 
        displayWord();
        displayWrongLetters();
        checkGameStatus();
    }
});
 
// شروع بازی
function startGame() {
    chooseWord();
    displayWord();
    wrongLetters = [];
    correctLetters = [];
    maxAttempts = 6;
    guessBtn.disabled = false;
    restartBtn.classList.add('hidden');
    messageDiv.textContent = '';
    displayWrongLetters();
}
 
// دوباره شروع کردن بازی
restartBtn.addEventListener('click', startGame);
 
// آغاز بازی اولیه
startGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، نمایش کلمه، ورودی برای حدس حروف، دکمه حدس زدن، و نمایش حروف نادرست و پیام‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
   - **آرایه کلمات**: حاوی کلمات برای بازی.
   - **تعیین کلمه انتخابی**: یک کلمه تصادفی انتخاب می‌شود.
   - **نمایش کلمه**: کلمه به صورت مخفی نمایش داده می‌شود.
   - **نمایش حروف نادرست**: حروف نادرست وارد شده توسط کاربر نمایش داده می‌شود.
   - **بررسی وضعیت بازی**: وضعیت بازی بر اساس تعداد حروف نادرست و حروف درست بررسی می‌شود.
   - **مدیریت رویدادها**: شامل رویداد برای حدس زدن حرف و دوباره شروع کردن بازی.
 
### نتیجه‌گیری
این پروژه **بازی هَنگمن** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM، مدیریت رویدادها، و منطق بازی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن کلمات جدید یا بهبود طراحی رابط کاربری را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **هَنگمن (Hangman)** با رابط کاربری گرافیکی (GUI) با استفاده از HTML، CSS و JavaScript می‌باشد