کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت بازی تتریس با استفاده از **JavaScript** یکی از پروژه‌های جذاب و آموزشی است که به شما کمک می‌کند با مفاهیم مختلف برنامه‌نویسی و توسعه بازی آشنا شوید. در این پروژه، بازیکن می‌تواند با چرخش و جابجایی بلوک‌های تیره به ساختار کامل بپردازد و امتیاز کسب کند.
### ویژگی‌های اصلی پروژه
1. **کنترل بلوک‌ها**: بازیکن می‌تواند بلوک‌ها را چرخش دهد و به چپ و راست حرکت کند.
2. **امتیازدهی**: هر بار که یک ردیف کامل حذف شود، بازیکن امتیاز کسب می‌کند.
3. **تنظیمات بازی**: بازی در یک صفحه ۲ بعدی پیاده‌سازی می‌شود.
### مراحل پیاده‌سازی پروژه
#### ۱. راه‌اندازی پروژه
ابتدا یک پوشه جدید برای پروژه‌تان ایجاد کنید و در آن یک فایل HTML به نام `index.html` بسازید. همچنین باید CSS و JavaScript را برای بازی اضافه کنید.
#### ۲. ساختار HTML
فایل `index.html` را با کد زیر پر کنید:
```html
بازی تتریس
بازی تتریس
```
#### ۳. نوشتن کد CSS (style.css)
فایل `style.css` را با کد زیر پر کنید:
```css
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
background-color: #222;
color: #fff;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 2px solid #fff;
background-color: #000;
}
#score {
margin-top: 20px;
font-size: 24px;
}
```
#### ۴. نوشتن کد بازی (script.js)
فایل `script.js` را با کد زیر پر کنید:
```javascript
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
context.scale(30, 30); // مقیاس canvas برای راحتی بیشتر
let board = Array.from({ length: 20 }, () => Array(10).fill(0));
let score = 0;
let piece;
let dropInterval = 1000;
let dropTime = 0;
// بلوک‌ها
const pieces = [
[[1, 1, 1, 1]], // I
[[1, 1, 1], [0, 1, 0]], // T
[[1, 1], [1, 1]], // O
[[0, 1, 1], [1, 1, 0]], // S
[[1, 1, 0], [0, 1, 1]] // Z
];
// انتخاب بلوک تصادفی
function randomPiece() {
return pieces[Math.floor(Math.random() * pieces.length)];
}
// بررسی برخورد
function collide(board, piece, offset) {
for (let y = 0; y < piece.length; y++) {
for (let x = 0; x < piece[y].length; x++) {
if (piece[y][x]) {
const newX = x + offset.x;
const newY = y + offset.y;
if (newX < 0 || newX >= board[0].length || newY >= board.length || board[newY][newX]) {
return true;
}
}
}
}
return false;
}
// چسباندن بلوک
function merge(board, piece, offset) {
for (let y = 0; y < piece.length; y++) {
for (let x = 0; x < piece[y].length; x++) {
if (piece[y][x]) {
board[y + offset.y][x + offset.x] = piece[y][x];
}
}
}
}
// حذف ردیف‌های کامل
function removeLines() {
for (let y = board.length - 1; y >= 0; y--) {
if (board[y].every(value => value)) {
board.splice(y, 1);
board.unshift(Array(10).fill(0));
score += 10;
scoreElement.innerText = 'امتیاز: ' + score;
}
}
}
// چرخش بلوک
function rotate(piece) {
const rotated = piece[0].map((_, index) => piece.map(row => row[index])).reverse();
return rotated;
}
// به روزرسانی بازی
function update() {
if (dropTime >= dropInterval) {
pieceDrop();
dropTime = 0;
}
draw();
dropTime++;
requestAnimationFrame(update);
}
// بارگذاری بلوک جدید
function newPiece() {
piece = randomPiece();
if (collide(board, piece, { x: 4, y: 0 })) {
alert('بازی تمام شد!');
board = Array.from({ length: 20 }, () => Array(10).fill(0));
score = 0;
scoreElement.innerText = 'امتیاز: 0';
}
}
// حرکت به پایین
function pieceDrop() {
if (!collide(board, piece, { x: 0, y: 1 })) {
merge(board, piece, { x: 0, y: 1 });
} else {
merge(board, piece, { x: 0, y: 0 });
removeLines();
newPiece();
}
}
// رسم بازی
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
board.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
context.fillStyle = 'white';
context.fillRect(x, y, 1, 1);
}
});
});
piece.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
context.fillStyle = 'red';
context.fillRect(x + 4, y, 1, 1); // بلوک در وسط
}
});
});
}
// کنترل بازی
document.addEventListener('keydown', event => {
if (event.key === 'ArrowLeft') {
if (!collide(board, piece, { x: -1, y: 0 })) {
piece = merge(board, piece, { x: -1, y: 0 });
}
} else if (event.key === 'ArrowRight') {
if (!collide(board, piece, { x: 1, y: 0 })) {
piece = merge(board, piece, { x: 1, y: 0 });
}
} else if (event.key === 'ArrowDown') {
pieceDrop();
} else if (event.key === 'ArrowUp') {
const rotated = rotate(piece);
if (!collide(board, rotated, { x: 0, y: 0 })) {
piece = rotated;
}
}
});
// شروع بازی
newPiece();
update();
```
### توضیحات کد
1. **تنظیمات بازی**:
- یک canvas برای نمایش بازی ایجاد شده است.
- برد بازی به صورت ۲ بعدی تعریف شده است.
2. **بلوکی‌ها**:
- بلوک‌های مختلف (I، T، O، S، Z) به صورت آرایه‌ای تعریف شده‌اند.
- یک تابع برای انتخاب بلوک تصادفی وجود دارد.
3. **برخورد و ادغام**:
- تابع‌هایی برای بررسی برخورد بلوک‌ها و ادغام آن‌ها با برد بازی تعریف شده‌اند.
4. **حذف ردیف‌های کامل**:
- تابعی برای بررسی و حذف ردیف‌های کامل از برد بازی تعریف شده است.
5. **چرخش بلوک**:
- یک تابع برای چرخش بلوک‌ها نوشته شده است.
6. **بروزرسانی بازی**:
- تابعی برای به روزرسانی وضعیت بازی و رسم برد و بلوک‌ها تعریف شده است.
7. **کنترل بازی**:
- ورودی‌های کاربر برای کنترل بلوک‌ها (چپ، راست، پایین و چرخش) مدیریت می‌شود.
### نحوه اجرای پروژه
1. فایل‌های `index.html`، `style.css` و `script.js` را در یک پوشه ذخیره کنید.
2. فایل `index.html` را در مرورگر باز کنید تا بازی تتریس اجرا شود.
### نتیجه‌گیری
این پروژه بازی تتریس به شما کمک می‌کند تا با مفاهیم پایه توسعه بازی و برنامه‌نویسی JavaScript آشنا شوید. شما میتوانید با افزودن ویژگی‌های بیشتری مانند سطوح مختلف، صداها و انیمیشن‌ها، و
سیستم امتیازدهی پیچیدگی بازی را افزایش دهید.
| صفحه قابل مشاهده:
دانلود پروژه بازی تتریس با استفاده از **JavaScript** می‌باشد
