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

جزئیات محصول

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

دانلود پروژه بازی "سرعت تایپ" (Speed Typer) با استفاده از JavaScript و HTML

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

خرید فایل


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

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

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

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


در اینجا یک پروژه ساده برای ایجاد یک بازی "سرعت تایپ" (Speed Typer) با استفاده از JavaScript و HTML ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا با تایپ متن‌های تصادفی، سرعت تایپ خود را آزمایش کنند.
 
### 1. **HTML**
ابتدا کد HTML را برای ایجاد فرم ورودی و نمایش متن تصادفی و نتایج ایجاد می‌کنیم.
 
```html
   
   
    بازی سرعت تایپ
   
   
       

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

       
       
       
       

   
   
```
 
### 2. **CSS**
سپس برای زیباسازی صفحه، از کد CSS زیر استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
.text-display {
    font-size: 24px;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 
textarea {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
 
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
 
button:hover {
    background-color: #45a049;
}
```
 
### 3. **JavaScript**
و در نهایت، کد JavaScript برای ایجاد متن تصادفی، زمان‌سنجی و محاسبه سرعت تایپ.
 
```javascript
const phrases = [
    "سرعت تایپ خود را آزمایش کنید.",
    "برنامه نویسی یکی از شگفت انگیزترین مهارت ها است.",
    "هر روز یک قدم به سمت بهبود خود بردارید.",
    "تایپ سریع به شما کمک می کند تا در کارهای خود موثرتر باشید.",
    "با تمرین می توانید به یک تایپیست حرفه ای تبدیل شوید."
];
 
let startTime;
let isTyping = false;
 
document.getElementById('startButton').addEventListener('click', startGame);
 
function startGame() {
    const randomIndex = Math.floor(Math.random() * phrases.length);
    document.getElementById('textToType').textContent = phrases[randomIndex];
    document.getElementById('userInput').value = '';
    document.getElementById('userInput').focus();
    document.getElementById('result').textContent = '';
    startTime = new Date();
    isTyping = true;
}
 
document.getElementById('userInput').addEventListener('input', () => {
    if (!isTyping) return;
 
    const typedText = document.getElementById('userInput').value;
    const originalText = document.getElementById('textToType').textContent;
 
    if (typedText === originalText) {
        isTyping = false;
        const endTime = new Date();
        const timeTaken = (endTime - startTime) / 1000; // زمان به ثانیه
        const wordsPerMinute = Math.round((typedText.length / 5) / (timeTaken / 60));
        document.getElementById('result').textContent = `تبریک! شما با سرعت ${wordsPerMinute} کلمه در دقیقه تایپ کردید.`;
    }
});
```
 
### نتیجه‌گیری
این پروژه به شما اجازه می‌دهد تا سرعت تایپ خود را بسنجید و با تمرین می‌توانید بهبود یابید. می‌توانید این پروژه را گسترش دهید و ویژگی‌های جدیدی مانند ثبت رکوردها، تنظیمات زمان‌بندی، یا تغییرات ظاهری اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی "سرعت تایپ" (Speed Typer) با استفاده از JavaScript و HTML می‌باشد