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

جزئیات محصول

دانلود پروژه **بازی

دانلود پروژه **بازی "آدمک" (Hangman) در JavaScript**

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

خرید فایل


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

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

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

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



 ### پروژه **بازی "آدمک" (Hangman) در 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);
    text-align: center;
    width: 90%;
    max-width: 400px;
}
 
h1 {
    margin-bottom: 20px;
}
 
input {
    padding: 10px;
    font-size: 16px;
    width: 80%;
    margin-bottom: 10px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
 
#wordDisplay {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
}
 
#wrongLetters {
    color: red;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const words = ["کودک", "کتاب", "کامپیوتر", "برنامه", "زبان", "گلابی"];
let selectedWord;
let wrongLetters;
let correctLetters;
let remainingGuesses;
 
const wordDisplay = document.getElementById('wordDisplay');
const wrongLettersDiv = document.getElementById('wrongLetters');
const remainingGuessesDiv = document.getElementById('remainingGuesses');
const letterInput = document.getElementById('letterInput');
const guessBtn = document.getElementById('guessBtn');
const restartBtn = document.getElementById('restartBtn');
 
// شروع بازی
function startGame() {
    selectedWord = words[Math.floor(Math.random() * words.length)];
    wrongLetters = [];
    correctLetters = [];
    remainingGuesses = 6;
 
    updateDisplay();
}
 
// به‌روزرسانی نمایش
function updateDisplay() {
    wordDisplay.textContent = selectedWord
        .split('')
        .map(letter => (correctLetters.includes(letter) ? letter : '_')).join(' ');
 
    wrongLettersDiv.textContent = wrongLetters.join(', ');
    remainingGuessesDiv.textContent = remainingGuesses;
 
    // بررسی برنده یا بازنده
    if (wordDisplay.textContent.replace(/\s/g, '') === selectedWord) {
        alert('تبریک! شما برنده شدید!');
        guessBtn.disabled = true;
        restartBtn.style.display = 'block';
    } else if (remainingGuesses <= 0) {
        alert(`شما باختید! کلمه درست: ${selectedWord}`);
        guessBtn.disabled = true;
        restartBtn.style.display = 'block';
    }
}
 
// رویداد کلیک دکمه حدس
guessBtn.addEventListener('click', function() {
    const guessedLetter = letterInput.value;
 
    if (guessedLetter && !wrongLetters.includes(guessedLetter) && !correctLetters.includes(guessedLetter)) {
        if (selectedWord.includes(guessedLetter)) {
            correctLetters.push(guessedLetter);
        } else {
            wrongLetters.push(guessedLetter);
            remainingGuesses--;
        }
        updateDisplay();
    }
 
    letterInput.value = '';
});
 
// شروع بازی مجدد
restartBtn.addEventListener('click', function() {
    startGame();
    guessBtn.disabled = false;
    restartBtn.style.display = 'none';
});
 
// شروع بازی
startGame();
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان بازی، نمایش کلمه، حروف اشتباه، تعداد اشتباهات مجاز، ورودی برای حرف حدس و دکمه‌ها.
 
2. **CSS**:
   - طراحی ساده و جذاب برای ورودی‌ها، دکمه‌ها و نمایش نتیجه.
 
3. **JavaScript**:
   - **آرایه کلمات**: شامل کلمات برای بازی.
   - **متغیرها**: برای کلمه انتخاب شده، حروف صحیح و اشتباه و تعداد باقی‌مانده.
   - **تابع شروع بازی**: انتخاب یک کلمه تصادفی و تنظیم مقادیر اولیه.
   - **تابع به‌روزرسانی نمایش**: نمایش وضعیت کنونی بازی و بررسی برنده یا بازنده.
   - **رویداد کلیک دکمه حدس**: بررسی حرف ورودی و به‌روزرسانی وضعیت.
   - **دکمه بازی مجدد**: فعال‌سازی دوباره بازی پس از اتمام.
 
### نتیجه‌گیری
این پروژه **بازی آدمک** یک مثال عالی برای درک نحوه کار با ورودی‌های کاربر، آرایه‌ها و کنترل جریان در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌هایی مانند افزودن تصاویر آدمک، محدود کردن تعداد حروف ورودی یا افزودن سطح سختی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی "آدمک" (Hangman) در JavaScript** می‌باشد