کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه: بازی تتریس کلاسیک با استفاده از JavaScript همراه با کد منبع
**بازی تتریس کلاسیک** یک پروژه سرگرم‌کننده است که با استفاده از **JavaScript**، **HTML** و **CSS** ساخته شده است. این بازی کلاسیک شامل پازل‌هایی با بلوک‌های مختلف است که بازیکن باید آن‌ها را به درستی در کنار هم قرار دهد تا خطوط کاملی بسازد و امتیاز کسب کند. هدف اصلی بازی پر کردن خطوط و جلوگیری از پر شدن کل صفحه است.
### ویژگی‌های بازی تتریس:
1. **گیم‌پلی کلاسیک**: بازی به سبک کلاسیک تتریس طراحی شده است، به گونه‌ای که بازیکنان باید بلوک‌ها را حرکت داده و بچرخانند تا خطوط کاملی بسازند.
2. **کنترل‌های ساده**: با استفاده از کلیدهای جهت‌دار صفحه‌کلید میتوانید بلوک‌ها را جابجا کنید، بچرخانید یا سریع‌تر بیاندازید.
3. **گرافیک دوبعدی ساده**: بازی با گرافیک ساده و سبک، مشابه نسخه کلاسیک آن، طراحی شده است که باعث شده تجربه بازی بسیار آشنا و لذت‌بخش باشد.
4. **امتیازدهی**: بازیکنان با پر کردن هر خط امتیاز کسب می‌کنند، و سرعت بازی با پیشرفت بیشتر می‌شود تا چالش‌برانگیزتر گردد.
### نحوه اجرای پروژه:
1. **دانلود پروژه**: ابتدا کد منبع بازی را دانلود کنید.
2. **اجرای پروژه**: فایل `index.html` را در مرورگر خود باز کنید. این بازی در مرورگرهای مدرن مانند **Google Chrome** یا **Mozilla Firefox** به بهترین شکل اجرا می‌شود.
3. **شروع بازی**: پس از باز کردن صفحه، میتوانید با فشردن دکمه "شروع بازی" وارد بازی شوید و شروع به چیدن بلوک‌ها کنید.
### ساختار کد بازی:
#### کد HTML (index.html)
```html
بازی تتریس کلاسیک
بازی تتریس کلاسیک
برای کنترل بازی از کلیدهای جهت‌دار استفاده کنید.
```
#### کد CSS (style.css)
```css
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Arial', sans-serif;
background-color: #222;
color: #fff;
margin: 0;
padding: 20px;
}
canvas {
border: 2px solid #fff;
background-color: #000;
}
```
#### کد JavaScript (script.js)
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const ROWS = 20;
const COLUMNS = 10;
const BLOCK_SIZE = 30;
let board = Array.from({ length: ROWS }, () => Array(COLUMNS).fill(0));
const SHAPES = [
// شکل I
[[1, 1, 1, 1]],
// شکل J
[[1, 0, 0], [1, 1, 1]],
// شکل L
[[0, 0, 1], [1, 1, 1]],
// شکل O
[[1, 1], [1, 1]],
// شکل S
[[0, 1, 1], [1, 1, 0]],
// شکل T
[[0, 1, 0], [1, 1, 1]],
// شکل Z
[[1, 1, 0], [0, 1, 1]]
];
let currentShape = {
shape: SHAPES[Math.floor(Math.random() * SHAPES.length)],
row: 0,
col: Math.floor(COLUMNS / 2) - 1
};
function drawBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
board.forEach((row, rIdx) => {
row.forEach((cell, cIdx) => {
if (cell) {
ctx.fillStyle = 'cyan';
ctx.fillRect(cIdx * BLOCK_SIZE, rIdx * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
ctx.strokeRect(cIdx * BLOCK_SIZE, rIdx * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
});
});
}
function drawShape() {
ctx.fillStyle = 'red';
currentShape.shape.forEach((row, rIdx) => {
row.forEach((cell, cIdx) => {
if (cell) {
ctx.fillRect((currentShape.col + cIdx) * BLOCK_SIZE, (currentShape.row + rIdx) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
ctx.strokeRect((currentShape.col + cIdx) * BLOCK_SIZE, (currentShape.row + rIdx) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
});
});
}
function moveShapeDown() {
currentShape.row++;
if (collision()) {
currentShape.row--;
mergeShape();
resetShape();
if (gameOver()) {
alert('بازی تمام شد');
board = Array.from({ length: ROWS }, () => Array(COLUMNS).fill(0));
}
}
}
function collision() {
for (let r = 0; r < currentShape.shape.length; r++) {
for (let c = 0; c < currentShape.shape[r].length; c++) {
if (
currentShape.shape[r][c] &&
(board[currentShape.row + r] && board[currentShape.row + r][currentShape.col + c]) !== 0
) {
return true;
}
}
}
return false;
}
function mergeShape() {
currentShape.shape.forEach((row, rIdx) => {
row.forEach((cell, cIdx) => {
if (cell) {
board[currentShape.row + rIdx][currentShape.col + cIdx] = cell;
}
});
});
}
function resetShape() {
currentShape.shape = SHAPES[Math.floor(Math.random() * SHAPES.length)];
currentShape.row = 0;
currentShape.col = Math.floor(COLUMNS / 2) - 1;
}
function gameOver() {
return currentShape.shape.some((row, rIdx) =>
row.some((cell, cIdx) => cell && board[currentShape.row + rIdx][currentShape.col + cIdx] !== 0)
);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
currentShape.col--;
if (collision()) {
currentShape.col++;
}
} else if (e.key === 'ArrowRight') {
currentShape.col++;
if (collision()) {
currentShape.col--;
}
} else if (e.key === 'ArrowDown') {
moveShapeDown();
}
});
function gameLoop() {
moveShapeDown();
drawBoard();
drawShape();
setTimeout(gameLoop, 500);
}
gameLoop();
```
### جمع‌بندی
**بازی تتریس کلاسیک** یک پروژه ساده و نوستالژیک است که به کمک JavaScript، HTML و CSS طراحی شده است. این بازی نه تنها برای سرگرمی بلکه برای یادگیری مفاهیم پایه‌ای برنامه‌نویسی مانند آرایه‌ها، برخوردها و حلقه‌های بازی بسیار مفید است. این پروژه می‌تواند به توسعه‌دهندگان کمک کند تا مهارت‌های خود را در زمینه برنامه‌نویسی بازی‌های وب تقویت کنند.
| صفحه قابل مشاهده:
دانلود پروژه بازی تتریس کلاسیک با استفاده از JavaScript همراه با کد منبع می‌باشد
