کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **2048** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به شما اجازه می‌دهد که بلوک‌ها را با هم ترکیب کنید تا به عدد 2048 برسید.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی 2048 ایجاد می‌کنیم.
```html
بازی 2048
```
### 2. **CSS**
برای طراحی ظاهری بازی 2048 از 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;
}
.game-container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: #cdc1b4;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
color: #776e65;
}
.cell.empty {
background-color: #eee4da;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
document.addEventListener('DOMContentLoaded', () => {
const gridDisplay = document.querySelector('#game-container');
const width = 4;
let squares = [];
let score = 0;
// ایجاد برد 4x4
function createBoard() {
for (let i = 0; i < width * width; i++) {
const square = document.createElement('div');
square.classList.add('cell', 'empty');
square.innerHTML = '';
gridDisplay.appendChild(square);
squares.push(square);
}
generateNumber();
generateNumber();
}
// تولید یک عدد جدید (2 یا 4)
function generateNumber() {
let randomNumber = Math.floor(Math.random() * squares.length);
if (squares[randomNumber].innerHTML == '') {
squares[randomNumber].innerHTML = 2;
squares[randomNumber].classList.remove('empty');
checkForGameOver();
} else {
generateNumber();
}
}
// حرکت به سمت راست
function moveRight() {
for (let i = 0; i < 16; i++) {
if (i % 4 === 0) {
let totalOne = squares[i].innerHTML;
let totalTwo = squares[i + 1].innerHTML;
let totalThree = squares[i + 2].innerHTML;
let totalFour = squares[i + 3].innerHTML;
let row = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)];
let filteredRow = row.filter(num => num);
let missing = 4 - filteredRow.length;
let zeros = Array(missing).fill('');
let newRow = zeros.concat(filteredRow);
squares[i].innerHTML = newRow[0];
squares[i + 1].innerHTML = newRow[1];
squares[i + 2].innerHTML = newRow[2];
squares[i + 3].innerHTML = newRow[3];
}
}
}
// حرکت به سمت چپ
function moveLeft() {
for (let i = 0; i < 16; i++) {
if (i % 4 === 0) {
let totalOne = squares[i].innerHTML;
let totalTwo = squares[i + 1].innerHTML;
let totalThree = squares[i + 2].innerHTML;
let totalFour = squares[i + 3].innerHTML;
let row = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)];
let filteredRow = row.filter(num => num);
let missing = 4 - filteredRow.length;
let zeros = Array(missing).fill('');
let newRow = filteredRow.concat(zeros);
squares[i].innerHTML = newRow[0];
squares[i + 1].innerHTML = newRow[1];
squares[i + 2].innerHTML = newRow[2];
squares[i + 3].innerHTML = newRow[3];
}
}
}
// ترکیب کردن اعداد مشابه در ردیف
function combineRow() {
for (let i = 0; i < 15; i++) {
if (squares[i].innerHTML === squares[i + 1].innerHTML) {
let combinedTotal = parseInt(squares[i].innerHTML) + parseInt(squares[i + 1].innerHTML);
squares[i].innerHTML = combinedTotal;
squares[i + 1].innerHTML = '';
score += combinedTotal;
}
}
}
// کنترل کلیدهای جهت
function control(e) {
if (e.keyCode === 39) {
keyRight();
} else if (e.keyCode === 37) {
keyLeft();
}
}
document.addEventListener('keyup', control);
function keyRight() {
moveRight();
combineRow();
moveRight();
generateNumber();
}
function keyLeft() {
moveLeft();
combineRow();
moveLeft();
generateNumber();
}
// چک کردن برای اتمام بازی
function checkForGameOver() {
let emptyCells = squares.filter(square => square.innerHTML == '');
if (emptyCells.length === 0) {
alert('بازی تمام شد! امتیاز شما: ' + score);
}
}
createBoard();
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان، برد بازی و دکمه شروع بازی جدید است.
2. **CSS**: طراحی برای برد بازی و سلول‌ها.
3. **JavaScript**:
- **ایجاد برد**: ایجاد یک جدول 4x4 و تولید دو عدد اولیه.
- **تولید عدد جدید**: عدد 2 یا 4 را در یک سلول خالی قرار می‌دهد.
- **حرکت‌ها**: قابلیت حرکت به چپ و راست برای ترکیب اعداد مشابه.
- **ترکیب اعداد**: ترکیب اعداد مشابه در یک ردیف.
- **کنترل کلیدها**: جهت‌دهی به بازی با استفاده از کلیدهای جهت.
- **چک کردن اتمام بازی**: بررسی اینکه دیگر حرکتی باقی نمانده است.
### نتیجه‌گیری
این پروژه **بازی 2048** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادها و منطق بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند انیمیشن‌ها یا ذخیره‌سازی امتیاز اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی **2048** با استفاده از HTML، CSS و JavaScript می‌باشد
