کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد **بازی مار** با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، بازیکن باید با کنترل مار، غذاها را جمع‌آوری کند و طول مار را افزایش دهد.
### 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;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 1px solid #333;
background-color: #e0e0e0;
}
#status {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
```
### 3. **JavaScript**
در نهایت منطق بازی مار را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20; // اندازه هر بلوک
let snake = [{ x: box * 5, y: box * 5 }]; // شروع مار
let direction = 'right'; // جهت اولیه
let food = spawnFood(); // ایجاد غذا
let score = 0;
// تابع برای تولید غذای جدید
function spawnFood() {
const x = Math.floor(Math.random() * (canvas.width / box)) * box;
const y = Math.floor(Math.random() * (canvas.height / box)) * box;
return { x, y };
}
// تابع برای کشیدن مار و غذا
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// کشیدن مار
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = i === 0 ? 'green' : 'lightgreen'; // رنگ سر و بدن مار
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'darkgreen'; // حاشیه مار
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
// کشیدن غذا
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
// حرکت مار
const head = { x: snake[0].x, y: snake[0].y };
if (direction === 'right') head.x += box;
if (direction === 'left') head.x -= box;
if (direction === 'up') head.y -= box;
if (direction === 'down') head.y += box;
// بررسی خوردن غذا
if (head.x === food.x && head.y === food.y) {
score++;
food = spawnFood(); // تولید غذا جدید
} else {
snake.pop(); // حذف آخرین قسمت مار
}
snake.unshift(head); // اضافه کردن سر جدید
// بررسی برخورد با دیوار یا خود مار
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
clearInterval(game);
alert('بازی تمام شد! امتیاز شما: ' + score);
}
document.getElementById('status').textContent = 'امتیاز: ' + score;
}
// تابع برای بررسی برخورد مار با خود
function collision(head) {
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
// کنترل جهت با استفاده از کلیدها
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
});
// شروع بازی
document.getElementById('startBtn').addEventListener('click', () => {
snake = [{ x: box * 5, y: box * 5 }];
direction = 'right';
food = spawnFood();
score = 0;
document.getElementById('status').textContent = 'امتیاز: ' + score;
clearInterval(game);
game = setInterval(draw, 100);
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، بوم (canvas) برای نمایش بازی، نمایش امتیاز و دکمه شروع است.
2. **CSS**: طراحی برای بازی مار که شامل طراحی بوم و دکمه‌ها می‌شود.
3. **JavaScript**:
- **تعریف مار و غذا**: مار به صورت آرایه‌ای از مختصات تعریف می‌شود و غذا به صورت مختصات تصادفی تولید می‌شود.
- **تابع رسم**: وظیفه رسم مار و غذا و بررسی برخوردها را بر عهده دارد.
- **حرکت مار**: با کلیدهای جهت‌دار، جهت حرکت مار تغییر می‌کند.
- **کنترل برخوردها**: بررسی می‌کند که آیا مار به دیوار یا به خود برخورد کرده است.
- **شروع بازی**: دکمه شروع، بازی را از نو راه‌اندازی می‌کند.
### نتیجه‌گیری
این پروژه **بازی مار** یک مثال ساده و عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند سطح‌های دشواری یا افزایش سرعت بازی با افزایش امتیاز را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی مار** با استفاده از HTML، CSS و JavaScript می‌باشد
