کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **تتریس ساده (Simple Tetris)** با استفاده از JavaScript و Canvas
این پروژه یک بازی تتریس ساده است که با استفاده از HTML، CSS و JavaScript ساخته شده است. در این بازی، بازیکن باید بلوک‌ها را به درستی در زمین بازی قرار دهد تا خطوط کامل را تشکیل دهد و امتیاز کسب کند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی تتریس ایجاد می‌کنیم.
```html
تتريـس
```
### 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;
background-color: #eaeaea;
}
button {
padding: 10px 15px;
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: 20px;
font-weight: bold;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر HTML
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
const startBtn = document.getElementById('startBtn');
const scoreDisplay = document.getElementById('score');
const grid = 30; // اندازه هر بلاک
const rows = canvas.height / grid;
const columns = canvas.width / grid;
// متغیرهای بازی
let board = Array.from({ length: rows }, () => Array(columns).fill(0));
let score = 0;
let gameInterval;
// اشکال تتریس
const pieces = [
[[1, 1, 1, 1]], // I
[[1, 1], [1, 1]], // O
[[0, 1, 0], [1, 1, 1]], // T
[[1, 1, 0], [0, 1, 1]], // Z
[[0, 1, 1], [1, 1, 0]], // S
[[1, 1, 1], [1, 0, 0]], // L
[[1, 1, 1], [0, 0, 1]], // J
];
let currentPiece;
let currentPosition;
// شروع بازی
startBtn.addEventListener('click', startGame);
function startGame() {
board = Array.from({ length: rows }, () => Array(columns).fill(0));
score = 0;
scoreDisplay.textContent = `امتیاز: ${score}`;
clearInterval(gameInterval);
spawnPiece();
gameInterval = setInterval(update, 1000);
}
// ایجاد شکل جدید
function spawnPiece() {
const randomIndex = Math.floor(Math.random() * pieces.length);
currentPiece = pieces[randomIndex];
currentPosition = { x: Math.floor(columns / 2) - 1, y: 0 };
if (collision()) {
clearInterval(gameInterval);
alert('بازی تمام شد!');
}
}
// بروزرسانی بازی
function update() {
if (!movePiece(0, 1)) {
fixPiece();
clearLines();
spawnPiece();
}
draw();
}
// رسم بازی
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBoard();
drawPiece();
}
// رسم تخته
function drawBoard() {
for (let y = 0; y < rows; y++) {
for (let x = 0; x < columns; x++) {
if (board[y][x] !== 0) {
context.fillStyle = '#333';
context.fillRect(x * grid, y * grid, grid, grid);
}
}
}
}
// رسم شکل
function drawPiece() {
currentPiece.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle = '#28a745';
context.fillRect((currentPosition.x + x) * grid, (currentPosition.y + y) * grid, grid, grid);
}
});
});
}
// حرکت شکل
function movePiece(dx, dy) {
currentPosition.x += dx;
currentPosition.y += dy;
if (collision()) {
currentPosition.x -= dx;
currentPosition.y -= dy;
return false;
}
return true;
}
// بررسی برخورد
function collision() {
return currentPiece.some((row, y) => {
return row.some((value, x) => {
if (value === 0) return false;
const newX = currentPosition.x + x;
const newY = currentPosition.y + y;
return newX < 0 || newX >= columns || newY >= rows || board[newY] && board[newY][newX] !== 0;
});
});
}
// ثابت کردن شکل
function fixPiece() {
currentPiece.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
board[currentPosition.y + y][currentPosition.x + x] = value;
}
});
});
}
// پاک کردن خطوط کامل
function clearLines() {
let lines = 0;
for (let y = rows - 1; y >= 0; y--) {
if (board[y].every(value => value !== 0)) {
board.splice(y, 1);
board.unshift(Array(columns).fill(0));
lines++;
}
}
score += lines * 100;
scoreDisplay.textContent = `امتیاز: ${score}`;
}
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی، یک کانواس برای نمایش بازی، دکمه شروع بازی و بخشی برای نمایش امتیاز است.
2. **CSS**:
- طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **تابع `startGame`**: بازی را راه‌اندازی می‌کند و تخته را پاک می‌کند.
- **تابع `spawnPiece`**: یک شکل تصادفی از اشکال تتریس را ایجاد می‌کند.
- **تابع `update`**: وضعیت بازی را بروزرسانی می‌کند و شکل‌ها را جابجا می‌کند.
- **تابع `draw`**: تخته و شکل فعلی را روی کانواس رسم می‌کند.
- **تابع `collision`**: بررسی می‌کند که آیا شکل فعلی با دیوارها یا اشکال دیگر برخورد کرده است.
- **تابع `fixPiece`**: شکل را در تخته ثابت می‌کند.
- **تابع `clearLines`**: خطوط کامل را پاک می‌کند و امتیاز را بروزرسانی می‌کند.
### نتیجه‌گیری
این پروژه **بازی تتریس** یک مثال جالب از نحوه استفاده از JavaScript و Canvas برای ایجاد یک بازی ساده است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند سطوح مختلف یا تغییرات در سرعت بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **تتریس ساده (Simple Tetris)** با استفاده از JavaScript و Canvas می‌باشد
