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

جزئیات محصول

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

دانلود پروژه بازی "نقاط و جعبه‌ها" (Dots and Boxes) با استفاده از JavaScript

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

خرید فایل


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

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

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

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


 ساخت بازی "نقاط و جعبه‌ها" (Dots and Boxes) با استفاده از JavaScript یک پروژه جذاب است که می‌تواند به شما کمک کند تا با مفاهیم برنامه‌نویسی مانند کار با DOM، مدیریت رویدادها و الگوریتم‌های ساده آشنا شوید. در این بازی، دو بازیکن نوبتی با کشیدن خطوط بین نقاط، سعی می‌کنند جعبه‌هایی بسازند و در نهایت امتیاز بیشتری کسب کنند.
 
### ویژگی‌های اصلی پروژه
1. **بازی نوبتی**: دو بازیکن به نوبت اقدام به کشیدن خطوط می‌کنند.
2. **تعیین برنده**: در انتهای بازی، برنده مشخص می‌شود.
3. **رابط کاربری ساده**: با استفاده از HTML و CSS، رابط کاربری بازی طراحی می‌شود.
 
### مراحل پیاده‌سازی پروژه
 
#### ۱. ساختار HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
 
```html
   
   
    بازی نقاط و جعبه‌ها
   
   
       

بازی نقاط و جعبه‌ها

       
       
           

بازیکن ۱: 0

           

بازیکن ۲: 0

       
       
   
   
```
 
#### ۲. استایل‌دهی با CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.game-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
#board {
    display: grid;
    grid-template-columns: repeat(6, 50px);
    grid-template-rows: repeat(6, 50px);
    position: relative;
    margin: 20px 0;
}
 
.line {
    position: absolute;
    background-color: #333;
}
 
.horizontal {
    height: 5px;
}
 
.vertical {
    width: 5px;
}
 
.scoreboard {
    margin-top: 20px;
}
 
button {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}
 
button:hover {
    background-color: #45a049;
}
```
 
#### ۳. اسکریپت JavaScript
در نهایت، یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
 
```javascript
const board = document.getElementById('board');
const score1 = document.getElementById('score1');
const score2 = document.getElementById('score2');
const resetButton = document.getElementById('reset');
 
let playerTurn = 1;
let player1Score = 0;
let player2Score = 0;
const lines = []; // ذخیره خطوط کشیده شده
const boxes = []; // ذخیره جعبه‌ها
 
// ایجاد نقاط و خطوط
function createBoard(size) {
    for (let i = 0; i < size; i++) {
        for (let j = 0; j < size; j++) {
            // ایجاد نقاط
            const dot = document.createElement('div');
            dot.classList.add('dot');
            dot.style.left = `${j * 50}px`;
            dot.style.top = `${i * 50}px`;
            board.appendChild(dot);
 
            // اضافه کردن خطوط افقی
            if (j < size - 1) {
                createLine(j * 50 + 5, i * 50 + 25, 'horizontal');
            }
            // اضافه کردن خطوط عمودی
            if (i < size - 1) {
                createLine(j * 50 + 25, i * 50 + 5, 'vertical');
            }
        }
    }
}
 
// ایجاد یک خط
function createLine(x, y, orientation) {
    const line = document.createElement('div');
    line.classList.add('line', orientation);
    line.style.left = `${x}px`;
    line.style.top = `${y}px`;
    line.addEventListener('click', () => handleLineClick(line, orientation));
    board.appendChild(line);
    lines.push(line);
}
 
// مدیریت کلیک روی خطوط
function handleLineClick(line, orientation) {
    line.style.backgroundColor = playerTurn === 1 ? 'blue' : 'red';
    line.style.pointerEvents = 'none'; // غیرفعال کردن کلیک بعدی
 
    // بررسی اینکه آیا جعبه‌ای کامل شده است یا خیر
    const boxCompleted = checkBoxCompletion(line, orientation);
    if (boxCompleted) {
        if (playerTurn === 1) {
            player1Score++;
            score1.textContent = player1Score;
        } else {
            player2Score++;
            score2.textContent = player2Score;
        }
    } else {
        playerTurn = playerTurn === 1 ? 2 : 1; // نوبت بازیکن را عوض کنید
    }
}
 
// بررسی اینکه آیا جعبه‌ای کامل شده است یا خیر
function checkBoxCompletion(line, orientation) {
    const lineIndex = lines.indexOf(line);
    const boxCoords = [];
 
    if (orientation === 'horizontal') {
        const row = Math.floor(lineIndex / (lines.length / 6));
        const col = lineIndex % (lines.length / 6);
        boxCoords.push([row, col]);
        boxCoords.push([row, col + 1]);
    } else {
        const row = Math.floor(lineIndex / (lines.length / 6));
        const col = lineIndex % (lines.length / 6);
        boxCoords.push([row, col]);
        boxCoords.push([row + 1, col]);
    }
 
    let complete = true;
 
    // بررسی کامل بودن جعبه
    for (const coords of boxCoords) {
        const [r, c] = coords;
        const boxIndex = r * 5 + c;
        if (!boxes[boxIndex]) {
            complete = false;
            break;
        }
    }
 
    if (complete) {
        boxes.push(boxCoords);
        return true;
    }
 
    return false;
}
 
// بازنشانی بازی
resetButton.addEventListener('click', () => {
    player1Score = 0;
    player2Score = 0;
    score1.textContent = player1Score;
    score2.textContent = player2Score;
    board.innerHTML = ''; // پاک کردن تخته
    lines.length = 0; // پاک کردن خطوط
    boxes.length = 0; // پاک کردن جعبه‌ها
    createBoard(5); // ایجاد مجدد تخته
});
 
// ایجاد تخته اولیه
createBoard(5);
```
 
### توضیحات کد
 
1. **تعریف امتیازات و نوبت بازیکن**: متغیرهایی برای نگهداری امتیازات و نوبت بازیکن ایجاد شده‌اند.
2. **ایجاد تخته بازی**: تابع `createBoard` نقاط و خطوط افقی و عمودی را در یک تخته ۵x۵ ایجاد می‌کند.
3. **مدیریت کلیک بر روی خطوط**: با کلیک بر روی هر خط، رنگ آن تغییر کرده و وضعیت نوبت بازیکن بررسی می‌شود.
4. **بررسی کامل بودن جعبه**: تابع `checkBoxCompletion` بررسی می‌کند که آیا خط کشیده شده منجر به کامل شدن یک جعبه شده است یا خیر.
5. **بازنشانی بازی**: با کلیک بر روی دکمه "بازنشانی"، امتیازات و تخته بازی پاک می‌شود و دوباره ایجاد می‌شود.
 
### نحوه اجرای پروژه
1. همه فایل‌ها (`index.html`, `style.css`, `script.js`) را در یک پوشه ذخیره کنید.
2. فایل `index.html` را در مرورگر خود باز کنید تا بازی اجرا شود.
 
### نتیجه‌گیری
این پروژه "نقاط و جعبه‌ها" با استفاده از JavaScript، HTML، و CSS یک بازی تعاملی و سرگرم‌کننده را ارائه می‌دهد. می‌توانید این پروژه را با افزودن ویژگی‌های بیشتر مانند حالت‌های مختلف بازی، ذخیره‌سازی امتیازات یا ایجاد انیمیشن‌های جذاب‌تر گسترش دهید. این پروژه به شما کمک می‌کند تا با اصول برنامه‌نویسی JavaScript و تعاملات کاربر آشنا شوید.
| صفحه قابل مشاهده: دانلود پروژه بازی "نقاط و جعبه‌ها" (Dots and Boxes) با استفاده از JavaScript می‌باشد