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

جزئیات محصول

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

دانلود پروژه بازی "چهار در یک ردیف" (Connect Four) با استفاده از JavaScript

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

خرید فایل


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

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

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

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

ساخت بازی "چهار در یک ردیف" (Connect Four) با استفاده از JavaScript یک پروژه جذاب و آموزنده است که به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی بازی، تعاملات کاربر و منطق بازی آشنا شوید. در این بازی دو بازیکن باید به ترتیب دیسک‌های خود را در یک شبکه قرار دهند تا اولین بازیکنی که چهار دیسک را به صورت افقی، عمودی یا مورب در یک ردیف قرار داد، برنده شود.
 
### توضیحات پروژه
در این پروژه، بازی Connect Four با استفاده از JavaScript، HTML و CSS ساخته می‌شود. دو بازیکن با رنگ‌های مختلف (معمولاً قرمز و زرد) نوبتی بازی می‌کنند تا یکی از آن‌ها بتواند چهار دیسک خود را به صورت متوالی در یک ردیف قرار دهد.
 
### ویژگی‌های اصلی پروژه
1. **شبکه 6x7 برای بازی**: نمایش یک تخته بازی با ۶ سطر و ۷ ستون.
2. **دو بازیکن (رنگ‌های مختلف)**: هر بازیکن می‌تواند به نوبت دیسک خود را در ستون دلخواه بیاندازد.
3. **نمایش برنده**: اعلام برنده وقتی که یک بازیکن چهار دیسک را به صورت متوالی قرار دهد.
4. **گرافیک ساده**: استفاده از CSS برای طراحی تخته و دیسک‌ها.
 
### کد منبع نمونه
 
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:
 
```html
   
   
    بازی چهار در یک ردیف
   
   

بازی چهار در یک ردیف

   
   

   
   
```
 
#### ۲. ایجاد فایل CSS
یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
 
```css
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}
 
#gameBoard {
    display: grid;
    grid-template-columns: repeat(7, 60px);
    grid-gap: 5px;
    justify-content: center;
    margin: 20px auto;
}
 
.cell {
    width: 60px;
    height: 60px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.cell.empty {
    background-color: #ecf0f1;
}
 
.cell.red {
    background-color: red;
}
 
.cell.yellow {
    background-color: yellow;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
```
 
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کنید و کد زیر را در آن قرار دهید:
 
```javascript
const rows = 6;
const cols = 7;
let currentPlayer = 'red';
let board = [];
 
function createBoard() {
    board = Array(rows).fill(null).map(() => Array(cols).fill(null));
    const gameBoard = document.getElementById('gameBoard');
    gameBoard.innerHTML = '';
 
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell', 'empty');
            cell.dataset.row = row;
            cell.dataset.col = col;
            cell.addEventListener('click', handleClick);
            gameBoard.appendChild(cell);
        }
    }
}
 
function handleClick(event) {
    const col = event.target.dataset.col;
    for (let row = rows - 1; row >= 0; row--) {
        if (!board[row][col]) {
            board[row][col] = currentPlayer;
            const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
            cell.classList.remove('empty');
            cell.classList.add(currentPlayer);
            if (checkWinner(row, col)) {
                document.getElementById('result').textContent = `بازیکن ${currentPlayer === 'red' ? 'قرمز' : 'زرد'} برنده شد!`;
                disableBoard();
            } else {
                currentPlayer = currentPlayer === 'red' ? 'yellow' : 'red';
            }
            break;
        }
    }
}
 
function checkWinner(row, col) {
    return checkDirection(row, col, 1, 0) || // افقی
           checkDirection(row, col, 0, 1) || // عمودی
           checkDirection(row, col, 1, 1) || // مورب از بالا چپ به پایین راست
           checkDirection(row, col, 1, -1);  // مورب از بالا راست به پایین چپ
}
 
function checkDirection(row, col, rowDir, colDir) {
    let count = 1;
    count += countDiscs(row, col, rowDir, colDir);
    count += countDiscs(row, col, -rowDir, -colDir);
    return count >= 4;
}
 
function countDiscs(row, col, rowDir, colDir) {
    let count = 0;
    let r = row + rowDir;
    let c = col + colDir;
 
    while (r >= 0 && r < rows && c >= 0 && c < cols && board[r][c] === currentPlayer) {
        count++;
        r += rowDir;
        c += colDir;
    }
 
    return count;
}
 
function disableBoard() {
    const cells = document.querySelectorAll('.cell');
    cells.forEach(cell => {
        cell.removeEventListener('click', handleClick);
    });
}
 
function resetGame() {
    document.getElementById('result').textContent = '';
    currentPlayer = 'red';
    createBoard();
}
 
createBoard();
```
 
### نحوه اجرای پروژه:
1. فایل‌های `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
 
### نتیجه‌گیری

 

این پروژه یک بازی ساده "چهار در یک ردیف" است که به شما کمک می‌کند تا با مفاهیم مهمی مانند مدیریت وضعیت بازی، تعاملات کاربر، و منطق برنده شدن آشنا شوید. شما می‌توانید بازی را با افزودن ویژگی‌های جدید مانند انتخاب رنگ، تعداد سطر و ستون بیشتر، و یا اضافه کردن انیمیشن‌های جالب گسترش دهید. همچنین این پروژه به شما امکان می‌دهد تا توانایی خود را در ایجاد یک رابط کاربری جذاب و کاربرپسند بهبود بخشید.
| صفحه قابل مشاهده: دانلود پروژه بازی "چهار در یک ردیف" (Connect Four) با استفاده از JavaScript می‌باشد