کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی T-Rex** (بازی دایناسور) با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به کاربران اجازه می‌دهد که با دایناسور خود در محیطی بیابانی پرش کنند و از موانع عبور کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
```html
بازی T-Rex
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
margin: 0;
overflow: hidden;
background-color: #f4f4f4;
}
.game-container {
position: relative;
width: 100%;
height: 150px;
background-color: #fff;
border: 2px solid #000;
}
.dino {
position: absolute;
bottom: 0;
left: 50px;
width: 40px;
height: 40px;
background-color: green;
}
.cactus {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 60px;
background-color: brown;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل پرش دایناسور و برخورد با مانع است.
```javascript
const dino = document.getElementById('dino');
const cactus = document.getElementById('cactus');
let isJumping = false;
let score = 0;
// پرش دایناسور
function jump() {
if (isJumping) return;
isJumping = true;
let position = 0;
const jumpInterval = setInterval(() => {
if (position >= 100) {
clearInterval(jumpInterval);
const fallInterval = setInterval(() => {
if (position <= 0) {
clearInterval(fallInterval);
isJumping = false;
}
position -= 5;
dino.style.bottom = position + 'px';
}, 20);
}
position += 5;
dino.style.bottom = position + 'px';
}, 20);
}
// حرکت مانع
const moveCactus = setInterval(() => {
const cactusPosition = parseInt(window.getComputedStyle(cactus).getPropertyValue('right'));
if (cactusPosition <= 50 && cactusPosition > 0 && !isJumping) {
alert('بازی تمام شد! امتیاز شما: ' + score);
score = 0; // امتیاز را صفر کنید
location.reload(); // بارگذاری مجدد بازی
}
if (cactusPosition <= 0) {
score++;
cactus.style.right = '100%'; // دوباره مانع را در سمت راست قرار دهید
} else {
cactus.style.right = cactusPosition - 5 + 'px'; // مانع را به چپ حرکت دهید
}
}, 20);
// رویداد کلید برای پرش
document.addEventListener('keydown', jump);
```
### توضیحات کد:
1. **HTML**: شامل یک کانتینر بازی، دایناسور و مانع (کاکتوس) است.
2. **CSS**: طراحی ساده برای بازی با رنگ‌ها و اندازه‌های مشخص.
3. **JavaScript**:
- **پرش دایناسور**: با استفاده از یک تابع که موقعیت دایناسور را تغییر می‌دهد.
- **حرکت مانع**: با استفاده از یک تابع که مانع را به سمت چپ حرکت می‌دهد و در صورت برخورد با دایناسور، بازی را به پایان می‌رساند.
- **رویداد کلید**: برای پرش دایناسور از کلیدهای صفحه‌کلید استفاده می‌شود.
### نتیجه‌گیری
این پروژه **بازی T-Rex** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادها و انیمیشن‌ها است. شما میتوانید این بازی را گسترش دهید و ویژگی‌های بیشتری مانند امتیازدهی، سطوح مختلف یا تغییرات گرافیکی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی T-Rex** (بازی دایناسور) با استفاده از HTML، CSS و JavaScript می‌باشد
