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

جزئیات محصول

دانلود پروژه **بازی آویزان (Hangman)** با استفاده از JavaScript

دانلود پروژه **بازی آویزان (Hangman)** با استفاده از JavaScript

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

خرید فایل


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

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

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

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



### پروژه **بازی آویزان (Hangman)** با استفاده از JavaScript
 
این پروژه یک بازی آویزان ساده است که در آن کاربران می‌توانند حروف را حدس بزنند تا یک کلمه مخفی را پیدا کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی آویزان ایجاد می‌کنیم.
 
```html
   
   
    بازی آویزان
   
   
       

بازی آویزان

       
       
       
       
       
تعداد تلاش‌ها: 6
   
   
```
 
### 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;
    margin-bottom: 20px;
}
 
input[type="text"] {
    width: 50px;
    padding: 10px;
    text-align: center;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}
 
.message {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}
 
.attempts {
    margin-top: 10px;
    font-size: 16px;
    color: red;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
// لیست کلمات برای بازی
const words = ["کتاب", "برنامه", "کامپیوتر", "زبان", "بازی"];
let selectedWord = "";
let guessedLetters = [];
let attemptsLeft = 6;
 
// انتخاب یک کلمه تصادفی
function selectRandomWord() {
    const randomIndex = Math.floor(Math.random() * words.length);
    selectedWord = words[randomIndex];
}
 
// نمایش کلمه با حروف حدس زده شده
function displayWord() {
    const wordDisplay = document.getElementById('wordDisplay');
    wordDisplay.innerHTML = selectedWord.split('').map(letter => {
        return guessedLetters.includes(letter) ? letter : "_";
    }).join(' ');
}
 
// افزودن رویداد کلیک به دکمه حدس زدن
document.getElementById('guessBtn').addEventListener('click', function() {
    const guessInput = document.getElementById('guessInput');
    const guessedLetter = guessInput.value;
 
    if (guessedLetter && guessedLetter.length === 1 && !guessedLetters.includes(guessedLetter)) {
        guessedLetters.push(guessedLetter);
 
        if (!selectedWord.includes(guessedLetter)) {
            attemptsLeft--;
        }
 
        if (attemptsLeft === 0) {
            document.getElementById('message').textContent = `متأسفم! کلمه: ${selectedWord}`;
        }
 
        displayWord();
        document.getElementById('attempts').textContent = `تعداد تلاش‌ها: ${attemptsLeft}`;
 
        if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {
            document.getElementById('message').textContent = "تبریک! کلمه را حدس زدید!";
        }
    }
 
    guessInput.value = ''; // پاک کردن ورودی
});
 
// شروع بازی
selectRandomWord();
displayWord();
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان بازی، نمایش کلمه، فیلد ورودی برای حدس حروف، دکمه حدس زدن و بخش‌های نمایش پیام و تعداد تلاش‌ها است.
 
2. **CSS**:
   - طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
 
3. **JavaScript**:
   - **لیست کلمات**: شامل کلمات موجود برای بازی.
   - **تابع انتخاب کلمه**: یک کلمه تصادفی از لیست انتخاب می‌کند.
   - **تابع نمایش کلمه**: کلمه را با حروف حدس زده شده نمایش می‌دهد.
   - **رویداد کلیک**: وقتی کاربر روی دکمه "حدس زدن" کلیک می‌کند، حرف حدس زده شده بررسی می‌شود و نتیجه به روز می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی آویزان** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند انتخاب سطح دشواری یا اضافه کردن گرافیک آویزان اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی آویزان (Hangman)** با استفاده از JavaScript می‌باشد