کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
**پروژه: بازی مار (Snakes) در HTML5 و جاوا اسکریپت با کد منبع**
این پروژه یک بازی **مار** است که با استفاده از **HTML5** و **جاوا اسکریپت** طراحی شده است. هدف این بازی کنترل مار برای خوردن غذا و رشد در اندازه است. این بازی کلاسیک می‌تواند به‌راحتی در مرورگر اجرا شود و سرگرمی را برای کاربران فراهم می‌کند.
### ویژگی‌های پروژه
1. **کنترل ساده**: بازیکن می‌تواند با استفاده از کلیدهای جهت‌دار، مار را کنترل کند.
2. **رشد مار**: با خوردن غذا، مار بزرگ‌تر می‌شود.
3. **پایان بازی**: بازی زمانی پایان می‌یابد که مار به خودش برخورد کند یا از صفحه خارج شود.
4. **گرافیک ساده**: طراحی بصری ساده و کاربرپسند.
### نحوه اجرای پروژه
1. **دانلود پروژه**: ابتدا کد منبع پروژه را دانلود کنید.
2. **اجرای پروژه**:
- فایل `index.html` را در یک مرورگر مدرن مانند Google Chrome یا Mozilla Firefox باز کنید تا بازی را مشاهده کنید.
### کد منبع
در زیر کدهای مربوط به پروژه آورده شده است:
#### کد HTML (index.html)
```html
بازی مار
بازی مار
امتیاز: 0
```
#### کد CSS (styles.css)
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
canvas {
border: 1px solid #333;
background-color: #fff;
}
```
#### کد جاوا اسکریپت (script.js)
```javascript
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };
let food = { x: 0, y: 0 };
let score = 0;
function randomFoodPosition() {
food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
}
function drawSnake() {
snake.forEach((segment) => {
ctx.fillStyle = "green";
ctx.fillRect(segment.x, segment.y, 10, 10);
});
}
function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, 10, 10);
}
function moveSnake() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score += 10;
document.getElementById("score").innerText = "امتیاز: " + score;
randomFoodPosition();
} else {
snake.pop();
}
}
function changeDirection(event) {
switch (event.key) {
case "ArrowUp":
if (direction.y === 0) {
direction = { x: 0, y: -10 };
}
break;
case "ArrowDown":
if (direction.y === 0) {
direction = { x: 0, y: 10 };
}
break;
case "ArrowLeft":
if (direction.x === 0) {
direction = { x: -10, y: 0 };
}
break;
case "ArrowRight":
if (direction.x === 0) {
direction = { x: 10, y: 0 };
}
break;
}
}
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
return true; // برخورد با دیوار
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true; // برخورد با خود
}
}
return false;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
moveSnake();
if (checkCollision()) {
alert("بازی تمام شد! امتیاز شما: " + score);
document.location.reload();
}
}
randomFoodPosition();
document.addEventListener("keydown", changeDirection);
setInterval(gameLoop, 100);
```
### جمع‌بندی
این پروژه یک بازی مار ساده و سرگرم‌کننده است که می‌تواند به عنوان یک پروژه آموزشی مفید باشد. با گسترش این بازی و اضافه کردن ویژگی‌های جدید، میتوانید آن را به یک پروژه جذاب‌تر تبدیل کنید. این بازی نه تنها مهارت‌های برنامه‌نویسی شما را به چالش می‌کشد، بلکه می‌تواند برای کاربران نیز سرگرم‌کننده باشد.
| صفحه قابل مشاهده:
دانلود پروژه بازی مار (Snakes) در HTML5 و جاوا اسکریپت با کد منبع می‌باشد
