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

جزئیات محصول

دانلود پروژه بازی

دانلود پروژه بازی "Whack a Mole" با جاوا اسکریپت و کد منبع

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

خرید فایل


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

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

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

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



### بازی "Whack a Mole" با جاوا اسکریپت و کد منبع
 
این پروژه یک بازی ساده به نام **Whack a Mole** است که با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است. این بازی به کاربر اجازه می‌دهد تا با ضربه زدن به موشک‌ها (moles) که به طور تصادفی از سوراخ‌ها بیرون می‌آیند، امتیاز جمع‌آوری کند. این پروژه برای یادگیری مفاهیم جاوا اسکریپت مانند زمان‌بندی‌ها (timers)، مدیریت رویدادها و دستکاری DOM مناسب است.
 
### ۱. **HTML**
ابتدا ساختار HTML برای بازی Whack a Mole را ایجاد می‌کنیم.
 
```html
   
   
    بازی Whack a Mole
   
   

بازی ضربه به موشک

   

امتیاز شما: 0

   
   
       
       
       
       
       
       
   
   
```
 
### ۲. **CSS**
طراحی ظاهری بازی با استفاده از CSS برای ایجاد یک محیط جذاب و کاربرپسند.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}
 
h1, h2 {
    margin: 10px;
}
 
.game-container {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    gap: 20px;
    margin-top: 20px;
}
 
.hole {
    width: 150px;
    height: 150px;
    background-color: #8B4513;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
 
.mole {
    width: 100px;
    height: 100px;
    background-color: #222;
    border-radius: 50%;
    position: absolute;
    top: 100%;
    left: 25%;
    transition: top 0.3s;
}
 
.mole.up {
    top: 10%;
}
```
 
### ۳. **JavaScript**
در این قسمت، منطق بازی پیاده‌سازی شده است.
 
```javascript
document.addEventListener('DOMContentLoaded', () => {
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.getElementById('score');
    const moles = document.querySelectorAll('.mole');
    const startButton = document.getElementById('startBtn');
    
    let lastHole;
    let timeUp = false;
    let score = 0;
 
    // انتخاب یک سوراخ به صورت تصادفی
    function randomHole(holes) {
        const idx = Math.floor(Math.random() * holes.length);
        const hole = holes[idx];
        if (hole === lastHole) {
            return randomHole(holes);
        }
        lastHole = hole;
        return hole;
    }
 
    // نشان دادن موشک به طور تصادفی
    function peep() {
        const time = Math.floor(Math.random() * 1000) + 500;
        const hole = randomHole(holes);
        const mole = hole.querySelector('.mole');
        mole.classList.add('up');
        
        setTimeout(() => {
            mole.classList.remove('up');
            if (!timeUp) peep();
        }, time);
    }
 
    // شروع بازی
    function startGame() {
        score = 0;
        scoreBoard.textContent = score;
        timeUp = false;
        peep();
        setTimeout(() => timeUp = true, 10000); // بازی به مدت 10 ثانیه ادامه دارد
    }
 
    // اضافه کردن امتیاز در صورتی که کاربر روی موشک کلیک کند
    function bonk(e) {
        if (!e.isTrusted) return; // جلوگیری از تقلب
        score++;
        this.classList.remove('up');
        scoreBoard.textContent = score;
    }
 
    // افزودن رویداد به دکمه شروع و موشک‌ها
    startButton.addEventListener('click', startGame);
    moles.forEach(mole => mole.addEventListener('click', bonk));
});
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان، امتیاز و دکمه‌ای برای شروع بازی است.
   - **سوراخ‌ها**: بخش‌های مختلف بازی که موشک‌ها از آن‌ها بیرون می‌آیند.
 
2. **CSS**:
   - **سوراخ‌ها و موشک‌ها**: استایل دایره‌ای برای سوراخ‌ها و موشک‌ها ایجاد شده و انیمیشن ساده‌ای برای بالا آمدن و پایین رفتن موشک‌ها استفاده شده است.
 
3. **JavaScript**:
   - **انتخاب سوراخ تصادفی**: تابع `randomHole` یک سوراخ تصادفی انتخاب می‌کند که از سوراخ قبلی متفاوت باشد.
   - **نشان دادن موشک‌ها**: تابع `peep` به صورت تصادفی موشک‌ها را از سوراخ‌ها بالا می‌آورد.
   - **شروع بازی**: تابع `startGame` بازی را آغاز می‌کند و به مدت 10 ثانیه موشک‌ها را به نمایش می‌گذارد.
   - **ضربه زدن به موشک‌ها**: وقتی کاربر روی موشک کلیک می‌کند، امتیاز اضافه می‌شود و موشک به پایین می‌رود.
 
### نتیجه‌گیری
این پروژه یک بازی سرگرم‌کننده و ساده است که به شما کمک می‌کند تا مفاهیم جاوا اسکریپت مانند مدیریت رویدادها، استفاده از تایمرها و کار با کلاس‌های CSS را به خوبی یاد بگیرید. شما می‌توانید این بازی را گسترش داده و قابلیت‌هایی مانند افزایش زمان یا تغییر تعداد سوراخ‌ها را به آن اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی "Whack a Mole" با جاوا اسکریپت و کد منبع می‌باشد