update js

assets/js/nano.js

@@ -0,0 +1,197 @@
+/*
+ * nano.js * Audio Player library
+ * by SundownDEV
+ * version 1.0.0
+ */
+
+function nanoPlayer(player, options) {
+    this.player = document.querySelector(player);
+    this.options = options;
+    
+    /* Adding additional params */
+    if(this.options.DefaultSong !== 'undefined'){
+        this.options.index = this.options.DefaultSong;
+    }else{
+        this.options.index = 0;
+    }
+    
+    this.options.current_timeline = '00:00';
+    this.options.timeline = '00:00';
+    this.options.playing = false;
+    
+    /* Init the player */
+    var audioTag = document.createElement('audio');
+    this.player.appendChild(audioTag);
+    audioTag.preload = 'auto';
+    
+    var mainDiv = document.createElement('div');
+    mainDiv.classList.add('mainDiv');
+    this.player.appendChild(mainDiv);
+    
+    /* Play button */
+    var pButton = document.createElement('button');
+    pButton.classList.add('pButton');
+    mainDiv.appendChild(pButton);
+    pButton.innerHTML = 'play';
+    
+    /* Timeline element */
+    var timeline = document.createElement('div');
+    timeline.classList.add('timeline');
+    mainDiv.appendChild(timeline);
+    
+    var progress = document.createElement('div');
+    progress.classList.add('progress');
+    timeline.appendChild(progress);
+    
+    var loaded = document.createElement('div');
+    loaded.classList.add('loaded');
+    timeline.appendChild(loaded);
+    
+    /* Song duration element */
+    var timer = document.createElement('div');
+    timer.classList.add('timer');
+    mainDiv.appendChild(timer);
+    
+    /* Volume control element */
+    var volumeControl = document.createElement('div');
+    volumeControl.classList.add('volumeControl');
+    this.player.appendChild(volumeControl);
+    
+    /* functions */
+    this.setSong = function(id){
+        this.options.index = id;
+        audio.src = this.options.songList[id].path;
+        audio.load();
+    }
+    
+    this.play = function(){
+        audio.play();
+        pButton.innerHTML = 'pause';
+    }
+    
+    this.pause = function(){
+        audio.pause();
+        pButton.innerHTML = 'play';
+    }
+    
+    this.stop = function(){
+        audio.pause();
+        audio.currentTime = 0;
+        pButton.innerHTML = 'play';
+        options.playing = false;
+    }
+    
+    this.prev = function(){
+        if(options.songList.indexOf(options.songList[options.index]) != 0){
+            options.index -= 1;
+            this.setSong(options.index);
+            this.stop();
+            
+            if(options.playing === true){
+                this.play();
+            }else{
+                this.stop();
+            }
+        }else if(options.playing === false){
+            this.stop();
+        }
+    }
+    
+    this.next = function(){
+        if(options.songList.indexOf(options.songList[options.index]) != options.songList.length - 1){
+            options.index += 1;
+            this.setSong(options.index);
+            this.pause();
+            
+            if(options.playing === true){
+                this.play();
+            }else{
+                this.pause();
+            }
+        }else{
+            this.stop();
+        }
+    }
+    
+    this.setVolume = function(vol){
+        audio.volume = vol * 0.01; // round 100 to 1
+    }
+    
+    var getCurrentTimerPourcentage = function(){
+        //audio.currentTime/audio.duration
+        //timeline.style.width = '40%';
+    }
+    
+    var getCurrentTimerSec = function(){
+        //audio.currentTime/audio.duration
+        
+        timeline.style.width = '40%';
+    }
+    
+    var setDuration = function(duration){
+        var minutes = "0" + Math.floor(duration / 60);
+        var seconds = "0" + (Math.floor(duration) - minutes * 60);
+        options.timeline = minutes.substr(-2) + ":" + seconds.substr(-2);
+    }
+    
+    this.setCurrentTimer = function(currentTime){
+        var minutes = "0" + Math.floor(currentTime / 60);
+        var seconds = "0" + (Math.floor(currentTime) - minutes * 60);
+        this.options.current_timeline = minutes.substr(-2) + ":" + seconds.substr(-2);
+    }
+    
+    this.refreshTimer = function(){
+        this.setCurrentTimer(audio.currentTime);
+        
+        timer.innerHTML = '<span class="played">'+this.options.current_timeline+'</span> / <strong class="duration">'+this.options.timeline+'</strong>';
+    }
+    
+    /* Create the audio object */
+    var audio = new Audio();
+    
+    this.setSong(this.options.index);
+    this.setVolume(this.options.defaultVolume);
+    
+    audio.addEventListener('canplay', function() {
+        setDuration(audio.duration);
+        nanoPlayer.refreshTimer();
+    });
+    
+    /* Using params */
+    if(this.options.autoplay === true){
+        this.play();
+    }
+    
+    /* triggering elements */
+    pButton.addEventListener('click', function(){
+        if(options.playing === false){
+            nanoPlayer.play();
+            options.playing = true;
+        }else{
+            nanoPlayer.pause();
+            options.playing = false;
+        }
+    });
+    
+    timeline.addEventListener('click', function(){
+        //mettre à jour progress bar en fonction du clic
+        //maj le timer
+        //console.log('test1');
+    });
+    
+    audio.addEventListener("playing", function(){
+        nanoPlayer.options.playing = true;
+    });
+    
+    audio.addEventListener("timeupdate", function(){
+        nanoPlayer.refreshTimer();
+    });
+    
+    audio.addEventListener("ended", function(){
+        if(options.loop === true && options.songList.indexOf(options.songList[options.index]) == options.songList.length - 1){
+            nanoPlayer.play();
+        }else{
+            nanoPlayer.next();
+        }
+    });
+}

