کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی زندگی کانوی (Conway's Game of Life) در JavaScript**
بازی زندگی کانوی یک شبیه‌سازی سلولی است که توسط ریاضیدان انگلیسی جان کانوی در سال 1970 ایجاد شده است. این بازی یک سیستم بدون بازیکن است که بر اساس یک مجموعه از قوانین ساده، تعاملات بین سلول‌ها را شبیه‌سازی می‌کند. سلول‌ها می‌توانند "زنده" یا "مرده" باشند و وضعیت آن‌ها در هر نسل به وضعیت سلول‌های همسایه‌شان بستگی دارد.
### 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 {
text-align: center;
}
#grid {
display: grid;
grid-template-columns: repeat(20, 20px);
grid-template-rows: repeat(20, 20px);
gap: 1px;
margin: 20px auto;
}
.cell {
width: 20px;
height: 20px;
background-color: #eee;
border: 1px solid #ccc;
cursor: pointer;
}
.cell.alive {
background-color: #28a745;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const rows = 20;
const cols = 20;
let grid = [];
let interval;
const gridElement = document.getElementById('grid');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const clearBtn = document.getElementById('clearBtn');
// تابع برای ایجاد شبکه
function createGrid() {
for (let row = 0; row < rows; row++) {
grid[row] = [];
for (let col = 0; col < cols; col++) {
grid[row][col] = 0; // همه سلول‌ها مرده هستند
const cellElement = document.createElement('div');
cellElement.classList.add('cell');
cellElement.addEventListener('click', () => toggleCell(row, col, cellElement));
gridElement.appendChild(cellElement);
}
}
}
// تابع برای تغییر وضعیت سلول
function toggleCell(row, col, cellElement) {
grid[row][col] = grid[row][col] === 0 ? 1 : 0; // تغییر وضعیت سلول
cellElement.classList.toggle('alive'); // تغییر کلاس CSS
}
// تابع برای محاسبه نسل بعدی
function nextGeneration() {
const newGrid = grid.map(arr => arr.slice());
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const aliveNeighbors = countAliveNeighbors(row, col);
if (grid[row][col] === 1) {
// زنده بودن
if (aliveNeighbors < 2 || aliveNeighbors > 3) {
newGrid[row][col] = 0; // می‌میرد
}
} else {
// مرده بودن
if (aliveNeighbors === 3) {
newGrid[row][col] = 1; // زنده می‌شود
}
}
}
}
grid = newGrid;
updateGridDisplay();
}
// تابع برای شمارش همسایه‌های زنده
function countAliveNeighbors(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (i === 0 && j === 0) continue; // نادیده گرفتن خود سلول
const newRow = row + i;
const newCol = col + j;
if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols) {
count += grid[newRow][newCol];
}
}
}
return count;
}
// تابع برای به‌روزرسانی نمایش شبکه
function updateGridDisplay() {
const cells = document.querySelectorAll('.cell');
cells.forEach((cell, index) => {
const row = Math.floor(index / cols);
const col = index % cols;
cell.classList.toggle('alive', grid[row][col] === 1);
});
}
// راه‌اندازی رویدادها
startBtn.addEventListener('click', () => {
if (!interval) {
interval = setInterval(nextGeneration, 100); // شروع نسل‌ها
}
});
stopBtn.addEventListener('click', () => {
clearInterval(interval); // متوقف کردن نسل‌ها
interval = null;
});
clearBtn.addEventListener('click', () => {
grid = grid.map(row => row.map(() => 0)); // پاک کردن شبکه
updateGridDisplay();
});
// ایجاد شبکه
createGrid();
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی، شبکه‌ای برای نمایش سلول‌ها و دکمه‌های شروع، توقف و پاک کردن است.
2. **CSS**:
- طراحی ساده برای شبکه سلول‌ها با استایل‌های مختلف برای سلول‌های زنده و مرده.
3. **JavaScript**:
- **ایجاد شبکه**: ایجاد یک آرایه دو بعدی برای ذخیره وضعیت سلول‌ها و نمایش آن‌ها.
- **تغییر وضعیت سلول**: امکان کلیک بر روی سلول‌ها برای تغییر وضعیت آن‌ها (زنده/مرده).
- **محاسبه نسل بعدی**: اعمال قوانین بازی زندگی کانوی برای محاسبه وضعیت نسل بعدی.
- **شمارش همسایه‌های زنده**: شمارش تعداد سلول‌های زنده در اطراف یک سلول.
- **به‌روزرسانی نمایش شبکه**: به‌روزرسانی وضعیت نمایش سلول‌ها بر اساس وضعیت جدید.
- **رویدادها**: راه‌اندازی رویداد برای دکمه‌ها برای شروع، توقف و پاک کردن بازی.
### نتیجه‌گیری
این پروژه **بازی زندگی کانوی** یک مثال عالی برای درک مفاهیم جاوا اسکریپت، کار با DOM و شبیه‌سازی سیستم‌های پیچیده است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تنظیمات برای اندازه شبکه، سرعت بازی، و امکان ذخیره و بارگذاری وضعیت‌های مختلف را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی زندگی کانوی (Conway's Game of Life) در JavaScript** می‌باشد
