کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه: بازی Mad Shark با استفاده از HTML5 و JavaScript
**بازی Mad Shark** یک بازی سرگرم‌کننده است که با استفاده از **HTML5 و JavaScript** طراحی شده است. در این بازی، شما کنترل یک کوسه را بر عهده دارید و باید در دنیای زیر آب بگردید و ماهی‌ها را ببلعید تا امتیاز کسب کنید. این بازی شامل گرافیک رنگارنگ و گیم‌پلی جذاب است که می‌تواند ساعت‌ها شما را سرگرم کند.
### ویژگی‌های پروژه
1. **گرافیک زیبا**: طراحی جذاب و رنگی برای محیط بازی و شخصیت‌ها.
2. **گیم‌پلی اعتیادآور**: به عنوان یک کوسه، شما باید ماهی‌ها را شکار کنید و از موانع جلوگیری کنید.
3. **کنترل‌های ساده**: کنترل آسان کوسه با استفاده از صفحه‌کلید.
4. **امتیازدهی**: امتیاز خود را با شکار ماهی‌ها افزایش دهید.
### نحوه اجرای پروژه
1. **دانلود پروژه**: کد منبع را از لینک زیر دانلود کنید.
2. **اجرای پروژه**: فایل `index.html` را با استفاده از یک مرورگر مدرن (مانند Google Chrome یا Mozilla Firefox) باز کنید.
### کد منبع
#### کد HTML (index.html)
```html
بازی Mad Shark
```
#### کد CSS (style.css)
```css
body {
margin: 0;
overflow: hidden;
background-color: #3b5998; /* رنگ پس زمینه */
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
```
#### کد جاوا اسکریپت (script.js)
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let shark = {
x: canvas.width / 2,
y: canvas.height / 2,
width: 50,
height: 30,
speed: 5,
};
let fish = [];
let score = 0;
function spawnFish() {
const fishX = Math.random() * canvas.width;
const fishY = Math.random() * canvas.height;
fish.push({ x: fishX, y: fishY, width: 20, height: 10 });
}
function drawShark() {
ctx.fillStyle = 'darkblue';
ctx.fillRect(shark.x, shark.y, shark.width, shark.height);
}
function drawFish() {
ctx.fillStyle = 'orange';
fish.forEach(f => {
ctx.fillRect(f.x, f.y, f.width, f.height);
});
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawShark();
drawFish();
// بررسی برخورد
fish = fish.filter(f => {
if (shark.x < f.x + f.width &&
shark.x + shark.width > f.x &&
shark.y < f.y + f.height &&
shark.y + shark.height > f.y) {
score++;
return false; // حذف ماهی
}
return true; // نگه‌داشتن ماهی
});
requestAnimationFrame(update);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
shark.y -= shark.speed;
}
if (event.key === 'ArrowDown') {
shark.y += shark.speed;
}
if (event.key === 'ArrowLeft') {
shark.x -= shark.speed;
}
if (event.key === 'ArrowRight') {
shark.x += shark.speed;
}
});
setInterval(spawnFish, 1000); // ایجاد ماهی جدید هر ثانیه
update();
```
### جمع‌بندی
بازی **Mad Shark** یک پروژه عالی برای یادگیری نحوه ساخت بازی با HTML5 و JavaScript است. شما میتوانید با افزودن ویژگی‌های جدید مانند سطوح مختلف، انواع مختلف ماهی، و حتی موانع، بازی را گسترش دهید و تجربه کاربری جذاب‌تری را ارائه کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی Mad Shark با استفاده از HTML5 و JavaScript می‌باشد
