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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



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

بازی Pig

       
           

بازیکن 1

           

امتیاز: 0

           

امتیاز موقت: 0

       
       
           

بازیکن 2

           

امتیاز: 0

           

امتیاز موقت: 0

       
       
       
       
   
   
```
 
### 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;
}
 
.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 80%;
    max-width: 600px;
}
 
.player {
    margin-bottom: 20px;
}
 
button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}
 
button:hover {
    background-color: #0056b3;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
let scores, currentScore, activePlayer, isGamePlaying;
 
init();
 
// راه‌اندازی بازی جدید
document.getElementById('newGame').addEventListener('click', init);
 
// انداختن تاس
document.getElementById('rollDice').addEventListener('click', function() {
    if (isGamePlaying) {
        const dice = Math.floor(Math.random() * 6) + 1;
 
        if (dice !== 1) {
            currentScore += dice;
            document.getElementById(`current-${activePlayer}`).textContent = currentScore;
        } else {
            switchPlayer();
        }
    }
});
 
// نگه داشتن امتیاز
document.getElementById('hold').addEventListener('click', function() {
    if (isGamePlaying) {
        scores[activePlayer - 1] += currentScore;
        document.getElementById(`score-${activePlayer}`).textContent = scores[activePlayer - 1];
 
        if (scores[activePlayer - 1] >= 100) {
            document.getElementById(`player-${activePlayer}`).classList.add('winner');
            isGamePlaying = false;
        } else {
            switchPlayer();
        }
    }
});
 
// تابع برای تعویض بازیکن
function switchPlayer() {
    currentScore = 0;
    document.getElementById(`current-${activePlayer}`).textContent = currentScore;
    activePlayer = activePlayer === 1 ? 2 : 1;
}
 
// راه‌اندازی بازی
function init() {
    scores = [0, 0];
    currentScore = 0;
    activePlayer = 1;
    isGamePlaying = true;
 
    document.getElementById('score-1').textContent = '0';
    document.getElementById('score-2').textContent = '0';
    document.getElementById('current-1').textContent = '0';
    document.getElementById('current-2').textContent = '0';
    document.getElementById('player-1').classList.remove('winner');
    document.getElementById('player-2').classList.remove('winner');
}
```
 
### توضیحات کد:
1. **HTML**: شامل دو بخش برای نمایش اطلاعات هر بازیکن و سه دکمه برای "انداختن تاس"، "نگه داشتن امتیاز" و "شروع بازی جدید" است.
2. **CSS**: طراحی ساده برای رابط کاربری با استفاده از رنگ‌ها و اندازه‌های مختلف.
3. **JavaScript**:
   - **تعریف متغیرها**: برای ذخیره امتیازهای هر بازیکن، امتیاز موقت، بازیکن فعال، و وضعیت بازی.
   - **رویداد کلیک انداختن تاس**: یک عدد تصادفی از 1 تا 6 ایجاد می‌شود و امتیاز موقت اضافه می‌شود مگر اینکه تاس عدد 1 باشد.
   - **رویداد کلیک نگه داشتن امتیاز**: امتیاز موقت به امتیاز کل بازیکن اضافه می‌شود و در صورت رسیدن به 100، بازیکن برنده اعلام می‌شود.
   - **تعویض بازیکن**: در صورتی که عدد 1 آورده شود یا بازیکن امتیاز خود را نگه دارد، بازیکن تعویض می‌شود.
   - **راه‌اندازی بازی**: برای راه‌اندازی یا بازنشانی بازی به حالت اولیه استفاده می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی Pig** یک مثال عالی برای یادگیری دستکاری DOM، مدیریت رویدادها، و پیاده‌سازی منطق بازی با JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند محدود کردن تعداد دورهای بازی، اضافه کردن انیمیشن‌ها، یا تغییر طراحی و ظاهر بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **Pig** با استفاده از HTML، CSS و JavaScript می‌باشد