کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه: بازی پازل ساده (Simple Puzzle Game) با استفاده از AngularJS و کد منبع
بازی **پازل ساده** یک پروژه جذاب و آموزشی است که با استفاده از **AngularJS** ساخته شده است. این بازی به کاربران اجازه می‌دهد تا با جابه‌جا کردن قطعات، تصویر را کامل کنند. این پروژه می‌تواند به عنوان یک ابزار یادگیری خوب برای درک AngularJS و توسعه وب مورد استفاده قرار گیرد.
### ویژگی‌های پروژه
1. **رابط کاربری ساده**: طراحی کاربرپسند که کاربران می‌توانند به راحتی با بازی تعامل داشته باشند.
2. **عملکرد جابه‌جایی قطعات**: کاربران می‌توانند با کلیک بر روی قطعات پازل، آن‌ها را جابه‌جا کنند.
3. **امتیازدهی و زمان**: امکان پیگیری زمان و امتیاز در طول بازی.
### ساختار پروژه
#### 1. فایل HTML (index.html)
```html
بازی پازل ساده
```
#### 2. فایل CSS (style.css)
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
margin-top: 50px;
}
.puzzle-container {
display: flex;
flex-wrap: wrap;
width: 400px;
margin: 0 auto;
}
.puzzle-piece {
width: 100px;
height: 100px;
margin: 1px;
cursor: pointer;
}
.puzzle-piece img {
width: 100%;
height: 100%;
border: 1px solid #333;
}
```
#### 3. فایل JavaScript (script.js)
```javascript
angular.module('puzzleApp', [])
.controller('PuzzleController', function($scope) {
$scope.pieces = [
{ src: 'img/piece1.jpg' },
{ src: 'img/piece2.jpg' },
{ src: 'img/piece3.jpg' },
{ src: 'img/piece4.jpg' },
{ src: 'img/piece5.jpg' },
{ src: 'img/piece6.jpg' },
{ src: 'img/piece7.jpg' },
{ src: 'img/piece8.jpg' },
{ src: 'img/empty.jpg' } // قطعه خالی
];
$scope.movePiece = function(index) {
// منطق جابه‌جایی قطعات
// بررسی جابه‌جایی به قطعه خالی و جابجایی
const emptyIndex = $scope.pieces.findIndex(piece => piece.src === 'img/empty.jpg');
if (isAdjacent(index, emptyIndex)) {
const temp = $scope.pieces[index];
$scope.pieces[index] = $scope.pieces[emptyIndex];
$scope.pieces[emptyIndex] = temp;
}
};
function isAdjacent(index1, index2) {
const row1 = Math.floor(index1 / 3);
const col1 = index1 % 3;
const row2 = Math.floor(index2 / 3);
const col2 = index2 % 3;
return (Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1);
}
$scope.resetPuzzle = function() {
$scope.pieces = shuffle($scope.pieces);
};
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
});
```
### توضیحات کد:
- **HTML**: شامل یک کنترلر AngularJS و ساختار پازل است.
- **CSS**: برای طراحی ساده و زیبا استفاده شده است.
- **JavaScript**: شامل منطق جابه‌جایی قطعات، بررسی جابه‌جایی مجاز، و بازنشانی بازی است.
### نحوه اجرای پروژه
1. **دانلود پروژه**: فایل‌های پروژه را از لینک مربوطه دانلود کنید و تصاویر پازل را در پوشه `img` قرار دهید.
2. **اجرای پروژه**: با باز کردن فایل `index.html` در مرورگر خود، میتوانید بازی را شروع کنید.
### جمع‌بندی
بازی **پازل ساده** یک پروژه مفید و سرگرم‌کننده برای یادگیری **AngularJS** و پیاده‌سازی منطق بازی‌های ساده است. شما میتوانید این پروژه را با افزودن ویژگی‌های جدید مانند زمان‌سنج یا امتیازدهی شخصی‌سازی کنید. این پروژه به شما کمک می‌کند تا مفاهیم مختلف برنامه‌نویسی وب و تعاملات کاربری را درک کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی پازل ساده (Simple Puzzle Game) با استفاده از AngularJS و کد منبع می‌باشد