assets/js/script.js

@@ -1,46 +1,64 @@
-var player = document.querySelector('#player');
+function run (difficulty) {
+    var player = document.querySelector('#player');
 
-var maxX = document.querySelectorAll('.line-1 .col').length;
-var maxY = document.querySelectorAll('.line').length;
+    var maxX = document.querySelectorAll('.line-1 .col').length;
+    var maxY = document.querySelectorAll('.line').length;
 
-var score = document.querySelectorAll('.textScore');
+    var score = document.querySelectorAll('.textScore');
     
-score.forEach(function(e){
+    var gameover = document.querySelector('.gameover');
+    gameover.style.display = 'none';
+    
+    var cibles = document.querySelectorAll('.cible');
+    
+    if(cibles){
+        cibles.forEach(function(e){
+            e.classList.remove('cible');
+        });
+    }
+
+    score.forEach(function(e){
         e.textContent = 0;
-});
+    });
 
-var x = 1;
-var y = 5;
-var cibleValue = 0;
-var playing = true;
+    var x = 1;
+    var y = 5;
+    var cibleValue = 0;
+    var playing = true;
 
-var controls = {
+    var controls = {
         up: 'z',
         down: 's',
         left: 'q',
         right: 'd'
-}
+    }
 
-var rotation = {
+    var rotation = {
         up: '0px -50px',
         down: '-50px -50px',
         left: '-50px 0px',
         right: '0px 0px'
-}
+    }
 
-var direction = rotation.right;
+    var direction = rotation.right;
 
-var bulletX = 0;
-var bulletY = 0;
-var bulletDir = direction;
+    var bulletX = 0;
+    var bulletY = 0;
+    var bulletDir = direction;
     
-function set_score (){
+    if(difficulty == 'easy'){
+        difficulty = 2000;
+    }else if(difficulty == 'hard'){
+        difficulty = 1400;
+    }
+
+    function set_score (){
         score.forEach(function(e){
         e.textContent = 0;
-});
-}
+    });
+    }
 
