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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



 پروژه **Speed Typing** یک برنامه ساده است که با استفاده از HTML، CSS و JavaScript ساخته شده و به کاربران کمک می‌کند سرعت تایپ خود را افزایش دهند. در این بازی، کاربران باید جملات داده‌شده را در مدت زمان محدودی تایپ کنند و عملکرد خود را مشاهده کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Speed Typing ایجاد می‌کنیم.
 
```html
   
   
    بازی سرعت تایپ
   
   
       

بازی سرعت تایپ

       
برای شروع بازی، روی دکمه "شروع" کلیک کنید.
       
       
       
زمان باقی‌مانده: 30 ثانیه
       
امتیاز: 0
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی Speed Typing از 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);
    width: 400px;
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
#quote {
    font-size: 18px;
    margin-bottom: 15px;
}
 
textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    resize: none;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
}
 
#time, #score {
    font-size: 18px;
    margin-top: 10px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل نمایش جملات تصادفی، محاسبه زمان و بررسی سرعت تایپ کاربر است.
 
```javascript
const quotes = [
    "زندگی کوتاه است، آن را زیبا زندگی کنید.",
    "هیچ چیز به اندازه یادگیری لذت‌بخش نیست.",
    "بهترین زمان برای شروع، همین حالاست.",
    "موفقیت نتیجه استمرار در تلاش است.",
    "همیشه باور کن که می‌توانی."
];
 
const quoteElement = document.getElementById('quote');
const textInput = document.getElementById('textInput');
const startBtn = document.getElementById('startBtn');
const timeLeftElement = document.getElementById('timeLeft');
const scoreElement = document.getElementById('scoreValue');
 
let timeLeft = 30;
let score = 0;
let timer;
 
function startGame() {
    // بازنشانی مقادیر
    score = 0;
    timeLeft = 30;
    scoreElement.textContent = score;
    timeLeftElement.textContent = timeLeft;
    textInput.disabled = false;
    textInput.value = '';
    textInput.focus();
    
    // نمایش جمله تصادفی
    newQuote();
 
    // شروع تایمر
    timer = setInterval(updateTime, 1000);
}
 
function newQuote() {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    quoteElement.textContent = quotes[randomIndex];
}
 
function updateTime() {
    if (timeLeft > 0) {
        timeLeft--;
        timeLeftElement.textContent = timeLeft;
    } else {
        endGame();
    }
}
 
function endGame() {
    clearInterval(timer);
    textInput.disabled = true;
    alert(`بازی تمام شد! امتیاز نهایی شما: ${score}`);
}
 
// بررسی متن ورودی کاربر
textInput.addEventListener('input', () => {
    if (textInput.value.trim() === quoteElement.textContent) {
        score++;
        scoreElement.textContent = score;
        textInput.value = '';
        newQuote();
    }
});
 
// شروع بازی با کلیک روی دکمه "شروع"
startBtn.addEventListener('click', startGame);
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، نمایش جمله، ورودی متن، دکمه شروع، و بخش نمایش زمان و امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
   - **شروع بازی**: وقتی کاربر روی دکمه "شروع" کلیک می‌کند، تایمر شروع می‌شود و جمله‌ای تصادفی برای تایپ نمایش داده می‌شود.
   - **به‌روزرسانی زمان**: زمان باقی‌مانده هر ثانیه به‌روزرسانی می‌شود تا زمانی که به صفر برسد.
   - **بررسی متن کاربر**: اگر کاربر جمله را درست تایپ کند، امتیاز افزایش یافته و جمله جدیدی نمایش داده می‌شود.
 
### نتیجه‌گیری
این پروژه **Speed Typing** یک تمرین عالی برای تقویت سرعت تایپ کاربران است و به خوبی از مفاهیم JavaScript مانند مدیریت رویدادها، دستکاری DOM و تایمرها استفاده می‌کند. شما می‌توانید این بازی را گسترش دهید و ویژگی‌هایی مانند افزودن سطح سختی یا جمله‌های طولانی‌تر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی **Speed Typing** یک برنامه ساده است که با استفاده از HTML، CSS و JavaScript می‌باشد