دنیای پروژه

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



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

بازی دارکوب

       
       
       
       
           
           
           
       
       
سعی‌های باقی‌مانده: 6
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی دارکوب از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}
 
.word {
    font-size: 24px;
    margin: 20px 0;
}
 
.controls {
    margin: 20px 0;
}
 
input {
    padding: 10px;
    font-size: 16px;
}
 
button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 5px;
}
 
.message {
    margin: 20px 0;
    font-weight: bold;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const words = ['javascript', 'html', 'css', 'programming', 'hangman', 'computer', 'coding', 'developer'];
let selectedWord;
let guessedLetters = [];
let remainingTries = 6;
 
// انتخاب یک کلمه تصادفی
function selectRandomWord() {
    selectedWord = words[Math.floor(Math.random() * words.length)];
}
 
// نمایش کلمه مخفی به صورت نقاط
function displayWord() {
    const wordDisplay = selectedWord.split('').map(letter => (guessedLetters.includes(letter) ? letter : '_')).join(' ');
    document.getElementById('word').textContent = wordDisplay;
}
 
// بررسی حدس بازیکن
function checkGuess() {
    const guessInput = document.getElementById('guess-input');
    const guessedLetter = guessInput.value.toLowerCase();
 
    if (guessedLetter && !guessedLetters.includes(guessedLetter)) {
        guessedLetters.push(guessedLetter);
        if (!selectedWord.includes(guessedLetter)) {
            remainingTries--;
        }
    }
    
    guessInput.value = '';
    updateGame();
}
 
// به‌روزرسانی بازی
function updateGame() {
    displayWord();
    document.getElementById('tries').textContent = remainingTries;
 
    if (remainingTries === 0) {
        document.getElementById('message').textContent = `باختید! کلمه: ${selectedWord}`;
        disableInput();
    } else if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {
        document.getElementById('message').textContent = 'شما برنده شدید!';
        disableInput();
    }
}
 
// غیر فعال کردن ورودی
function disableInput() {
    document.getElementById('guess-input').disabled = true;
    document.getElementById('guess-btn').disabled = true;
}
 
// شروع بازی دوباره
function restartGame() {
    guessedLetters = [];
    remainingTries = 6;
    selectRandomWord();
    displayWord();
    document.getElementById('message').textContent = '';
    document.getElementById('guess-input').disabled = false;
    document.getElementById('guess-btn').disabled = false;
    document.getElementById('tries').textContent = remainingTries;
}
 
// شروع بازی
selectRandomWord();
displayWord();
 
// افزودن رویداد کلیک برای دکمه‌ها
document.getElementById('guess-btn').addEventListener('click', checkGuess);
document.getElementById('restart-btn').addEventListener('click', restartGame);
```
 
### توضیحات کد:
1. **HTML**: شامل بخش‌هایی برای نمایش کلمه، ورودی برای حدس حرف، و دکمه‌هایی برای حدس و شروع دوباره بازی است.
2. **CSS**: طراحی ساده برای ایجاد یک محیط بازی کاربرپسند.
3. **JavaScript**:
   - **انتخاب کلمه تصادفی**: از آرایه‌ای از کلمات یک کلمه تصادفی انتخاب می‌شود.
   - **نمایش کلمه**: کلمه مخفی به صورت نقاط نمایش داده می‌شود و حرف‌های حدس زده شده نشان داده می‌شود.
   - **بررسی حدس**: ورودی بازیکن بررسی می‌شود و سعی‌های باقی‌مانده به‌روز می‌شود.
   - **غیر فعال کردن ورودی**: در صورت باخت یا برنده شدن، ورودی‌ها غیرفعال می‌شوند.
   - **شروع دوباره**: بازی دوباره با کلمه جدید و تنظیمات اولیه شروع می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی دارکوب** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند مدیریت رویدادها و دستکاری DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند نمایش تصویر دارکوب، اضافه کردن سطوح مختلف دشواری یا تغییر کلمات اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی دارکوب (Hangman)** با استفاده از HTML، CSS و JavaScript می‌باشد