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

جزئیات محصول

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

دانلود پروژه **بازی "آدمک" (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;
}
 
.word {
    font-size: 32px;
    margin-bottom: 20px;
}
 
input {
    width: 50px;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
}
 
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;
}
 
.guessedLetters {
    margin-top: 10px;
}
 
.remainingAttempts {
    margin-top: 10px;
    font-weight: bold;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const words = ["Javascript", "Programming", "Hangman", "Developer", "Coding"];
let selectedWord;
let guessedLetters = [];
let remainingAttempts;
 
const wordDiv = document.getElementById('word');
const letterInput = document.getElementById('letterInput');
const guessBtn = document.getElementById('guessBtn');
const messageDiv = document.getElementById('message');
const guessedLettersDiv = document.getElementById('guessedLetters');
const remainingAttemptsDiv = document.getElementById('remainingAttempts');
 
// شروع بازی
function startGame() {
    selectedWord = words[Math.floor(Math.random() * words.length)];
    guessedLetters = [];
    remainingAttempts = 6; // تعداد تلاش‌ها
    updateWordDisplay();
    updateRemainingAttempts();
    messageDiv.textContent = '';
    guessedLettersDiv.textContent = '';
    letterInput.value = '';
    letterInput.focus();
}
 
// به‌روزرسانی نمایش کلمه
function updateWordDisplay() {
    const displayWord = selectedWord.split('').map(letter => (guessedLetters.includes(letter) ? letter : '_')).join(' ');
    wordDiv.textContent = displayWord;
}
 
// به‌روزرسانی تعداد تلاش‌های باقی‌مانده
function updateRemainingAttempts() {
    remainingAttemptsDiv.textContent = `تعداد تلاش‌های باقی‌مانده: ${remainingAttempts}`;
}
 
// رویداد کلیک دکمه حدس
guessBtn.addEventListener('click', function() {
    const letter = letterInput.value.toUpperCase();
    letterInput.value = '';
 
    if (guessedLetters.includes(letter) || letter.length === 0) {
        return; // اگر حرف تکراری باشد یا خالی باشد، هیچ‌کاری انجام ندهید
    }
 
    guessedLetters.push(letter);
    
    if (!selectedWord.includes(letter)) {
        remainingAttempts--; // اگر حرف در کلمه نباشد، تعداد تلاش‌ها کم می‌شود
    }
 
    updateWordDisplay();
    updateRemainingAttempts();
    guessedLettersDiv.textContent = `حروف حدس زده شده: ${guessedLetters.join(', ')}`;
 
    if (remainingAttempts === 0) {
        messageDiv.textContent = `متأسفم! کلمه: ${selectedWord} بود.`;
        guessBtn.disabled = true; // غیرفعال کردن دکمه حدس بعد از باخت
    } else if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {
        messageDiv.textContent = 'تبریک! شما برنده شدید!';
        guessBtn.disabled = true; // غیرفعال کردن دکمه حدس بعد از برنده شدن
    }
});
 
// شروع بازی
startGame();
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان بازی، نمایش کلمه، ورودی برای حدس حروف، دکمه حدس و نمایش پیام‌ها و اطلاعات.
 
2. **CSS**:
   - طراحی ساده و زیبا برای ورودی‌ها، دکمه‌ها و نمایش نتیجه.
 
3. **JavaScript**:
   - **لیست کلمات**: کلمات برای بازی در یک آرایه تعریف شده‌اند.
   - **شروع بازی**: تابعی برای انتخاب یک کلمه تصادفی و تنظیم مقادیر اولیه.
   - **به‌روزرسانی نمایش کلمه و تعداد تلاش‌ها**: توابعی برای نمایش وضعیت فعلی بازی.
   - **رویداد کلیک دکمه حدس**: بررسی حرف‌های وارد شده و به‌روزرسانی وضعیت بازی بر اساس آن‌ها.
 
### نتیجه‌گیری
این پروژه **بازی آدمک** یک مثال عالی برای درک نحوه کار با DOM و پردازش ورودی‌های کاربر در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌هایی مانند افزودن تم‌ها، انتخاب کلمات دسته‌بندی شده، یا افزودن انیمیشن‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی "آدمک" (Hangman) در JavaScript** می‌باشد