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

جزئیات محصول

دانلود پروژه **بازی کوبیدن موریانه** (Whack a Mole Game) با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی کوبیدن موریانه** (Whack a Mole Game) با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



در اینجا یک پروژه ساده برای ایجاد یک **بازی کوبیدن موریانه** (Whack a Mole Game) با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، بازیکن باید بر روی موریانه‌ها که به طور تصادفی در حفره‌ها ظاهر می‌شوند کلیک کند و امتیاز کسب کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی کوبیدن موریانه ایجاد می‌کنیم.
 
```html
   
   
    بازی کوبیدن موریانه
   
   
       

بازی کوبیدن موریانه

       
           

امتیاز: 0

       
       
           
           
           
           
           
           
       
       
       
   
   
```
 
### 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 {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.scoreboard {
    font-size: 20px;
    margin-bottom: 20px;
}
 
.mole-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
 
.hole {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    margin: 10px;
    overflow: hidden;
    background-color: #e0e0e0;
}
 
.mole {
    width: 100%;
    height: 100%;
    background-image: url('https://example.com/mole.png'); /* آدرس تصویر موریانه */
    background-size: cover;
    position: absolute;
    bottom: -100%; /* شروع در خارج از دید */
    transition: bottom 0.5s;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
let score = 0;
let moleInterval;
let gameDuration = 20; // زمان بازی به ثانیه
 
const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('startButton');
const messageDisplay = document.getElementById('message');
const moles = document.querySelectorAll('.mole');
 
function startGame() {
    score = 0;
    scoreDisplay.textContent = score;
    messageDisplay.textContent = '';
    startButton.disabled = true;
    moleInterval = setInterval(showMole, 1000); // موریانه هر ثانیه نشان داده می‌شود
    setTimeout(endGame, gameDuration * 1000); // پایان بازی بعد از 20 ثانیه
}
 
function showMole() {
    const randomIndex = Math.floor(Math.random() * moles.length);
    const mole = moles[randomIndex];
 
    mole.style.bottom = '0'; // موریانه به بالای حفره می‌آید
    mole.onclick = () => {
        score++;
        scoreDisplay.textContent = score;
        mole.style.bottom = '-100%'; // موریانه به پایین می‌رود
    };
 
    // پنهان کردن موریانه بعد از 1 ثانیه
    setTimeout(() => {
        mole.style.bottom = '-100%';
    }, 1000);
}
 
function endGame() {
    clearInterval(moleInterval);
    startButton.disabled = false;
    messageDisplay.textContent = `بازی به پایان رسید! امتیاز شما: ${score}`;
    moles.forEach(mole => {
        mole.style.bottom = '-100%'; // پنهان کردن تمام موریانه‌ها
    });
}
 
// افزودن رویداد کلیک به دکمه شروع
startButton.addEventListener('click', startGame);
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، امتیاز، حفره‌ها و دکمه شروع است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و جذاب.
3. **JavaScript**:
   - **امتیاز**: متغیری برای ذخیره امتیاز.
   - **زمان بازی**: مدت زمان بازی را به ثانیه تعیین می‌کند.
   - **تابع شروع بازی**: امتیاز را صفر می‌کند و بازی را آغاز می‌کند.
   - **تابع نمایش موریانه**: موریانه را به طور تصادفی در حفره‌ها نشان می‌دهد و امکان کلیک روی آن را فراهم می‌کند.
   - **تابع پایان بازی**: بازی را متوقف کرده و امتیاز نهایی را نمایش می‌دهد.
 
### نتیجه‌گیری
این پروژه **بازی کوبیدن موریانه** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن سطح دشواری، تایمر یا بهبود گرافیک‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی کوبیدن موریانه** (Whack a Mole Game) با استفاده از HTML، CSS و JavaScript می‌باشد