لعبة تخمينات بالجافاسكريبت للمبتدئين


فهاد الدرس الجديد من سلسلة javascript غادي نشوفوا كيفاش نقادو واحد اللعبة بسيطة لي كتمكن المستخدم من أنه يتوقع رقم من واحد لعشرة وعندوا 3 دالمحاولات باش يعرف الرقم الصحيح فيلا تعرف عليه كنعرض رسالة نجاح معرفوش كنعرض رسالة خطأ فهاد الدرس بسيط لأي مبتدئ فالجافاسكريبت.

نظرة سريعة بالفيديو

1- الملف index.php

فأول حاجة زيد projet جديد سميه لي بغيتي منبعد فيه زيد 3 ديال les fichiers index.html, style.css, main.js منبعد فال fichier index.html عندنا structure html فكنزيد روابط css هنا خدمت ب bootstrap 4 منبعد كنزيد ل fichier style.css منبعد عندي card لي عطيتها id game لي غادي نحتاجوه فل main.js منبعد عندي ل form فيها le champ ول bouton ولي حتى هما عطيتهم des ids منبعد عندي div عطيتها id message فيها غادي يتعرضوا les messages ديالنا  الكود ديال الملف هو:

                                <!doctype html>
<html lang="en" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>توقع الرقم الصحيح</title>
  </head>
  <body class="bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card text-center mt-3 bg-light border-success">
                    <div class="card-body" id="game">
                        <h2 class="card-title text-default">توقع الرقم الصحيح</h2>
                        <form id="form" class="mt-3">
                            <div class="form-group">
                                <input type="number" name="number" id="number" class="form-control" value="0" placeholder="أدخل رقم من 1 ل 10">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-block btn-default" id="submit" class="submit">تأكيد</button>
                            </div>
                        </form>
                        <hr>
                        <div id="results">
                            <p id="message"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
                            

2- الملف main.js

فالملف main.js كنسترجع les éléments كاملين بل id ديالهم منبعد عندي des variables فيهم أصغر عدد وأكبر عدد خص المستخدم يدخل منبعد كاين عدد المحاولات وكاين الرقم الرابح لي كنحددهم بل fonction Math.random لي كتعطينا رقم عشوائي ما بين 0 و1 وكنضربها ف 10 ونزيد عليها 1 باش كتعطيني رقم ما بين 1 و 10 منبعد ف event click ديال ل bouton كنسترجع الرقم لي دخل المستخدم فالحقل منبعد كنتحقق بلي الرقم صغر من اكبر رقم لي هو 10 وماشي صغر من 1 منبعد كنتحقق واش كيساوي الرقم الرابح يلا كان كنبلوكي الحقل وال card كنزيدلها ل background خضر بل classe bg-success ديال bootstrap منبعد كنعرض ميساج ف div message بلي المستخدم ربح وكنبدل texte ديال ال bouton كنرجعوا العب مرة اخرى منبعد عندي fonction clearMessage لي كتمسح الميساج منبعد مكتدوز 10 دالثواني ويلا مكانش الرقم صحيح كنقص من عدد المحاولات لي هو 3 وكنعرض ميساج بلي الرقم غالط مع عدد المحاولات لي باقيين ويلا عدد المحاولات وصل لصفر كنبلوكي الحقل وكنعرض رسالة بلي المستخدم خسر  وال card كنزيدلها ل background حمر بل classe bg-danger ديال bootstrap منبعد كنعرض ميساج ف div message بلي المستخدم خسر وكنبدل texte ديال ال bouton كنرجعوا العب مرة اخرى منبعد عندي fonction clearMessage لي كتمسح الميساج منبعد مكتدوز 10 دالثواني ويلا مدخل المستخدم حتى شي رقم كنعرض رسالة كتقولو دخل رقم ما بين 1 و 10 وفالأخير كنسترجع ل card بل id ديالها لي هو game وكنزيدلها ل event mousedown ولي هو ملي كنكليكي على la souris فكنتحقق يلا كان ل bouton فيه ل classe play-again كندير actualiser ل la page الكود ديال الملف هو : 
 عدد

                                const game = document.querySelector('#game');
const button = document.querySelector('#submit');
const inputField = document.querySelector('#number');
const message = document.querySelector('#message');
const card = document.querySelector('.card-body');

let min = 1,
    max = 10,
    win = Math.floor(Math.random() * 10) + 1;
    console.log(win);
    guesses = 3;

button.addEventListener('click',function(e){
    let numberGuessed = parseInt(inputField.value);
    console.log(numberGuessed);
    //validate number
    if(numberGuessed <= max && numberGuessed >= min){
        //check if wining 
        if(numberGuessed === win){
            inputField.disabled = true;
            inputField.style.borderColor = 'green';
            card.className += ' bg-success';
            document.querySelector('#message').textContent = ' الجواب صحيح لقد ربحت';
            document.querySelector('#message').style.color = 'white';
            button.textContent = 'ألعب مرة أخرى';
            button.className += ' play-again';
            clearMessage();
        }else{
            guesses--;
            document.querySelector('#message').textContent = `الجواب خطأ باقي ${guesses} محاولات`;
            document.querySelector('#message').style.color = 'red';
            if(guesses === 0){
                inputField.disabled = true;
                inputField.style.borderColor = 'red';
                document.querySelector('#message').textContent = `انتهت اللعبة لقد خسرت حاول مرة أخرى الجواب الصحيح كان هو ${win}`;
                document.querySelector('#message').style.color = 'white';
                button.textContent = 'ألعب مرة أخرى';
                button.className += ' play-again';
                card.className += ' bg-danger';
                clearMessage();
            }
        }
    }else{
        document.querySelector('#message').textContent = 'المرجو إدخال رقم بين 1 و 10';
        document.querySelector('#message').style.color = 'red';
        clearMessage();
    }
    
    e.preventDefault(); 
});
//play again
game.addEventListener('mousedown',function(e){
    if(e.target.classList.contains('play-again')){
        window.location.reload();
    }
});
function clearMessage(){
    setTimeout(function(){
        document.querySelector('#message').textContent = '';
    },10000);
}
                            

3- الملف style.css

فالملف style.css كنزيد des styles css لي غادي يديرو تغييرات بسيطة على ل app ديالنا الكود ديال الملف هو :

                                body{
    background: #C9C9C9;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 30px;
}
.form-control,
.btn{
    border-radius: 0;
}
                            


بحث في الموقع


إشترك للتوصل بالجديد