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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



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

بازی Pig Roll

       
           
               

بازیکن 1

               

امتیاز: 0

               

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

           
           
               

بازیکن 2

               

امتیاز: 0

               

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

           
       
       
       
       
       
نتیجه تاس: -
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی Pig Roll از 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);
    width: 90%;
    max-width: 500px;
    text-align: center;
}
 
.players {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
 
.player {
    width: 45%;
}
 
button {
    padding: 10px;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}
 
#rollBtn {
    background-color: #28a745;
    color: white;
}
 
#holdBtn {
    background-color: #007bff;
    color: white;
}
 
#newGameBtn {
    background-color: #dc3545;
    color: white;
}
 
#diceResult {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
let scores = [0, 0];
let currentScore = 0;
let activePlayer = 0;
let playing = true;
 
// انتخاب عناصر DOM
const score1El = document.getElementById('score1');
const score2El = document.getElementById('score2');
const current1El = document.getElementById('current1');
const current2El = document.getElementById('current2');
const diceEl = document.getElementById('dice');
const rollBtn = document.getElementById('rollBtn');
const holdBtn = document.getElementById('holdBtn');
const newGameBtn = document.getElementById('newGameBtn');
 
// شروع بازی جدید
function startNewGame() {
    scores = [0, 0];
    currentScore = 0;
    activePlayer = 0;
    playing = true;
 
    score1El.textContent = '0';
    score2El.textContent = '0';
    current1El.textContent = '0';
    current2El.textContent = '0';
    diceEl.textContent = '-';
}
 
startNewGame();
 
// تعویض بازیکن
function switchPlayer() {
    currentScore = 0;
    document.getElementById(`current${activePlayer + 1}`).textContent = currentScore;
    activePlayer = activePlayer === 0 ? 1 : 0;
}
 
// رویداد کلیک برای دکمه تاس ریختن
rollBtn.addEventListener('click', function() {
    if (playing) {
        const dice = Math.floor(Math.random() * 6) + 1;
        diceEl.textContent = dice;
 
        if (dice !== 1) {
            currentScore += dice;
            document.getElementById(`current${activePlayer + 1}`).textContent = currentScore;
        } else {
            switchPlayer();
        }
    }
});
 
// رویداد کلیک برای دکمه نگه داشتن امتیاز
holdBtn.addEventListener('click', function() {
    if (playing) {
        scores[activePlayer] += currentScore;
        document.getElementById(`score${activePlayer + 1}`).textContent = scores[activePlayer];
 
        if (scores[activePlayer] >= 100) {
            playing = false;
            alert(`بازیکن ${activePlayer + 1} برنده شد!`);
        } else {
            switchPlayer();
        }
    }
});
 
// رویداد کلیک برای دکمه شروع بازی جدید
newGameBtn.addEventListener('click', startNewGame);
```
 
### توضیحات کد:
1. **HTML**: شامل اطلاعات هر بازیکن (امتیاز و امتیاز موقت)، دکمه‌ها برای تاس ریختن، نگه داشتن امتیاز، و شروع بازی جدید است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
   - **شروع بازی جدید**: تنظیم مجدد تمامی امتیازات و بازیکنان.
   - **تاس ریختن**: یک عدد تصادفی بین 1 تا 6 تولید می‌شود. اگر تاس عدد 1 بیاورد، نوبت بازیکن عوض می‌شود.
   - **نگه داشتن امتیاز**: امتیاز موقت به امتیاز کل بازیکن اضافه می‌شود و سپس نوبت بازیکن عوض می‌شود.
   - **تعویض بازیکن**: تغییر نوبت بین بازیکن 1 و 2.
 
### نتیجه‌گیری
این پروژه **Pig Roll** یک بازی ساده و سرگرم‌کننده است که مفاهیم JavaScript مانند مدیریت رویدادها، دستکاری DOM و منطق بازی را پوشش می‌دهد. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تنظیم سطح دشواری یا افزودن قوانین اضافی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **Pig Roll** با استفاده از HTML، CSS و JavaScript می‌باشد