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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



 در اینجا کد منبع یک بازی 2048 ساده با استفاده از **JavaScript**، **HTML** و **CSS** ارائه شده است. این بازی به شما امکان می‌دهد که با جابجایی اعداد، آنها را ترکیب کنید و به هدف 2048 برسید.
 
### کد HTML
```html
   
   
    بازی 2048
   
   
       

بازی 2048

       
       
   
   
```
 
### کد CSS (`style.css`)
```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #faf8ef;
    font-family: Arial, sans-serif;
}
 
#gameContainer {
    text-align: center;
}
 
#gridContainer {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 5px;
    margin-bottom: 20px;
}
 
.cell {
    width: 100px;
    height: 100px;
    background-color: #eee4da;
    text-align: center;
    line-height: 100px;
    font-size: 24px;
    color: #776e65;
    border-radius: 5px;
}
```
 
### کد JavaScript (`2048.js`)
```javascript
const gridContainer = document.getElementById('gridContainer');
const restartBtn = document.getElementById('restartBtn');
let board = Array.from(Array(4), () => Array(4).fill(0));
 
function drawBoard() {
    gridContainer.innerHTML = '';
    board.forEach(row => {
        row.forEach(cell => {
            const div = document.createElement('div');
            div.className = 'cell';
            div.textContent = cell ? cell : '';
            gridContainer.appendChild(div);
        });
    });
}
 
function generateNumber() {
    const emptyCells = [];
    board.forEach((row, rIndex) => {
        row.forEach((cell, cIndex) => {
            if (cell === 0) emptyCells.push({ r: rIndex, c: cIndex });
        });
    });
    if (emptyCells.length) {
        const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        board[r][c] = Math.random() < 0.9 ? 2 : 4;
    }
}
 
function restartGame() {
    board = Array.from(Array(4), () => Array(4).fill(0));
    generateNumber();
    generateNumber();
    drawBoard();
}
 
function slideLeft() {
    for (let row = 0; row < 4; row++) {
        const nonZero = board[row].filter(num => num);
        const newRow = [];
        let skip = false;
 
        for (let col = 0; col < nonZero.length; col++) {
            if (skip) {
                skip = false;
                continue;
            }
            if (col < nonZero.length - 1 && nonZero[col] === nonZero[col + 1]) {
                newRow.push(nonZero[col] * 2);
                skip = true;
            } else {
                newRow.push(nonZero[col]);
            }
        }
        while (newRow.length < 4) newRow.push(0);
        board[row] = newRow;
    }
}
 
function slideRight() {
    for (let row = 0; row < 4; row++) {
        board[row].reverse();
    }
    slideLeft();
    for (let row = 0; row < 4; row++) {
        board[row].reverse();
    }
}
 
function slideUp() {
    board = rotateBoard(board);
    slideLeft();
    board = rotateBoard(board, true);
}
 
function slideDown() {
    board = rotateBoard(board);
    slideRight();
    board = rotateBoard(board, true);
}
 
function rotateBoard(matrix, reverse = false) {
    const newMatrix = Array.from(Array(4), () => Array(4).fill(0));
    for (let r = 0; r < 4; r++) {
        for (let c = 0; c < 4; c++) {
            if (reverse) {
                newMatrix[c][3 - r] = matrix[r][c];
            } else {
                newMatrix[3 - c][r] = matrix[r][c];
            }
        }
    }
    return newMatrix;
}
 
function handleKeyPress(event) {
    switch (event.key) {
        case 'ArrowLeft':
            slideLeft();
            break;
        case 'ArrowRight':
            slideRight();
            break;
        case 'ArrowUp':
            slideUp();
            break;
        case 'ArrowDown':
            slideDown();
            break;
    }
    generateNumber();
    drawBoard();
}
 
restartBtn.addEventListener('click', restartGame);
document.addEventListener('keydown', handleKeyPress);
 
restartGame();
```
 
### توضیحات
 
- **HTML**: ساختار صفحه وب بازی 2048 را تعریف می‌کند. شامل یک عنوان، محفظه برای نمایش بازی و دکمه‌ای برای شروع دوباره بازی است.
- **CSS**: استایل برای محفظه بازی و خانه‌ها را تعریف می‌کند، از جمله اندازه، رنگ و طراحی آن.
- **JavaScript**: منطق بازی را پیاده‌سازی می‌کند. شامل تابع‌هایی برای رسم تخته، تولید اعداد جدید، مدیریت حرکت اعداد و کنترل رویدادهای صفحه کلید برای انجام حرکات است.
 
### اجرای بازی
 
1. **ایجاد فایل‌ها**: فایل‌های `index.html`، `style.css` و `2048.js` را با کدهای مربوطه ایجاد کنید.
2. **اجرا در مرورگر**: فایل `index.html` را در مرورگر وب خود باز کنید. 
3. **بازی کنید**: با استفاده از کلیدهای جهت‌دار صفحه کلید، اعداد را جابجا کنید و سعی کنید به عدد 2048 برسید. 
 
با این کدها می‌توانید بازی 2048 را به راحتی ایجاد کنید و از آن لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی 2048 ساده با استفاده از **JavaScript**، **HTML** و **CSS می‌باشد