کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی تتریس (Tetris)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به کاربران اجازه می‌دهد تا بلوک‌های مختلف را بچرخانند و در کنار هم قرار دهند تا خطوط را پر کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
```html
بازی تتریس
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهر بازی استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
canvas {
border: 1px solid #000;
}
.controls {
margin-top: 10px;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم.
```javascript
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
context.scale(20, 20); // مقیاس به اندازه 20px برای هر بلوک
// تعریف بلوک‌ها
const tetrominoes = [
[[1, 1, 1, 1]], // I
[[1, 1, 1], [0, 1, 0]], // T
[[1, 1, 0], [0, 1, 1]], // Z
[[0, 1, 1], [1, 1, 0]], // S
[[1, 1], [1, 1]], // O
[[1, 0, 0], [1, 1, 1]], // L
[[0, 0, 1], [1, 1, 1]] // J
];
let board = Array.from({ length: 20 }, () => Array(12).fill(0));
let score = 0;
let currentTetromino;
let position;
// شروع بازی
function startGame() {
board = Array.from({ length: 20 }, () => Array(12).fill(0));
score = 0;
document.getElementById('score').innerText = `امتیاز: ${score}`;
spawnTetromino();
draw();
setInterval(update, 1000); // به‌روزرسانی هر ثانیه
}
// تولید بلوک جدید
function spawnTetromino() {
const randomIndex = Math.floor(Math.random() * tetrominoes.length);
currentTetromino = tetrominoes[randomIndex];
position = { x: 4, y: 0 }; // موقعیت شروع
}
// رسم بازی
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height); // پاک کردن کانواس
drawBoard();
drawTetromino();
}
// رسم تخته بازی
function drawBoard() {
for (let y = 0; y < board.length; y++) {
for (let x = 0; x < board[y].length; x++) {
if (board[y][x]) {
context.fillStyle = 'blue';
context.fillRect(x, y, 1, 1);
}
}
}
}
// رسم بلوک فعلی
function drawTetromino() {
currentTetromino.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
context.fillStyle = 'red';
context.fillRect(position.x + x, position.y + y, 1, 1);
}
});
});
}
// به‌روزرسانی وضعیت بازی
function update() {
if (!move(0, 1)) {
merge();
clearLines();
spawnTetromino();
}
draw();
}
// حرکت بلوک
function move(dx, dy) {
position.x += dx;
position.y += dy;
if (collision()) {
position.x -= dx;
position.y -= dy;
return false;
}
return true;
}
// بررسی برخورد
function collision() {
for (let y = 0; y < currentTetromino.length; y++) {
for (let x = 0; x < currentTetromino[y].length; x++) {
if (currentTetromino[y][x]) {
const newX = position.x + x;
const newY = position.y + y;
if (newX < 0 || newX >= 12 || newY >= 20 || board[newY][newX]) {
return true;
}
}
}
}
return false;
}
// ادغام بلوک با تخته
function merge() {
currentTetromino.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
board[position.y + y][position.x + x] = 1;
}
});
});
}
// پاک کردن خطوط کامل
function clearLines() {
for (let y = board.length - 1; y >= 0; y--) {
if (board[y].every(value => value)) {
board.splice(y, 1);
board.unshift(Array(12).fill(0));
score++;
document.getElementById('score').innerText = `امتیاز: ${score}`;
y++; // بررسی دوباره برای خط‌های بالای آن
}
}
}
// رویداد کلیک برای شروع بازی
document.getElementById('startBtn').addEventListener('click', startGame);
```
### توضیحات کد:
1. **HTML**: شامل یک بوم `
2. **CSS**: طراحی صفحه با استفاده از رنگ‌ها و حاشیه‌ها برای زیبایی.
3. **JavaScript**:
- **تعریف بلوک‌ها**: بلوک‌های مختلف تتریس به صورت آرایه‌های دوبعدی تعریف می‌شوند.
- **تابع `startGame`**: بازی را با تنظیم مجدد تخته و امتیاز شروع می‌کند و بلوک جدیدی را تولید می‌کند.
- **تابع `spawnTetromino`**: یک بلوک جدید به صورت تصادفی تولید می‌کند.
- **تابع `draw`**: تخته بازی و بلوک فعلی را رسم می‌کند.
- **تابع `update`**: وضعیت بازی را به‌روز می‌کند و بررسی می‌کند که آیا بلوک به پایین افتاده یا خیر.
- **حرکت و برخورد**: تابع‌های `move` و `collision` برای مدیریت حرکت بلوک و بررسی برخورد با مرزها و بلوک‌های دیگر استفاده می‌شوند.
- **ادغام و پاک کردن خطوط**: تابع‌های `merge` و `clearLines` برای ادغام بلوک با تخته و پاک کردن خطوط کامل استفاده می‌شوند.
### نتیجه‌گیری
این بازی تتریس یک پروژه جذاب و آموزشی برای یادگیری JavaScript و کار با canvas در وب است. شما میتوانید ویژگی‌های بیشتری مانند چرخش بلوک‌ها، افزایش سرعت بازی، و نمره‌دهی به کاربر را به این پروژه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی تتریس (Tetris)** با استفاده از HTML، CSS و JavaScript می‌باشد
