دنیای پروژه

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



در اینجا یک پروژه ساده برای ایجاد یک بازی **تتریس** (Tetris) با استفاده از HTML، CSS و JavaScript ارائه شده است. این پروژه شامل منطق اصلی بازی، طراحی و نحوه اجرای آن است.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی تتریس ایجاد می‌کنیم.
 
```html
   
   
    بازی تتریس
   
   
       

تتریس

       
       
       
امتیاز: 0
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از 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);
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
canvas {
    border: 1px solid #333;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
 
button:hover {
    background-color: #218838;
}
 
#score {
    margin-top: 10px;
    font-size: 18px;
}
```
 
### 3. **JavaScript**
در اینجا منطق اصلی بازی تتریس را پیاده‌سازی می‌کنیم. این کد شامل ایجاد اشکال، چرخش آن‌ها، و مدیریت امتیاز است.
 
```javascript
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
const startBtn = document.getElementById('startBtn');
const scoreDisplay = document.getElementById('score');
 
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = 20;
 
let board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
let score = 0;
let isGameOver = false;
let currentPiece;
 
const pieces = [
    [[1, 1, 1, 1]], // I
    [[1, 1, 1], [0, 1, 0]], // T
    [[1, 1, 0], [0, 1, 1]], // S
    [[0, 1, 1], [1, 1, 0]], // Z
    [[1, 1], [1, 1]], // O
    [[1, 1, 1], [1, 0, 0]], // L
    [[1, 1, 1], [0, 0, 1]] // J
];
 
function drawBoard() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            if (board[r][c]) {
                context.fillStyle = 'blue';
                context.fillRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                context.strokeStyle = 'black';
                context.strokeRect(c * BLOCK_SIZE, r * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }
        }
    }
}
 
function drawPiece() {
    if (!currentPiece) return;
    currentPiece.shape.forEach((row, r) => {
        row.forEach((value, c) => {
            if (value) {
                context.fillStyle = 'red';
                context.fillRect((currentPiece.x + c) * BLOCK_SIZE, (currentPiece.y + r) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                context.strokeStyle = 'black';
                context.strokeRect((currentPiece.x + c) * BLOCK_SIZE, (currentPiece.y + r) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }
        });
    });
}
 
function resetPiece() {
    const index = Math.floor(Math.random() * pieces.length);
    currentPiece = {
        shape: pieces[index],
        x: Math.floor(COLS / 2) - Math.floor(pieces[index][0].length / 2),
        y: 0
    };
}
 
function merge() {
    currentPiece.shape.forEach((row, r) => {
        row.forEach((value, c) => {
            if (value) {
                board[currentPiece.y + r][currentPiece.x + c] = 1;
            }
        });
    });
}
 
function isCollision(offsetX, offsetY) {
    return currentPiece.shape.some((row, r) => {
        return row.some((value, c) => {
            if (value) {
                const newX = currentPiece.x + c + offsetX;
                const newY = currentPiece.y + r + offsetY;
                return (
                    newX < 0 || newX >= COLS || newY >= ROWS || (newY >= 0 && board[newY][newX])
                );
            }
            return false;
        });
    });
}
 
function movePiece(offsetX, offsetY) {
    if (!isCollision(offsetX, offsetY)) {
        currentPiece.x += offsetX;
        currentPiece.y += offsetY;
    } else if (offsetY > 0) {
        merge();
        clearLines();
        resetPiece();
        if (isCollision(0, 0)) {
            isGameOver = true;
            alert("بازی تمام شد!");
        }
    }
}
 
function clearLines() {
    for (let r = ROWS - 1; r >= 0; r--) {
        if (board[r].every(value => value)) {
            board.splice(r, 1);
            board.unshift(Array(COLS).fill(0));
            score += 10;
            scoreDisplay.textContent = `امتیاز: ${score}`;
        }
    }
}
 
function update() {
    if (!isGameOver) {
        movePiece(0, 1);
        drawBoard();
        drawPiece();
        requestAnimationFrame(update);
    }
}
 
startBtn.addEventListener('click', function() {
    if (!isGameOver) {
        resetPiece();
        update();
    }
});
 
document.addEventListener('keydown', function(event) {
    if (isGameOver) return;
    switch (event.key) {
        case 'ArrowLeft':
            movePiece(-1, 0);
            break;
        case 'ArrowRight':
            movePiece(1, 0);
            break;
        case 'ArrowDown':
            movePiece(0, 1);
            break;
        case 'ArrowUp':
            currentPiece.shape = currentPiece.shape[0].map((_, index) =>
                currentPiece.shape.map(row => row[index]).reverse()
            ); // چرخش
            break;
    }
});
 
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، یک بوم (canvas) برای رسم، دکمه شروع بازی و نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری جذاب.
3. **JavaScript**:
   - **بازی**: ایجاد بورد بازی و اشکال تِتریس، بررسی برخوردها، ادغام اشکال، و پاک‌سازی خطوط کامل.
   - **کنترل‌ها**: مدیریت کلیدهای صفحه‌کلید برای حرکت و چرخش اشکال.
   - **امتیاز**: جمع‌آوری امتیاز با پاک‌سازی خطوط.
 
### نتیجه‌گیری
این پروژه **بازی تتریس** یک مثال عالی برای یادگیری مفاهیم برنامه‌نویسی JavaScript، کار با بوم (canvas)، و مدیریت رویدادهای کاربر است. می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند سطح‌بندی، افزایش سرعت بازی، و ذخیره امتیازات بالاتر را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **تتریس** (Tetris) با استفاده از HTML، CSS و JavaScript می‌باشد