كيفاش تصاوب jeu de math ب javascript

imadbelasri Javascript
JS

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


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


1- الملف header.php

أول حاجة غادي تمشي ل wamp/www أو xampp/htdocs وغادي تزيد مجلد جديد تسميه math-game أو لي بغيتي من بعد غادي تزيد ملف تسميه header.php فيه الكود لي كيمكن من الربط مع ملفات css لي غادي نحتاجو الكود ديالو هو :

                                                    
                                                        <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Math Game</title>
</head>
<body>
                                                    
                                                

2- الملف footer.php

من بعد غادي تزيد ملف تسميه footer.php فيه الكود لي كيمكن من الربط مع ملف javascript لي غادي نزيدو من بعد و لي غادي نحتاجو الكود ديالو هو :

                                                        
                                                            </body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
                                                        
                                                    

3- الملف index.php

من بعد غادي تزيد ملف تسميه index.php لي هو الصفحة الرئيسية ديالنا ولي فيه l'interface html ولي فيها les elements HTML لي غادي نحتاجو وكل واحد منهم عندو واحد لid خاص به هو باش غادي نسترجعوهم فملف javascript وكاين bouton لي كيمكنا من بداية اللعب وles divs لي غادي تكون فيهم الإختيارات ديالنا وscore أي النتيجة لي حصل عليها المستخدم ولي حتى هما عندهم id خاص بهم هو باش غادي نسترجعوهم فملف javascript وكنزيدو ل header ديالنا هو ولfooter فالصفحة الرئيسية الكود ديال الملف هو :

                                                        
                                                            <?php include('header.php');?>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-2">
                <div class="game">
                    <div class="score pull-right">
                        <span class="text-danger">Score:</span><span class="label label-danger" id="scoreValue"></span>
                    </div>
                    <div class="fail" align="center">
                        <span id="fail">Incorrect</span>
                    </div>
                    <div class="success" align="center">
                        <span id="success">Correct</span>
                    </div>
                    <div class="game-over" align="center">
                        Game Over
                    </div>
                    <div class="operation">
                        <span id="operation"></span>
                    </div>
                    <div class="choice" align="center">
                        <p class="lead text-primary">Click sur la bonne réponse</p>
                    </div>
                    <div class="row choices">
                        <div class="col-md-3"><spaan id="choice-1"></span></div>
                        <div class="col-md-3"><spaan id="choice-2"></span></div>
                        <div class="col-md-3"><spaan id="choice-3"></span></div>
                        <div class="col-md-3"><spaan id="choice-4"></span></div>
                    </div>
                    <div class="form-group" align="center">
                        <button class="btn btn-primary newGame" id="newGame">Nouveau Jeu</button>
                    </div>
                    <div class="timeout pull-right">
                       <span id="time-left"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php include('footer.php');?>
                                                        
                                                    

4- الملف style.css

من بعد غادي تزيد ملف تسميه style.css غادي يكون فيه كود ديال css لي غادي يمكنا باش نزيدو des styles css للصفحة الرئيسية ديالنا الكود النهائي ديالو هو :

                                                        
                                                            body{
    background: #FFFFFE;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.game{
    background: #F0F4C3;
    height:600px;
    width:550px;
    margin: 100px;
    border-radius: 4px;
    box-shadow: 0px 4px 0px 0px #C9C9C9;
    padding:20px;
}
.operation{
    background: #D4E157;
    height:100px;
    width:450px;
    margin: 30px;
    margin-top: 100px;
    border-radius: 4px;
    padding:20px;
    text-align: center;
    font-size: 50px;
    z-index: 0;
}
.choice{
    background: pink;
    height:60px;
    width:400px;
    margin-left: 50px;
    border-radius: 4px;
    text-align: center;
    font-size: 20px;
    z-index: 0;
}
.choice p{
   padding: 15px;
   z-index: 0;
}
.choices{
    width:400px;
    margin-left: 50px;
    margin-top: 70px;
    text-align: center;
    font-size: 20px;
    z-index: 0;
}
#choice-1,#choice-2,#choice-3,#choice-4{
    background: green;
    height:60px;
    width:60px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    color: #FFFFFE;
    z-index: 0;
}
#choice-1:hover,#choice-2:hover,#choice-3:hover,#choice-4:hover{
    background: #D4E157;
    height:60px;
    width:60px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    color: #000;
    cursor: pointer;
    z-index: 0;
}
.fail{
    background: red;
    height:25px;
    width:100px;
    border-radius: 4px;
    text-align: center;
    color: #FFFFFE;
    text-align: center;
    display: none;
}
.success{
    background: green;
    height:25px;
    width:100px;
    border-radius: 4px;
    text-align: center;
    color: #FFFFFE;
    text-align: center;
    display: none;
}
.newGame{
    margin-top:50px;
    z-index: 0;
}
.timeout p{
    height:50px;
    width:250px;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    color: #FFFFFE;
    text-align: center;
}
#time-left{
    height:40px;
    width:40px;
    padding: 15px;
    border-radius: 4px;
    background: #000;
    text-align: center;
    color: #FFFFFE;
    text-align: center;
    display: none;
}
.game-over{
    background:orange;
    height:200px;
    width:500px;
    border-radius: 4px;
    padding:60px;
    position: absolute;
    text-align: center;
    font-size: 50px;
    color: #FFFFFE;
    top: 250px;
    left: 140px;
    z-index: 1;
    display: none;
}
                                                        
                                                    

