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

جزئیات محصول

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

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

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

خرید فایل


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

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

 در اینجا یک پروژه ساده برای ایجاد بازی **Connect Four** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی دو بازیکن را به رقابت می‌کشاند و هدف آن این است که یکی از بازیکنان زودتر چهار توپ هم‌رنگ را در یک ردیف، ستون یا قطری بچیند.

 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Connect Four ایجاد می‌کنیم.
 
```html
   
   
    بازی Connect Four
   
   
       

بازی Connect Four

       
       
           

نوبت بازیکن 1 (قرمز)

       
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    text-align: center;
}
 
#board {
    display: grid;
    grid-template-columns: repeat(7, 50px);
    grid-template-rows: repeat(6, 50px);
    gap: 5px;
    margin: 20px auto;
}
 
.cell {
    width: 50px;
    height: 50px;
    background-color: #d3d3d3;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.cell.red {
    background-color: red;
}
 
.cell.yellow {
    background-color: yellow;
}
 
.status {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش بازی Connect Four را مدیریت می‌کند و شامل منطق حرکت، بررسی برنده، و ریست بازی است.
 
```javascript
const board = document.getElementById('board');
const statusDisplay = document.getElementById('status');
const restartBtn = document.getElementById('restartBtn');
 
let currentPlayer = 'red';
let gameActive = true;
const columns = 7;
const rows = 6;
let gameState = Array.from(Array(rows), () => Array(columns).fill(''));
 
function createBoard() {
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns; c++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.setAttribute('data-column', c);
            cell.addEventListener('click', handleCellClick);
            board.appendChild(cell);
        }
    }
}
 
function handleCellClick(event) {
    const column = event.target.getAttribute('data-column');
    for (let r = rows - 1; r >= 0; r--) {
        if (gameState[r][column] === '') {
            gameState[r][column] = currentPlayer;
            const cell = board.children[r * columns + column];
            cell.classList.add(currentPlayer);
            if (checkWinner()) {
                statusDisplay.innerHTML = `بازیکن ${currentPlayer === 'red' ? '1' : '2'} برنده شد!`;
                gameActive = false;
                return;
            }
            currentPlayer = currentPlayer === 'red' ? 'yellow' : 'red';
            statusDisplay.innerHTML = `نوبت بازیکن ${currentPlayer === 'red' ? '1' : '2'} (${currentPlayer})`;
            return;
        }
    }
}
 
function checkWinner() {
    // بررسی افقی
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns - 3; c++) {
            if (
                gameState[r][c] === currentPlayer &&
                gameState[r][c + 1] === currentPlayer &&
                gameState[r][c + 2] === currentPlayer &&
                gameState[r][c + 3] === currentPlayer
            ) {
                return true;
            }
        }
    }
 
    // بررسی عمودی
    for (let c = 0; c < columns; c++) {
        for (let r = 0; r < rows - 3; r++) {
            if (
                gameState[r][c] === currentPlayer &&
                gameState[r + 1][c] === currentPlayer &&
                gameState[r + 2][c] === currentPlayer &&
                gameState[r + 3][c] === currentPlayer
            ) {
                return true;
            }
        }
    }
 
    // بررسی قطری (راست به چپ)
    for (let r = 0; r < rows - 3; r++) {
        for (let c = 0; c < columns - 3; c++) {
            if (
                gameState[r][c] === currentPlayer &&
                gameState[r + 1][c + 1] === currentPlayer &&
                gameState[r + 2][c + 2] === currentPlayer &&
                gameState[r + 3][c + 3] === currentPlayer
            ) {
                return true;
            }
        }
    }
 
    // بررسی قطری (چپ به راست)
    for (let r = 3; r < rows; r++) {
        for (let c = 0; c < columns - 3; c++) {
            if (
                gameState[r][c] === currentPlayer &&
                gameState[r - 1][c + 1] === currentPlayer &&
                gameState[r - 2][c + 2] === currentPlayer &&
                gameState[r - 3][c + 3] === currentPlayer
            ) {
                return true;
            }
        }
    }
 
    return false;
}
 
restartBtn.addEventListener('click', resetGame);
 
function resetGame() {
    currentPlayer = 'red';
    gameActive = true;
    gameState = Array.from(Array(rows), () => Array(columns).fill(''));
    statusDisplay.innerHTML = 'نوبت بازیکن 1 (قرمز)';
    Array.from(board.children).forEach(cell => {
        cell.classList.remove('red', 'yellow');
    });
}
 
createBoard();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، بورد بازی (ماتریس)، نمایش وضعیت بازی و دکمه برای شروع دوباره است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
   - **ایجاد بورد**: تابع `createBoard` بورد بازی را ایجاد می‌کند.
   - **مدیریت کلیک‌ها**: تابع `handleCellClick` برای ثبت حرکت بازیکنان و چک کردن برنده استفاده می‌شود.
   - **چک کردن برنده**: تابع `checkWinner` برای بررسی شرایط برنده شدن بازیکنان.
   - **ریست بازی**: تابع `resetGame` برای بازنشانی وضعیت بازی و آماده‌سازی برای شروع دوباره.
 
### نتیجه‌گیری
این پروژه **بازی Connect Four** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند مدیریت DOM و رویدادها است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن امتیازدهی یا قابلیت‌های بیشتر برای بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **Connect Four** با استفاده از HTML، CSS و JavaScript می‌باشد