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

جزئیات محصول

دانلود پروژه **بازی تایپ (Typing Game) در JavaScript**

دانلود پروژه **بازی تایپ (Typing Game) در JavaScript**

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

خرید فایل


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

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

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

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



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

بازی تایپ

       

این یک جمله تست برای تایپ است.

       
       
       
           

زمان: ثانیه

           

دقت: %

       
   
   
```
 
### 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;
    width: 90%;
    max-width: 500px;
}
 
h1 {
    margin-bottom: 20px;
}
 
textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 10px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}
 
#results {
    margin-top: 20px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const sentences = [
    "این یک جمله تست برای تایپ است.",
    "بازی تایپ به شما کمک می‌کند سرعت تایپ خود را افزایش دهید.",
    "تمرین روزانه می‌تواند در بهبود دقت و سرعت تایپ موثر باشد.",
    "تایپ سریع یکی از مهارت‌های مهم در دنیای دیجیتال امروز است."
];
 
let selectedSentence;
let startTime;
let timer;
let isGameRunning = false;
 
const sentenceDisplay = document.getElementById('sentenceDisplay');
const inputField = document.getElementById('inputField');
const startBtn = document.getElementById('startBtn');
const timeDisplay = document.getElementById('timeDisplay');
const accuracyDisplay = document.getElementById('accuracyDisplay');
const resultsDiv = document.getElementById('results');
 
// شروع بازی
startBtn.addEventListener('click', function() {
    if (!isGameRunning) {
        selectedSentence = sentences[Math.floor(Math.random() * sentences.length)];
        sentenceDisplay.textContent = selectedSentence;
        inputField.value = '';
        inputField.focus();
        timeDisplay.textContent = '';
        accuracyDisplay.textContent = '';
        resultsDiv.style.display = 'none';
        isGameRunning = true;
        startTime = new Date().getTime();
 
        // تایمر
        timer = setTimeout(endGame, 5000); // 5 ثانیه
    }
});
 
// پایان بازی
function endGame() {
    isGameRunning = false;
    const endTime = new Date().getTime();
    const timeTaken = (endTime - startTime) / 1000;
    const typedText = inputField.value;
 
    // محاسبه دقت
    const totalChars = selectedSentence.length;
    const correctChars = [...typedText].filter((char, index) => char === selectedSentence[index]).length;
    const accuracy = (correctChars / totalChars) * 100;
 
    // نمایش نتایج
    timeDisplay.textContent = timeTaken.toFixed(2);
    accuracyDisplay.textContent = accuracy.toFixed(2);
    resultsDiv.style.display = 'block';
}
 
// رویداد برای ورودی کاربر
inputField.addEventListener('input', function() {
    if (!isGameRunning) return;
    
    const typedText = inputField.value;
    
    if (typedText === selectedSentence) {
        endGame();
    }
});
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان بازی، نمایش جمله برای تایپ، ورودی برای تایپ کاربر، دکمه شروع و بخش نتایج.
 
2. **CSS**:
   - طراحی ساده و کاربرپسند برای ورودی‌ها و دکمه‌ها.
 
3. **JavaScript**:
   - **آرایه جملات**: شامل جملات مختلف برای تایپ.
   - **متغیرها**: برای جمله انتخاب شده، زمان شروع، تایمر و وضعیت بازی.
   - **رویداد دکمه شروع**: انتخاب یک جمله تصادفی و شروع تایمر.
   - **تابع پایان بازی**: محاسبه زمان صرف شده و دقت تایپ و نمایش نتایج.
   - **رویداد ورودی**: بررسی اینکه آیا کاربر جمله را به درستی تایپ کرده است یا نه.
 
### نتیجه‌گیری
این پروژه **بازی تایپ** یک مثال عالی برای یادگیری نحوه کار با ورودی‌های کاربر، زمان‌سنجی و محاسبات دقت در JavaScript است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن سطح‌های سختی، نمایش تعداد کل کلمات تایپ شده و امتیازدهی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی تایپ (Typing Game) در JavaScript** می‌باشد