5- الملف script.js

من بعد غادي تزيد ملف تسميه script.js غادي يكون فيه الكود javascript لي هو الأساس فاولا كنديكلاري les variables لي غادي نحتاج من بعد كاين الكود لي كيتنفد مني كنكليكي على ل bouton nouveau jeu ولي كنسترجعو بل id ديالو ولي كنتحقق فيه يلا كانت اللعبة جارية فقط كاندير refresh للصفحة مكانتش كنعاود كلشي من الزيرو وكنعيط لل fonction starTime لي كتبدا العد ولل fonction randomQuestions لي كتبدا فعرض عمليات عشوائية منبعد كاين fonction starTime لي كتخدم بل fonction setInterval باش كنبدا العد بالثواني وكتبدا ل variable count لي واخدة 60 ثانية فالتناقص وكتعرض فل element مول ل id time-left منبعد ملي كيوصل العد للزيرو كنعرض الميساج game over لي كنسترجعو بل id ديالو ولي par défaut فالملف css عاطيينو ف display:none يعني مخفي مكيبانش وكنحبس العد وكنعاود كلشي من الزيرو منبعد كاين randomQuestions لي كتعرض عمليات عشوائية اولا كن créer جوج أرقام عشوائية ما بين 1 و 9 بواسطة Math.floor(Math.random()*9)+1; منبعد كنعرضهم فل element operation لي استرجعتو بل id ديالو منبعد كن créer رقم عشوائي ما بين 1 و 4 بواسطة Math.floor(Math.random()*3)+1; ولي غادي يكون هو ل position ديال الإجابة الصحيحة وكنعرضها فل element choice منبعد كنخدم ب for باش كنعرض أرقام عشوائية فles elements choice لخرين لي غادي تكون فيهم نتائج مشي صحيحة وكندير جدول كيجمع كل رقم تعرض من قبل باش ما يتعاودش جوج مرات من بعد كنخدم ب for باش كل اختيار كليكا عليه المستخدم كن tester القيمة ديالو يلا كانت كاتساوي الإجابة الصحيحة كنعرض correct وكنعرض عملية أخرى جديدة وكنزيدلو واحد ف score مكنتش كنعرض incorrect الكود ديال الملف هو:

                                                        
                                                            var playing = false;
var score = 0;
var countdown;
var count;
var incorrectAnswer;
var correctAnswer;
//if click on new game
document.getElementById('newGame').addEventListener('click',function(){
    if(playing === true){
        location.reload();
    }else{
        playing = true;
        score = 0;
        count = 60;
        document.querySelector('.game-over').style.display = 'none';
        document.getElementById('scoreValue').innerHTML = 0;
        document.getElementById('time-left').style.display = 'block';
        document.getElementById('newGame').innerHTML = 'Reinitialiser';
        //start time
        starTime();
        randomQuestions();
    }
});
function starTime(){
    countdown = setInterval(function(){
        count-=1;
        document.getElementById('time-left').innerHTML = count;
        if(count === 0){
            clearInterval(countdown);
            playing = false;
            document.querySelector('.game-over').style.display = 'block';
            document.getElementById('time-left').style.display = 'none';
            document.getElementById('.time-left').style.display = 'none';
            document.getElementById('time-left').style.display = 'none';
            document.getElementById('newGame').innerHTML = 'Nouveau Jeu';
        }
    },1000);
}
function randomQuestions(){
    var x = Math.floor(Math.random()*9)+1;
    var y = Math.floor(Math.random()*9)+1;
    correctAnswer = x*y;
    document.getElementById('operation').innerHTML = x + "X" + y;
    var position = Math.floor(Math.random()*3)+1;
    document.getElementById('choice-'+position).innerHTML = correctAnswer;
    for(var i = 1;i < 5;i++){
        if(i !== position){
            incorrectAnswer;
            var answers = [correctAnswer];
            do{
               incorrectAnswer = Math.floor(Math.random()*9)+1 *  Math.floor(Math.random()*9)+1;
            }while(answers.lastIndexOf(incorrectAnswer) > -1);
            document.getElementById('choice-'+i).innerHTML = incorrectAnswer;
            answers.push(incorrectAnswer);
        }
    }
}
for(var i = 1;i < 5;i++){
    document.getElementById('choice-'+i).addEventListener('click',function(){
    if(playing){
        if(this.innerHTML == correctAnswer){
            score++;
            document.getElementById('scoreValue').innerHTML = score;
            document.querySelector('.fail').style.display = 'none';
            document.querySelector('.success').style.display = 'block';
            setTimeout(function(){
                document.querySelector('.success').style.display = 'none';
            },1000);
            randomQuestions();
        }else{
            document.querySelector('.success').style.display = 'none';
            document.querySelector('.fail').style.display = 'block';
            setTimeout(function(){
                document.querySelector('.fail').style.display = 'none';
            },1000); 
        }
    }
});
}
                                                        
                                                    

دروس ذات صلة

JS

كيفاش نصاوب إختبار بإستعمال Javascript

فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأ...


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

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


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

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


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

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


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...