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,250 +1,281 @@
-var player = document.querySelector('#player');
+function run (difficulty) {
+    var player = document.querySelector('#player');
 
-var maxX = document.querySelectorAll('.line-1 .col').length;
+    var maxX = document.querySelectorAll('.line-1 .col').length;
-var maxY = document.querySelectorAll('.line').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');
-    e.textContent = 0;
+    gameover.style.display = 'none';
-});
+    
-
+    var cibles = document.querySelectorAll('.cible');
-var x = 1;
+    
-var y = 5;
+    if(cibles){
-var cibleValue = 0;
+        cibles.forEach(function(e){
-var playing = true;
+            e.classList.remove('cible');
-
+        });
-var controls = {
-    up: 'z',
-    down: 's',
-    left: 'q',
-    right: 'd'
-}
-
-var rotation = {
-    up: '0px -50px',
-    down: '-50px -50px',
-    left: '-50px 0px',
-    right: '0px 0px'
-}
-
-var direction = rotation.right;
-
-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;
-
-    var grid = document.querySelector('.line-'+posY+' .col-'+posX);
-
-    if(grid.classList.contains('cible')){
-        return;
     }
 
-    var grids = document.querySelectorAll('.col');
+    score.forEach(function(e){
-
+        e.textContent = 0;
-    grids.forEach(function(e){
-        e.style.background = '';
-        e.style.backgroundPosition = '';
     });
 
-    direction = dir;
+    var x = 1;
+    var y = 5;
+    var cibleValue = 0;
+    var playing = true;
 
-    grid.style.background = 'url(./assets/img/tank_bg.png) no-repeat';
+    var controls = {
-    grid.style.backgroundPosition = direction;
+        up: 'z',
-
+        down: 's',
-    x = posX;
+        left: 'q',
-    y = posY;
+        right: 'd'
-}
-
-function getPosition () {
-    return [x, y];
-}
-
-function tirer () {
-    var posX = x;
-    var posY = y;
-
-    switch(direction){
-        case rotation.up:
-            posY--;
-            break
-            case rotation.down:
-            posY++;
-            break
-            case rotation.left:
-            posX--;
-            break
-            case rotation.right:
-            posX++;
-            break
     }
 
-    if(posX < 1 || posX > maxX || posY < 1 || posY > maxY){
+    var rotation = {
-        return;
+        up: '0px -50px',
+        down: '-50px -50px',
+        left: '-50px 0px',
+        right: '0px 0px'
     }
 
-    bulletX = posX;
+    var direction = rotation.right;
-    bulletY = posY;
-    bulletDir = direction;
 
-    var grid = document.querySelector('.line-'+posY+' .col-'+posX);
+    var bulletX = 0;
-
+    var bulletY = 0;
-    grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
+    var bulletDir = direction;
-    grid.style.backgroundPosition = bulletDir;
-}
-
-function move(event) {
-    var k = event.key;
     
-    if(playing == true){
+    if(difficulty == 'easy'){
-        if(k == controls.up && y > 1){
+        difficulty = 2000;
-            var newY = y-1;
+    }else if(difficulty == 'hard'){
-            setPosition(x, newY, rotation.up);
+        difficulty = 1400;
-        } else if (k == controls.down && y < maxY){
-            var newY = y+1;
-            setPosition(x, newY, rotation.down);
-        } else if (k == controls.left && x > 1){
-            var newX = x-1;
-            setPosition(newX, y, rotation.left);
-        } else if (k == controls.right && x < maxX){
-            var newX = x+1;
-            setPosition(newX, y, rotation.right);
-        } else if (event.keyCode == 32){
-            event.preventDefault();
-            tirer();
-        }
-    }else{
-        return;
-    }
-}
-
-setInterval(function(){
-    console.log('test');
-    if(bulletX == 0 || bulletY == 0){
-        return;
     }
 
-    var newY = bulletY;
+    function set_score (){
-    var newX = bulletX;
-
-    var bulletDestination = document.querySelector('.line-'+newY+' .col-'+newX);
-
-    if(bulletDestination.classList.contains('cible')){
-        bulletDestination.classList.remove('cible');
-        cibleValue = cibleValue - 1;
         score.forEach(function(e){
-            e.textContent = Number(e.textContent)+100;
+        e.textContent = 0;
+    });
+    }
+
+    function setPosition (posX, posY, dir) {
+        gridX = x;
+        gridY = y;
+
+        var grid = document.querySelector('.line-'+posY+' .col-'+posX);
+
+        if(grid.classList.contains('cible')){
+            return;
+        }
+
+        var grids = document.querySelectorAll('.col');
+
+        grids.forEach(function(e){
+            e.style.background = '';
+            e.style.backgroundPosition = '';
         });
-        bulletDestination.classList.add('cible-touchee');
+
-        bulletX = 0;
+        direction = dir;
-        bulletY = 0;
+
-        setTimeout(function(){
+        grid.style.background = 'url(./assets/img/tank_bg.png) no-repeat';
-            bulletDestination.classList.remove('cible-touchee');
+        grid.style.backgroundPosition = direction;
-            bulletDestination.style.background = '';
+
-            bulletDestination.style.backgroundPosition = '';
+        x = posX;
-        }, 1000);
+        y = posY;
-        return;
     }
 
-    switch(bulletDir){
+    function getPosition () {
-        case rotation.up:
+        return [x, y];
-            newY--;
-            break;
-        case rotation.down:
-            newY++;
-            break;
-        case rotation.left:
-            newX--;
-            break;
-        case rotation.right:
-            newX++;
-            break;
     }
 
+    function tirer () {
+        var posX = x;
+        var posY = y;
+
+        switch(direction){
+            case rotation.up:
+                posY--;
+                break
+                case rotation.down:
+                posY++;
+                break
+                case rotation.left:
+                posX--;
+                break
+                case rotation.right:
+                posX++;
+                break
+        }
+
+        if(posX < 1 || posX > maxX || posY < 1 || posY > maxY){
+            return;
+        }
+
+        bulletX = posX;
+        bulletY = posY;
+        bulletDir = direction;
+
+        var grid = document.querySelector('.line-'+posY+' .col-'+posX);
+
+        grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
+        grid.style.backgroundPosition = bulletDir;
+    }
+
+    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);
+            } else if (k == controls.down && y < maxY){
+                var newY = y+1;
+                setPosition(x, newY, rotation.down);
+            } else if (k == controls.left && x > 1){
+                var newX = x-1;
+                setPosition(newX, y, rotation.left);
+            } else if (k == controls.right && x < maxX){
+                var newX = x+1;
+                setPosition(newX, y, rotation.right);
+            } else if (event.keyCode == 32){
+                event.preventDefault();
+                tirer();
+            }
+        }else{
+            return;
+        }
+    }
+
+    setInterval(function(){
+        console.log('test');
+        if(bulletX == 0 || bulletY == 0){
+            return;
+        }
+
+        var newY = bulletY;
+        var newX = bulletX;
+
+        var bulletDestination = document.querySelector('.line-'+newY+' .col-'+newX);
+
+        if(bulletDestination.classList.contains('cible')){
+            bulletDestination.classList.remove('cible');
+            cibleValue = cibleValue - 1;
+            score.forEach(function(e){
+                e.textContent = Number(e.textContent)+100;
+            });
+            bulletDestination.classList.add('cible-touchee');
+            bulletX = 0;
+            bulletY = 0;
+            setTimeout(function(){
+                bulletDestination.classList.remove('cible-touchee');
+                bulletDestination.style.background = '';
+                bulletDestination.style.backgroundPosition = '';
+            }, 1000);
+            return;
+        }
+
+        switch(bulletDir){
+            case rotation.up:
+                newY--;
+                break;
+            case rotation.down:
+                newY++;
+                break;
+            case rotation.left:
+                newX--;
+                break;
+            case rotation.right:
+                newX++;
+                break;
+        }
+
+
+        if(newY < 1 || newY > maxY || newX < 1 || newX > maxX){
+            var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
+
+            grid.style.background = '';
+            grid.style.backgroundPosition = '';
+            return;
+        }
 
-    if(newY < 1 || newY > maxY || newX < 1 || newX > maxX){
         var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
 
         grid.style.background = '';
         grid.style.backgroundPosition = '';
-        return;
-    }
 
-    var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
+        var bulletDestination = document.querySelector('.line-'+newY+' .col-'+newX);
 
-    grid.style.background = '';
+        if(bulletDestination.classList.contains('cible')){
-    grid.style.backgroundPosition = '';
+            bulletDestination.classList.remove('cible');
+            cibleValue = cibleValue - 1;
+            score.forEach(function(e){
+                e.textContent = Number(e.textContent)+100;
+            });
+            bulletDestination.classList.add('cible-touchee');
+            bulletX = 0;
+            bulletY = 0;
+            setTimeout(function(){
+                bulletDestination.classList.remove('cible-touchee');
+            }, 1000);
+            return;
+        }
 
-    var bulletDestination = document.querySelector('.line-'+newY+' .col-'+newX);
+        bulletX = newX;
+        bulletY = newY;
 
-    if(bulletDestination.classList.contains('cible')){
+        var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
-        bulletDestination.classList.remove('cible');
-        cibleValue = cibleValue - 1;
-        score.forEach(function(e){
-            e.textContent = Number(e.textContent)+100;
-        });
-        bulletDestination.classList.add('cible-touchee');
-        bulletX = 0;
-        bulletY = 0;
-        setTimeout(function(){
-            bulletDestination.classList.remove('cible-touchee');
-        }, 1000);
-        return;
-    }
 
-    bulletX = newX;
+        grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
-    bulletY = newY;
+        grid.style.backgroundPosition = bulletDir;
+    }, 32.12);
 
-    var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
+    var ntm = setInterval(function(){ 
+        x2 = Math.floor(Math.random() * 10) + 1;
+        if (x2 == x){
+            x2 = x+1;
+        }
+        y2 = Math.floor(Math.random() * 20) + 1;
+        if (y2 == y){
+            y2 = y+1;
+        }
 
-    grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
+        if(ciblex < maxX && cibley < maxY){
-    grid.style.backgroundPosition = bulletDir;
+            console.log(ciblex+' pour '+maxX);
-}, 32.12);
+            emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
+            emplacement.classList.add('cible');
+        }
 
-var ntm = setInterval(function(){ 
+        var ciblex = x2,
-    x2 = Math.floor(Math.random() * 10) + 1;
+            cibley = y2,
-    if (x2 == x){
+            emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
-        x2 = x+1;
+            emplacement.classList.add('cible');
-    }
+            cibleValue = cibleValue + 1;
-    y2 = Math.floor(Math.random() * 20) + 1;
+       if (cibleValue>=4){
-    if (y2 == y){
+            gameover.style.display = 'block';
-        y2 = y+1;
+            playing = false;
-    }
+            clearInterval(ntm);
+        }
+    }, difficulty);
 
-    if(ciblex < maxX && cibley < maxY){
+    document.addEventListener('keydown', move, false);
-        console.log(ciblex+' pour '+maxX);
+    setPosition(x, y, direction);
-        emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
+}
-        emplacement.classList.add('cible');
-    }
-
-    var ciblex = x2,
-        cibley = y2,
-        emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
-        emplacement.classList.add('cible');
-        cibleValue = cibleValue + 1;
-   if (cibleValue>=4){
-        var gameover = document.querySelector('.gameover');
-        gameover.style.display = 'block';
-        playing = false;
-        clearInterval(ntm);
-    }
-}, 1600);
-
-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(){
+replay.addEventListener('click', function(){
-    alert('test');
+    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>
     
+    <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>
-<script src="assets/js/script.js"></script>
-
 </html>