کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### بازی 2048 با استفاده از JavaScript و کد منبع
بازی 2048 یک بازی پازلی است که در آن هدف شما ترکیب اعداد مشابه برای رسیدن به عدد 2048 است. این پروژه شامل یک نسخه ساده از بازی 2048 با استفاده از JavaScript، HTML و CSS است.
#### ویژگی‌ها و عملکرد سیستم:
1. **میدان بازی**: یک شبکه 4x4 که در آن اعداد قرار می‌گیرند.
2. **کنترل با صفحه‌کلید**: کاربر می‌تواند با استفاده از کلیدهای جهت‌دار اعداد را حرکت دهد.
3. **ترکیب اعداد**: وقتی دو عدد مشابه با هم ترکیب شوند، عدد بزرگ‌تری ایجاد می‌شود.
4. **امتیازدهی**: هر بار که دو عدد ترکیب می‌شوند، امتیاز کاربر افزایش می‌یابد.
5. **پایان بازی**: زمانی که دیگر حرکتی وجود نداشته باشد، بازی تمام می‌شود.
#### ساختار پروژه
```
2048-game/
│
├── index.html # فایل اصلی HTML
├── style.css # فایل CSS برای استایل‌دهی
└── script.js # فایل JavaScript برای عملکرد بازی
```
#### مراحل پیاده‌سازی
##### 1. فایل `index.html`
```html
بازی 2048
```
##### 2. فایل `style.css`
```css
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #faf8ef;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
text-align: center;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.cell {
width: 100px;
height: 100px;
background-color: #eee4da;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.cell-2 { background-color: #eee4da; }
.cell-4 { background-color: #ede0c8; }
.cell-8 { background-color: #f2b179; }
.cell-16 { background-color: #f59563; }
.cell-32 { background-color: #f67c5f; }
.cell-64 { background-color: #f67c5f; }
.cell-128 { background-color: #f9e55c; }
.cell-256 { background-color: #f9c74f; }
.cell-512 { background-color: #f8b400; }
.cell-1024 { background-color: #f9c74f; }
.cell-2048 { background-color: #f9b400; }
button {
margin-top: 20px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
}
button:hover {
background-color: #218838;
}
```
##### 3. فایل `script.js`
```javascript
// script.js
const gridContainer = document.getElementById("grid");
const scoreDisplay = document.getElementById("score");
const restartButton = document.getElementById("restart");
let grid = [];
let score = 0;
// ایجاد شبکه بازی
function setupGrid() {
grid = [];
score = 0;
scoreDisplay.innerText = score;
for (let i = 0; i < 4; i++) {
grid[i] = [];
for (let j = 0; j < 4; j++) {
grid[i][j] = 0;
}
}
addRandomTile();
addRandomTile();
drawGrid();
}
// افزودن یک کاشی تصادفی
function addRandomTile() {
const emptyTiles = [];
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (grid[i][j] === 0) {
emptyTiles.push({ x: i, y: j });
}
}
}
if (emptyTiles.length > 0) {
const { x, y } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
grid[x][y] = Math.random() < 0.9 ? 2 : 4;
}
}
// رسم شبکه بازی
function drawGrid() {
gridContainer.innerHTML = "";
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const cell = document.createElement("div");
cell.classList.add("cell");
if (grid[i][j] !== 0) {
cell.classList.add("cell-" + grid[i][j]);
cell.innerText = grid[i][j];
}
gridContainer.appendChild(cell);
}
}
}
// مدیریت حرکات با صفحه‌کلید
function handleKeyPress(event) {
switch (event.key) {
case "ArrowUp":
moveUp();
break;
case "ArrowDown":
moveDown();
break;
case "ArrowLeft":
moveLeft();
break;
case "ArrowRight":
moveRight();
break;
}
}
// حرکت به بالا
function moveUp() {
for (let j = 0; j < 4; j++) {
let combined = [];
for (let i = 1; i < 4; i++) {
if (grid[i][j] !== 0) {
let current = grid[i][j];
let targetIndex = i;
while (targetIndex > 0 && grid[targetIndex - 1][j] === 0) {
targetIndex--;
}
if (targetIndex > 0 && grid[targetIndex - 1][j] === current && !combined.includes(targetIndex - 1)) {
grid[targetIndex - 1][j] *= 2;
score += grid[targetIndex - 1][j];
combined.push(targetIndex - 1);
grid[i][j] = 0;
} else if (targetIndex !== i) {
grid[targetIndex][j] = current;
grid[i][j] = 0;
}
}
}
}
addRandomTile();
drawGrid();
}
// حرکت به پایین
function moveDown() {
for (let j = 0; j < 4; j++) {
let combined = [];
for (let i = 2; i >= 0; i--) {
if (grid[i][j] !== 0) {
let current = grid[i][j];
let targetIndex = i;
while (targetIndex < 3 && grid[targetIndex + 1][j] === 0) {
targetIndex++;
}
if (targetIndex < 3 && grid[targetIndex + 1][j] === current && !combined.includes(targetIndex + 1)) {
grid[targetIndex + 1][j] *= 2;
score += grid[targetIndex + 1][j];
combined.push(targetIndex + 1);
grid[i][j] = 0;
} else if (targetIndex !== i) {
grid[targetIndex][j] = current;
grid[i][j] = 0;
}
}
}
}
addRandomTile();
drawGrid();
}
// حرکت به چپ
function moveLeft() {
for (let i = 0; i < 4; i++) {
let combined = [];
for (let j = 1; j < 4; j++) {
if (grid[i][j] !== 0) {
let current = grid[i][j];
let targetIndex = j;
while (targetIndex > 0 && grid[i][targetIndex - 1] === 0) {
targetIndex--;
}
if (targetIndex > 0 && grid[i][targetIndex - 1] === current && !combined.includes(targetIndex - 1)) {
grid[i][targetIndex - 1] *= 2;
score += grid[i][targetIndex - 1];
combined.push(targetIndex - 1);
grid[i][j] =
0;
} else if (targetIndex !== j) {
grid[i][targetIndex] = current;
grid[i][j] = 0;
}
}
}
}
addRandomTile();
drawGrid();
}
// حرکت به راست
function moveRight() {
for (let i = 0; i < 4; i++) {
let combined = [];
for (let j = 2; j >= 0; j--) {
if (grid[i][j] !== 0) {
let current = grid[i][j];
let targetIndex = j;
while (targetIndex < 3 && grid[i][targetIndex + 1] === 0) {
targetIndex++;
}
if (targetIndex < 3 && grid[i][targetIndex + 1] === current && !combined.includes(targetIndex + 1)) {
grid[i][targetIndex + 1] *= 2;
score += grid[i][targetIndex + 1];
combined.push(targetIndex + 1);
grid[i][j] = 0;
} else if (targetIndex !== j) {
grid[i][targetIndex] = current;
grid[i][j] = 0;
}
}
}
}
addRandomTile();
drawGrid();
}
// بازنشانی بازی
function resetGame() {
setupGrid();
}
// راه‌اندازی بازی اولیه
setupGrid();
document.addEventListener("keydown", handleKeyPress);
restartButton.addEventListener("click", resetGame);
```
### نحوه راه‌اندازی پروژه
1. **ایجاد پروژه**: یک پوشه جدید به نام `2048-game` بسازید و در آن فایل‌های `index.html`، `style.css` و `script.js` را ایجاد کنید.
2. **کپی کردن کدها**: کدهای ارائه شده برای هر فایل را در فایل‌های مربوطه کپی کنید.
3. **اجرا در مرورگر**: فایل `index.html` را در یک مرورگر وب باز کنید.
### نتیجه‌گیری
این پروژه بازی 2048 به شما امکان می‌دهد با مفاهیم اولیه JavaScript، HTML و CSS آشنا شوید. میتوانید این پروژه را بهبود دهید و ویژگی‌های جدیدی مانند ذخیره بازی، سطوح مختلف و یا انیمیشن‌های بیشتر را اضافه کنید. این یک پروژه عالی برای تمرین و یادگیری است!
| صفحه قابل مشاهده:
دانلود پروژه بازی 2048 با استفاده از JavaScript و کد منبع می‌باشد
