مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه **بازی فروشگاهی** (Grocery Game) با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی فروشگاهی** (Grocery Game) با استفاده از HTML، CSS و JavaScript

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش  سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد


در اینجا یک پروژه ساده برای ایجاد **بازی فروشگاهی** (Grocery Game) با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، کاربر می‌تواند میوه‌ها و سبزیجات را جمع‌آوری کند و امتیاز کسب کند. هدف این است که کاربر با جمع‌آوری موارد مختلف، بیشترین امتیاز را به دست آورد.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
 
```html
   
   
    بازی فروشگاهی
   
   
       

بازی فروشگاهی

       
       
           

امتیاز: 0

       
   
   
```
 
### 2. **CSS**
سپس از CSS برای طراحی ظاهری برنامه استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}
 
.game-container {
    position: relative;
}
 
canvas {
    background-color: #ffffff;
    border: 1px solid #000;
}
 
.score {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    color: #333;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد، کاربر با حرکت چپ و راست می‌تواند میوه‌ها و سبزیجات را جمع‌آوری کند.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
 
canvas.width = 400;
canvas.height = 600;
 
let score = 0;
let basketX = canvas.width / 2 - 20; // موقعیت افقی سبد
const basketWidth = 40; // عرض سبد
const basketHeight = 20; // ارتفاع سبد
 
const items = []; // لیست آیتم‌ها
const itemWidth = 30; // عرض آیتم
const itemHeight = 30; // ارتفاع آیتم
 
function createItem() {
    const x = Math.random() * (canvas.width - itemWidth);
    items.push({ x, y: 0, type: Math.random() < 0.5 ? 'fruit' : 'vegetable' });
}
 
function drawBasket() {
    ctx.fillStyle = 'brown';
    ctx.fillRect(basketX, canvas.height - basketHeight, basketWidth, basketHeight);
}
 
function drawItems() {
    items.forEach(item => {
        ctx.fillStyle = item.type === 'fruit' ? 'orange' : 'green'; // رنگ برای میوه و سبزی
        ctx.fillRect(item.x, item.y, itemWidth, itemHeight);
    });
}
 
function updateItems() {
    items.forEach(item => {
        item.y += 2; // سرعت سقوط آیتم‌ها
        if (item.y > canvas.height) {
            item.y = canvas.height + 10; // حذف آیتم‌هایی که از پایین خارج می‌شوند
        }
    });
}
 
function detectCollision() {
    items.forEach((item, index) => {
        if (item.y + itemHeight > canvas.height - basketHeight && item.x + itemWidth > basketX && item.x < basketX + basketWidth) {
            score++;
            scoreElement.textContent = score;
            items.splice(index, 1); // حذف آیتم پس از جمع‌آوری
        }
    });
}
 
function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBasket();
    drawItems();
    updateItems();
    detectCollision();
 
    // ایجاد آیتم جدید با احتمال
    if (Math.random() < 0.02) {
        createItem();
    }
 
    requestAnimationFrame(update);
}
 
document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
        basketX -= 20; // حرکت به چپ
        if (basketX < 0) basketX = 0; // محدود کردن حرکت به چپ
    } else if (event.key === 'ArrowRight') {
        basketX += 20; // حرکت به راست
        if (basketX + basketWidth > canvas.width) basketX = canvas.width - basketWidth; // محدود کردن حرکت به راست
    }
});
 
update();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، یک `` برای رسم بازی و یک عنصر برای نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد ظاهری کاربرپسند.
3. **JavaScript**:
   - **سبد**: سبد جمع‌آوری با موقعیت مشخص و ابعاد مشخص شده است.
   - **آیتم‌ها**: آیتم‌ها به صورت تصادفی در بالای صفحه ایجاد می‌شوند و به سمت پایین حرکت می‌کنند.
   - **تشخیص برخورد**: اگر سبد با آیتم‌ها برخورد کند، امتیاز کاربر افزایش می‌یابد و آیتم حذف می‌شود.
   - **حرکت سبد**: با فشار دادن کلیدهای چپ و راست، سبد به سمت چپ و راست حرکت می‌کند.
   - **به‌روزرسانی**: تابع `update` به‌طور مداوم صدا زده می‌شود تا موقعیت سبد، آیتم‌ها و امتیاز را به‌روزرسانی کند.
 
### نتیجه‌گیری
این بازی فروشگاهی می‌تواند به عنوان یک پروژه سرگرم‌کننده و آموزنده برای یادگیری HTML، CSS و JavaScript مورد استفاده قرار گیرد. شما می‌توانید ویژگی‌های بیشتری مانند زمان محدود، قدرت‌های ویژه یا سطوح مختلف را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی فروشگاهی** (Grocery Game) با استفاده از HTML، CSS و JavaScript می‌باشد