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

جزئیات محصول

دانلود پروژه بازی حدس کلمه (Word Guess Game)** با استفاده از HTML، CSS و JavaScript

دانلود پروژه بازی حدس کلمه (Word Guess Game)** با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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


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

بازی حدس کلمه

       

       
       
       

       

تعداد تلاش‌ها باقی‌مانده:

       
   
   
```
 
### 2. **CSS**
سپس از CSS برای طراحی ظاهر بازی استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}
 
.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
input {
    width: 50px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
button:hover {
    background-color: #0056b3;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم.
 
```javascript
const words = ["javascript", "html", "css", "react", "node", "game"];
let selectedWord = '';
let guessedLetters = [];
let attempts = 6;
 
// انتخاب کلمه تصادفی
function selectRandomWord() {
    selectedWord = words[Math.floor(Math.random() * words.length)];
}
 
// نمایش وضعیت کلمه
function displayWord() {
    const wordDisplay = document.getElementById('wordDisplay');
    wordDisplay.innerHTML = selectedWord
        .split('')
        .map(letter => (guessedLetters.includes(letter) ? letter : '_'))
        .join(' ');
}
 
// بررسی حدس کاربر
function checkGuess() {
    const guessInput = document.getElementById('guessInput');
    const message = document.getElementById('message');
    const attemptsLeft = document.getElementById('attemptsLeft');
 
    const guess = guessInput.value.toLowerCase();
 
    if (guess && !guessedLetters.includes(guess)) {
        guessedLetters.push(guess);
 
        if (!selectedWord.includes(guess)) {
            attempts--;
            message.innerText = `متاسفم، '${guess}' در کلمه نیست.`;
        } else {
            message.innerText = `خوب! '${guess}' در کلمه وجود دارد.`;
        }
 
        attemptsLeft.innerText = attempts;
 
        if (attempts === 0) {
            message.innerText = `بازی تمام شد! کلمه '${selectedWord}' بود.`;
            endGame();
        } else if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {
            message.innerText = `تبریک! شما کلمه را حدس زدید: '${selectedWord}'`;
            endGame();
        }
    } else {
        message.innerText = `لطفاً یک حرف جدید حدس بزنید.`;
    }
 
    guessInput.value = '';
    displayWord();
}
 
// پایان بازی
function endGame() {
    document.getElementById('guessBtn').disabled = true;
    document.getElementById('restartBtn').style.display = 'block';
}
 
// شروع دوباره بازی
function restartGame() {
    selectedWord = '';
    guessedLetters = [];
    attempts = 6;
    document.getElementById('restartBtn').style.display = 'none';
    document.getElementById('guessBtn').disabled = false;
    document.getElementById('message').innerText = '';
    document.getElementById('guessInput').value = '';
    displayWord();
    attemptsLeft.innerText = attempts;
    selectRandomWord();
}
 
// رویداد کلیک برای دکمه حدس زدن
document.getElementById('guessBtn').addEventListener('click', checkGuess);
document.getElementById('restartBtn').addEventListener('click', restartGame);
 
// اجرای اولیه
selectRandomWord();
displayWord();
document.getElementById('attemptsLeft').innerText = attempts;
```
 
### توضیحات کد:
1. **HTML**: شامل ورودی برای حدس حرف، دکمه‌ای برای حدس زدن، و پیامی برای نمایش وضعیت بازی است.
2. **CSS**: طراحی صفحه با استفاده از رنگ‌ها و حاشیه‌ها برای زیبایی.
3. **JavaScript**:
   - **انتخاب کلمه تصادفی**: از لیست کلمات، یک کلمه به صورت تصادفی انتخاب می‌شود.
   - **تابع `displayWord`**: این تابع وضعیت کلمه را نمایش می‌دهد و حروف حدس زده شده را نشان می‌دهد.
   - **تابع `checkGuess`**: این تابع حدس کاربر را بررسی می‌کند و وضعیت بازی را به‌روز می‌کند.
   - **تابع `endGame`**: این تابع بازی را پایان می‌دهد و دکمه شروع دوباره را نمایش می‌دهد.
   - **تابع `restartGame`**: این تابع بازی را دوباره راه‌اندازی می‌کند.
   - **رویدادهای کلیک**: با کلیک بر روی دکمه‌ها، توابع مربوطه اجرا می‌شود.
 
### نتیجه‌گیری
این بازی حدس کلمه یک پروژه سرگرم‌کننده و آموزنده برای یادگیری JavaScript و کار با DOM در صفحات وب است. شما می‌توانید ویژگی‌های بیشتری مانند افزودن کلمات جدید، نمره‌دهی به کاربر، و یا تم‌های مختلف برای بازی را به این پروژه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی حدس کلمه (Word Guess Game)** با استفاده از HTML، CSS و JavaScript می‌باشد