update js

assets/css/style.css

@@ -151,8 +151,6 @@ body{
     animation: cibleBroken 0.3s 3;
 }
 
-<<<<<<< Updated upstream
-=======
 .cible{
     background: url(../img/bg_cible.png) no-repeat;
 }
@@ -162,7 +160,6 @@ body{
     animation: cibleBroken 0.3s 3;
 }
 
->>>>>>> Stashed changes
 @keyframes cibleBroken{
     0%{
         opacity: 1;

assets/js/script.js

@@ -3,10 +3,16 @@ var player = document.querySelector('#player');
 var maxX = document.querySelectorAll('.line-1 .col').length;
 var maxY = document.querySelectorAll('.line').length;
 
+var score = document.querySelectorAll('.textScore');
+
+score.forEach(function(e){
+    e.textContent = 0;
+});
+
 var x = 1;
 var y = 5;
 var cibleValue = 0;
-var score = 0;
+var playing = true;
 
 var controls = {
     up: 'z',
@@ -28,6 +34,12 @@ var bulletX = 0;
 var bulletY = 0;
 var bulletDir = direction;
 
+function set_score (){
+    score.forEach(function(e){
+    e.textContent = 0;
+});
+}
+
 function setPosition (posX, posY, dir) {
     gridX = x;
     gridY = y;
@@ -94,6 +106,7 @@ function tirer () {
 function move(event) {
     var k = event.key;
     
+    if(playing == true){
         if(k == controls.up && y > 1){
             var newY = y-1;
             setPosition(x, newY, rotation.up);
@@ -110,6 +123,9 @@ function move(event) {
             event.preventDefault();
             tirer();
         }
+    }else{
+        return;
+    }
 }
 
 setInterval(function(){
@@ -126,8 +142,9 @@ setInterval(function(){
     if(bulletDestination.classList.contains('cible')){
         bulletDestination.classList.remove('cible');
         cibleValue = cibleValue - 1;
-        score = score + 100 ;
-        console.log(score);
+        score.forEach(function(e){
+            e.textContent = Number(e.textContent)+100;
+        });
         bulletDestination.classList.add('cible-touchee');
         bulletX = 0;
         bulletY = 0;
@@ -173,8 +190,9 @@ setInterval(function(){
     if(bulletDestination.classList.contains('cible')){
         bulletDestination.classList.remove('cible');
         cibleValue = cibleValue - 1;
-        score = score + 100 ;
-        console.log(score);
+        score.forEach(function(e){
+            e.textContent = Number(e.textContent)+100;
+        });
         bulletDestination.classList.add('cible-touchee');
         bulletX = 0;
         bulletY = 0;
@@ -194,11 +212,11 @@ setInterval(function(){
 }, 32.12);
 
 var ntm = setInterval(function(){ 
-    x2 = Math.floor(Math.random() * 11);
+    x2 = Math.floor(Math.random() * 10) + 1;
     if (x2 == x){
         x2 = x+1;
     }
-    y2 = Math.floor(Math.random() * 21);
+    y2 = Math.floor(Math.random() * 20) + 1;
     if (y2 == y){
         y2 = y+1;
     }
@@ -215,11 +233,18 @@ var ntm = setInterval(function(){
         emplacement.classList.add('cible');
         cibleValue = cibleValue + 1;
    if (cibleValue>=4){
-        // game over
-        console.log("TAS PERDU");
+        var gameover = document.querySelector('.gameover');
+        gameover.style.display = 'block';
+        playing = false;
         clearInterval(ntm);
     }
-}, 1000);
+}, 1600);
 
 document.addEventListener('keydown', move, false);
 setPosition(x, y, direction);
+
+var replay = document.querySelector('.replay');
+
+replay.addEventListener('onclick', function(){
+    alert('test');
+});

index.html

@@ -13,12 +13,12 @@
         <section class="map">
            <div class="score">
                <h3>SCORE</h3>
-               <h5>999</h5>
+               <h5><span class="textScore"></span></h5>
            </div>
            <div class="gameover">
                <h1>GAME OVER</h1>
-               <h4>Votre score : 999</h4>
-               <a href="#">Rejouer</a>
+               <h4>Votre score : <span class="textScore"></span></h4>
+               <a href="#" class="replay">Rejouer</a>
            </div>
             <div class="line line-1">
                 <div class="col col-1"></div>
@@ -206,7 +206,7 @@
                 <div class="col col-7"></div>
                 <div class="col col-8"></div>
                 <div class="col col-9"></div>
-                <div class="col col-10 cible-touchee"></div>
+                <div class="col col-10"></div>
                 <div class="col col-11"></div>
                 <div class="col col-12"></div>
                 <div class="col col-13"></div>