کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **2048** با استفاده از HTML، CSS و JavaScript ارائه شده است. بازی 2048 یک بازی پازلی است که هدف آن ترکیب کاشی‌های هم‌عدد برای رسیدن به کاشی 2048 است.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی 2048 ایجاد می‌کنیم.
```html
بازی 2048
```
### 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;
}
#gameContainer {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
}
.tile {
width: 100px;
height: 100px;
background-color: #eee4da;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
color: #776e65;
border-radius: 5px;
}
.tile-2 { background-color: #ede0c8; }
.tile-4 { background-color: #f2b179; }
.tile-8 { background-color: #f59563; }
.tile-16 { background-color: #f67c5f; }
.tile-32 { background-color: #f67c5f; }
.tile-64 { background-color: #f67c5f; }
.tile-128 { background-color: #edcf72; }
.tile-256 { background-color: #edcc61; }
.tile-512 { background-color: #edc850; }
.tile-1024 { background-color: #edc53f; }
.tile-2048 { background-color: #edc22e; }
.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 gameContainer = document.getElementById('gameContainer');
const scoreDisplay = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');
let board = [];
let score = 0;
function initGame() {
board = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
score = 0;
scoreDisplay.innerHTML = `امتیاز: ${score}`;
addNewTile();
addNewTile();
drawBoard();
}
function addNewTile() {
const emptyTiles = [];
for (let r = 0; r < 4; r++) {
for (let c = 0; c < 4; c++) {
if (board[r][c] === 0) {
emptyTiles.push({ r, c });
}
}
}
const { r, c } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
board[r][c] = Math.random() < 0.9 ? 2 : 4;
}
function drawBoard() {
gameContainer.innerHTML = '';
board.forEach(row => {
row.forEach(value => {
const tile = document.createElement('div');
tile.classList.add('tile');
if (value !== 0) {
tile.classList.add(`tile-${value}`);
tile.innerHTML = value;
}
gameContainer.appendChild(tile);
});
});
}
function slideLeft() {
let moved = false;
for (let r = 0; r < 4; r++) {
for (let c = 1; c < 4; c++) {
if (board[r][c] !== 0) {
for (let i = c; i > 0; i--) {
if (board[r][i - 1] === 0) {
board[r][i - 1] = board[r][i];
board[r][i] = 0;
moved = true;
} else if (board[r][i - 1] === board[r][i]) {
board[r][i - 1] *= 2;
score += board[r][i - 1];
board[r][i] = 0;
moved = true;
}
break;
}
}
}
}
return moved;
}
function slideRight() {
let moved = false;
for (let r = 0; r < 4; r++) {
for (let c = 2; c >= 0; c--) {
if (board[r][c] !== 0) {
for (let i = c; i < 3; i++) {
if (board[r][i + 1] === 0) {
board[r][i + 1] = board[r][i];
board[r][i] = 0;
moved = true;
} else if (board[r][i + 1] === board[r][i]) {
board[r][i + 1] *= 2;
score += board[r][i + 1];
board[r][i] = 0;
moved = true;
}
break;
}
}
}
}
return moved;
}
function slideUp() {
let moved = false;
for (let c = 0; c < 4; c++) {
for (let r = 1; r < 4; r++) {
if (board[r][c] !== 0) {
for (let i = r; i > 0; i--) {
if (board[i - 1][c] === 0) {
board[i - 1][c] = board[i][c];
board[i][c] = 0;
moved = true;
} else if (board[i - 1][c] === board[i][c]) {
board[i - 1][c] *= 2;
score += board[i - 1][c];
board[i][c] = 0;
moved = true;
}
break;
}
}
}
}
return moved;
}
function slideDown() {
let moved = false;
for (let c = 0; c < 4; c++) {
for (let r = 2; r >= 0; r--) {
if (board[r][c] !== 0) {
for (let i = r; i < 3; i++) {
if (board[i + 1][c] === 0) {
board[i + 1][c] = board[i][c];
board[i][c] = 0;
moved = true;
} else if (board[i + 1][c] === board[i][c]) {
board[i + 1][c] *= 2;
score += board[i + 1][c];
board[i][c] = 0;
moved = true;
}
break;
}
}
}
}
return moved;
}
function handleInput(event) {
let moved = false;
switch (event.key) {
case 'ArrowLeft':
moved = slideLeft();
break;
case 'ArrowRight':
moved = slideRight();
break;
case 'ArrowUp':
moved = slideUp();
break;
case 'ArrowDown':
moved = slideDown();
break;
}
if (moved) {
addNewTile();
drawBoard();
scoreDisplay.innerHTML = `امتیاز: ${score}`;
}
}
restartBtn.addEventListener('click', initGame);
document.addEventListener('keydown', handleInput);
initGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، بورد بازی و نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپس
ند.
3. **JavaScript**:
- **ایجاد بورد**: تابع `initGame` بورد بازی را ایجاد کرده و دو کاشی را اضافه می‌کند.
- **اضافه کردن کاشی جدید**: تابع `addNewTile` برای اضافه کردن کاشی جدید به بورد بازی.
- **کشیدن کاشی‌ها**: توابع `slideLeft`، `slideRight`، `slideUp` و `slideDown` برای مدیریت حرکات بازیکن و ترکیب کاشی‌ها.
- **مدیریت ورودی**: تابع `handleInput` برای شناسایی کلیدهای ورودی و انجام حرکت مناسب.
- **دکمه ریست**: بازنشانی بازی با استفاده از دکمه "شروع دوباره".
### نتیجه‌گیری
این پروژه **بازی 2048** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند مدیریت DOM و رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن امتیازدهی یا قابلیت‌های بیشتر برای بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی **2048** با استفاده از HTML، CSS و JavaScript می‌باشد
