کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **Tetris** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی کلاسیک به بازیکنان این امکان را می‌دهد تا اشکال مختلف را بچرخانند و در پایین صفحه قرار دهند تا خطوط کامل را تشکیل دهند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Tetris ایجاد می‌کنیم.
```html
بازی تتریس
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #faf8ef;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
#gameArea {
margin: 20px auto;
}
canvas {
border: 1px solid #000;
background-color: #fff;
}
.status {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل منطق بازی، رسم اشکال و مدیریت حرکات است.
```javascript
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');
const grid = 20; // اندازه هر مربع
let score = 0;
let gameOver = false;
let tetrominoes = [
[[1, 1, 1], [0, 1, 0]], // شکل T
[[1, 1], [1, 1]], // شکل O
[[1, 1, 0], [0, 1, 1]], // شکل Z
[[0, 1, 1], [1, 1, 0]], // شکل S
[[1, 1, 1, 1]], // شکل I
[[1, 1, 1], [1, 0, 0]], // شکل L
[[1, 1, 1], [0, 0, 1]], // شکل J
];
let currentTetromino;
let currentPosition = { x: 0, y: 0 };
function initGame() {
score = 0;
scoreDisplay.innerHTML = `امتیاز: ${score}`;
gameOver = false;
context.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
spawnTetromino();
drawTetromino();
update();
}
function drawGrid() {
context.fillStyle = '#faf8ef';
for (let y = 0; y < canvas.height / grid; y++) {
for (let x = 0; x < canvas.width / grid; x++) {
context.strokeRect(x * grid, y * grid, grid, grid);
}
}
}
function spawnTetromino() {
const index = Math.floor(Math.random() * tetrominoes.length);
currentTetromino = tetrominoes[index];
currentPosition = { x: Math.floor(canvas.width / grid / 2) - 1, y: 0 };
}
function drawTetromino() {
context.fillStyle = '#FF5733'; // رنگ تترومینو
currentTetromino.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
context.fillRect((currentPosition.x + x) * grid, (currentPosition.y + y) * grid, grid, grid);
}
});
});
}
function moveDown() {
if (!gameOver) {
currentPosition.y++;
if (collision()) {
currentPosition.y--;
merge();
clearLines();
spawnTetromino();
if (collision()) {
gameOver = true;
alert('بازی به پایان رسید! امتیاز شما: ' + score);
}
}
draw();
}
}
function collision() {
return currentTetromino.some((row, y) => {
return row.some((value, x) => {
if (value) {
const newX = currentPosition.x + x;
const newY = currentPosition.y + y;
return newX < 0 || newX >= canvas.width / grid || newY >= canvas.height / grid || (newY >= 0 && context.getImageData(newX * grid, newY * grid, 1, 1).data[0] !== 255);
}
return false;
});
});
}
function merge() {
currentTetromino.forEach((row, y) => {
row.forEach((value, x) => {
if (value) {
const newX = currentPosition.x + x;
const newY = currentPosition.y + y;
context.fillStyle = '#FF5733';
context.fillRect(newX * grid, newY * grid, grid, grid);
}
});
});
}
function clearLines() {
for (let y = canvas.height / grid - 1; y >= 0; y--) {
let filled = true;
for (let x = 0; x < canvas.width / grid; x++) {
if (context.getImageData(x * grid, y * grid, 1, 1).data[0] === 255) {
filled = false;
break;
}
}
if (filled) {
score += 10;
scoreDisplay.innerHTML = `امتیاز: ${score}`;
context.clearRect(0, y * grid, canvas.width, grid);
const imgData = context.getImageData(0, 0, canvas.width, y * grid);
context.clearRect(0, 0, canvas.width, y * grid);
context.putImageData(imgData, 0, grid);
y++; // بررسی مجدد خطی که پایین آمده
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
merge();
drawTetromino();
}
function update() {
if (!gameOver) {
moveDown();
setTimeout(update, 1000);
}
}
restartBtn.addEventListener('click', initGame);
initGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، ناحیه بازی و نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **ایجاد بازی**: تابع `initGame` بازی را تنظیم و تترومینو جدید ایجاد می‌کند.
- **ایجاد تترومینو**: تابع `spawnTetromino` برای انتخاب و تولید تترومینو جدید.
- **رسم تترومینو**: تابع `drawTetromino` برای رسم تترومینو در صفحه.
- **حرکت تترومینو**: تابع `moveDown` برای حرکت تترومینو به پایین و بررسی برخوردها.
- **برخورد**: تابع `collision` برای بررسی برخورد تترومینو با دیوارها و تترومینوهای دیگر.
- **ادغام**: تابع `merge` برای ادغام تترومینو با تترومینوهای ثابت.
- **پاک کردن خطوط**: تابع `clearLines` برای بررسی و پاک کردن خطوط پر شده.
- **بروزرسانی**: تابع `update` برای بروزرسانی وضعیت بازی و حرکت تترومینو.
### نتیجه‌گیری
این پروژه **بازی تتریس** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند مدیریت Canvas و رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تنظیمات بازی، سطح دشواری و یا انیمیشن‌های جذاب اضافه کنید. از کدنویسی لذت ببرید!
