کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه: بازی Circus Jump با استفاده از HTML5
**بازی Circus Jump** یک بازی سرگرم‌کننده و جذاب است که به بازیکنان امکان می‌دهد تا شخصیت خود را در دنیای سیرک کنترل کنند و از موانع مختلف بپرند. این بازی به صورت ساده و با استفاده از HTML5، CSS و JavaScript طراحی شده است و می‌تواند به عنوان یک پروژه آموزشی عالی باشد.
### ویژگی‌های پروژه
1. **گیم‌پلی ساده**: بازیکنان با فشار دادن کلید Space می‌توانند بپرند و از موانع عبور کنند.
2. **گرافیک جذاب**: طراحی رنگارنگ و زنده که به تجربه بازی افزوده است.
3. **نمره‌گذاری**: سیستم امتیازدهی برای ثبت رکوردها.
### نحوه اجرای پروژه
1. **دانلود پروژه**: کد منبع را دانلود کنید.
2. **اجرای پروژه**: فایل `index.html` را با استفاده از یک مرورگر مدرن (مانند Google Chrome یا Mozilla Firefox) باز کنید.
### کد منبع
#### کد HTML (index.html)
```html
بازی Circus Jump
بازی Circus Jump
```
#### کد CSS (style.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
}
.game-container {
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 900px;
}
canvas {
border: 1px solid #000;
background-color: #e0e0e0;
}
#score {
font-size: 24px;
margin-top: 10px;
}
```
#### کد جاوا اسکریپت (script.js)
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startBtn');
const scoreDiv = document.getElementById('score');
let score = 0;
let gameInterval;
let character;
let obstacles = [];
// کلاس شخصیت
class Character {
constructor() {
this.x = 50;
this.y = 300;
this.width = 50;
this.height = 50;
this.gravity = 1;
this.jumpPower = -15;
this.velocityY = 0;
this.isJumping = false;
}
draw() {
ctx.fillStyle = 'blue';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
jump() {
if (!this.isJumping) {
this.velocityY = this.jumpPower;
this.isJumping = true;
}
}
update() {
this.y += this.velocityY;
this.velocityY += this.gravity;
if (this.y > 300) {
this.y = 300;
this.isJumping = false;
this.velocityY = 0;
}
}
}
// کلاس موانع
class Obstacle {
constructor() {
this.x = canvas.width;
this.y = 300;
this.width = 30;
this.height = 50;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
update() {
this.x -= 5; // حرکت به سمت چپ
if (this.x < -this.width) {
this.reset();
}
}
reset() {
this.x = canvas.width + Math.random() * 200;
}
}
// شروع بازی
startBtn.addEventListener('click', () => {
score = 0;
character = new Character();
obstacles = [];
for (let i = 0; i < 5; i++) {
obstacles.push(new Obstacle());
}
if (gameInterval) clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 100);
});
// کنترل پرش
document.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
character.jump();
}
});
// حلقه بازی
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
character.update();
character.draw();
obstacles.forEach(obstacle => {
obstacle.update();
obstacle.draw();
if (collision(character, obstacle)) {
clearInterval(gameInterval);
alert('بازی تمام شد! امتیاز شما: ' + score);
}
});
scoreDiv.innerText = 'امتیاز: ' + score;
score++;
}
// تابع برخورد
function collision(character, obstacle) {
return character.x < obstacle.x + obstacle.width &&
character.x + character.width > obstacle.x &&
character.y < obstacle.y + obstacle.height &&
character.height + character.y > obstacle.y;
}
```
### جمع‌بندی
بازی **Circus Jump** یک پروژه سرگرم‌کننده و ساده است که به بازیکنان امکان می‌دهد تا با پرش از موانع، امتیاز جمع‌آوری کنند. این بازی می‌تواند به عنوان یک منبع آموزشی برای یادگیری مفاهیم برنامه‌نویسی وب و طراحی بازی‌های ساده مورد استفاده قرار گیرد. با افزودن ویژگی‌های جدید مانند سطوح دشواری و انواع مختلف موانع، میتوانید این بازی را جذاب‌تر کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی Circus Jump با استفاده از HTML5 می‌باشد