-function setPosition (posX, posY, dir) {
+    function setPosition (posX, posY, dir) {
         gridX = x;
         gridY = y;
 
@@ -64,13 +82,13 @@ function setPosition (posX, posY, dir) {
 
         x = posX;
         y = posY;
-}
+    }
 
-function getPosition () {
+    function getPosition () {
         return [x, y];
-}
+    }
 
-function tirer () {
+    function tirer () {
         var posX = x;
         var posY = y;
 
@@ -101,9 +119,9 @@ function tirer () {
 
         grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
         grid.style.backgroundPosition = bulletDir;
-}
+    }
 
-function move(event) {
+    function move(event) {
         var k = event.key;
 
         if(playing == true){
@@ -126,9 +144,9 @@ function move(event) {
         }else{
             return;
         }
-}
+    }
 
-setInterval(function(){
+    setInterval(function(){
         console.log('test');
         if(bulletX == 0 || bulletY == 0){
             return;
@@ -209,9 +227,9 @@ setInterval(function(){
 
         grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
         grid.style.backgroundPosition = bulletDir;
-}, 32.12);
+    }, 32.12);
 
-var ntm = setInterval(function(){ 
+    var ntm = setInterval(function(){ 
         x2 = Math.floor(Math.random() * 10) + 1;
         if (x2 == x){
             x2 = x+1;
@@ -233,18 +251,31 @@ var ntm = setInterval(function(){
             emplacement.classList.add('cible');
             cibleValue = cibleValue + 1;
        if (cibleValue>=4){
-        var gameover = document.querySelector('.gameover');
             gameover.style.display = 'block';
             playing = false;
             clearInterval(ntm);
         }
-}, 1600);
+    }, difficulty);
 
-document.addEventListener('keydown', move, false);
-setPosition(x, y, direction);
+    document.addEventListener('keydown', move, false);
+    setPosition(x, y, direction);
+}
 
 var replay = document.querySelector('.replay');
+var easy = document.querySelector('.play.easy');
+var hard = document.querySelector('.play.hard');
+var startmenu = document.querySelector('.startmenu');
 
-replay.addEventListener('onclick', function(){
-    alert('test');
+replay.addEventListener('click', function(){
+    run('easy');
+});
+
+easy.addEventListener('click', function(){
+    run('easy');
+    startmenu.style.display = 'none';
+});
+
+hard.addEventListener('click', function(){
+    run('hard');
+    startmenu.style.display = 'none';
 });

index.html

@@ -6,6 +6,8 @@
 </head>
 
 <body>
+    <div class="nano-player" style="display: none"></div>
+   
     <section class="header">
         <h1>de_tank</h1>
     </section>
@@ -23,9 +25,9 @@
             <div class="startmenu">
                 <h1>DE_TANK</h1>
                 <h4>Vous devez détruire les cibles,<br><br> si plus de 3 cibles sont affichées c'est PERDU.</h4>
-                <a href="#" class="play">Facile</a>
+                <a href="#" class="play easy">Facile</a>
                 <br><br>
-                <a href="#" class="play">Pas facile</a>
+                <a href="#" class="play hard">Pas facile</a>
                 <img src="assets/img/tank.png" alt="tank">
             </div>
             <div class="line line-1">
@@ -252,7 +254,23 @@
     </div>
     <div class="background"></div>
     
-</body>
-<script src="assets/js/script.js"></script>
+    <script src="./assets/js/nano.js"></script>
+    <script src="assets/js/script.js"></script>
     
+    <script>
+        var nanoPlayer = new nanoPlayer('.nano-player', {
+            // Parameters
+            autoplay: true,
+            loop: true,
+            defaultVolume: 100,
+            songList: [
+                {
+                    name: 'musique',
+                    path: 'song.mp3'
+                }
+            ],
+            DefaultSong: 0
+        })
+    </script>
+</body>
 </html>