كيفاش تصاوب jeu de math ب javascript
فهاد الدرس الجديد من سلسلة 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);
}
}
});
}