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

جزئیات محصول

دانلود پروژه یک بازی ساده تایپ با استفاده از HTML، CSS، و Vanilla JavaScript

دانلود پروژه یک بازی ساده تایپ با استفاده از HTML، CSS، و Vanilla JavaScript

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

خرید فایل


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

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

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

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



پروژه **WordBeater** یک بازی ساده تایپ با استفاده از HTML، CSS، و Vanilla JavaScript است که هدف آن بهبود سرعت تایپ کاربر با چالش تایپ سریع کلمات تصادفی است. در این بازی، کاربر باید کلمه‌ای را که در صفحه نمایش داده می‌شود، در مدت زمان مشخص تایپ کند تا امتیاز بگیرد.
 
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه WordBeater ایجاد می‌کنیم:
 
```html
   
   
    WordBeater بازی
   
   
       

WordBeater

       

کلمه‌ای که نمایش داده می‌شود را قبل از اتمام زمان تایپ کنید.

       

       
       
           

زمان باقی‌مانده: 5 ثانیه

           

امتیاز: 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;
}
 
.container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
 
.word {
    font-size: 36px;
    color: #333;
    margin: 20px 0;
}
 
input {
    padding: 10px;
    font-size: 18px;
    width: 80%;
    margin-bottom: 20px;
}
 
.details h3 {
    margin: 5px 0;
}
```
 
### 3. **JavaScript**
اکنون به پیاده‌سازی منطق بازی با استفاده از JavaScript می‌پردازیم. این کد شامل زمان‌بندی، بررسی ورودی و به‌روزرسانی امتیاز می‌باشد.
 
```javascript
window.addEventListener('load', init);
 
// متغیرها
const wordDisplay = document.getElementById('word');
const userInput = document.getElementById('input');
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const messageDisplay = document.getElementById('message');
 
const words = [
    'برنامه‌نویسی', 'جاوااسکریپت', 'چالش', 'سریع', 'تمرین', 
    'وبسایت', 'طراحی', 'فناوری', 'دیجیتال', 'موبایل', 
    'داده', 'تحلیل', 'هوش', 'ماشین', 'الگوریتم'
];
 
let time = 5;  // زمان برای تایپ هر کلمه
let score = 0;
let isPlaying;
 
// شروع بازی
function init() {
    showWord(words);
    userInput.addEventListener('input', startMatch);
    setInterval(countdown, 1000);
    setInterval(checkStatus, 50);
}
 
// نمایش کلمه تصادفی
function showWord(words) {
    const randomIndex = Math.floor(Math.random() * words.length);
    wordDisplay.textContent = words[randomIndex];
}
 
// شروع مسابقه
function startMatch() {
    if (matchWords()) {
        isPlaying = true;
        time = 6; // بازنشانی زمان به مقدار اولیه
        showWord(words);
        userInput.value = '';
        score++;
    }
    scoreDisplay.textContent = score;
}
 
// بررسی تطابق کلمات
function matchWords() {
    if (userInput.value === wordDisplay.textContent) {
        messageDisplay.textContent = 'صحیح!';
        messageDisplay.style.color = 'green';
        return true;
    } else {
        messageDisplay.textContent = '';
        return false;
    }
}
 
// شمارش معکوس
function countdown() {
    if (time > 0) {
        time--;
    } else if (time === 0) {
        isPlaying = false;
    }
    timeDisplay.textContent = time;
}
 
// بررسی وضعیت بازی
function checkStatus() {
    if (!isPlaying && time === 0) {
        messageDisplay.textContent = 'بازی تمام شد!';
        messageDisplay.style.color = 'red';
        score = 0;
    }
}
```
 
### توضیحات کد:
1. **HTML**: شامل عناصر مختلف از جمله نمایش کلمه، ورودی کاربر و نمایش زمان و امتیاز است.
2. **CSS**: طراحی ساده برای نمایش بهتر کلمات و ورودی تایپ.
3. **JavaScript**:
   - **کلمات تصادفی**: کلمات در آرایه `words` تعریف شده‌اند که به صورت تصادفی انتخاب می‌شوند.
   - **نمایش کلمه**: تابع `showWord()` یک کلمه تصادفی را از لیست کلمات انتخاب و نمایش می‌دهد.
   - **شروع مسابقه**: تابع `startMatch()` بررسی می‌کند که آیا ورودی کاربر با کلمه نمایش داده شده مطابقت دارد یا خیر و در صورت تطابق امتیاز را افزایش می‌دهد.
   - **شمارش معکوس**: تابع `countdown()` زمان را به صورت معکوس کاهش می‌دهد.
   - **بررسی وضعیت بازی**: اگر زمان تمام شده باشد و کاربر نتواند کلمه را تایپ کند، پیام "بازی تمام شد!" نمایش داده می‌شود و امتیاز صفر می‌شود.
 
### نتیجه‌گیری
بازی WordBeater یک پروژه سرگرم‌کننده و آموزشی است که می‌تواند به بهبود سرعت و دقت تایپ کاربران کمک کند. شما می‌توانید با افزودن ویژگی‌هایی مثل سطح‌های مختلف، چالش‌های بیشتر و استفاده از تایمر پیچیده‌تر، این بازی را بهبود ببخشید. از کدنویسی لذت ببرید و مهارت‌های تایپ خود را به چالش بکشید!
| صفحه قابل مشاهده: دانلود پروژه یک بازی ساده تایپ با استفاده از HTML، CSS، و Vanilla JavaScript می‌باشد