diff --git a/assets/js/nano.js b/assets/js/nano.js
new file mode 100644
index 0000000..bc69e03
--- /dev/null
+++ b/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 = ''+this.options.current_timeline+' / '+this.options.timeline+'';
+ }
+
+ /* 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();
+ }
+ });
+}
diff --git a/assets/js/script.js b/assets/js/script.js
index dd99471..8809bed 100644
--- a/assets/js/script.js
+++ b/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 maxY = document.querySelectorAll('.line').length;
+ 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 playing = true;
-
-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 score = document.querySelectorAll('.textScore');
+
+ var gameover = document.querySelector('.gameover');
+ gameover.style.display = 'none';
+
+ var cibles = document.querySelectorAll('.cible');
+
+ if(cibles){
+ cibles.forEach(function(e){
+ e.classList.remove('cible');
+ });
}
- var grids = document.querySelectorAll('.col');
-
- grids.forEach(function(e){
- e.style.background = '';
- e.style.backgroundPosition = '';
+ score.forEach(function(e){
+ e.textContent = 0;
});
- 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';
- grid.style.backgroundPosition = direction;
-
- x = posX;
- y = posY;
-}
-
-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
+ var controls = {
+ up: 'z',
+ down: 's',
+ left: 'q',
+ right: 'd'
}
- if(posX < 1 || posX > maxX || posY < 1 || posY > maxY){
- return;
+ var rotation = {
+ up: '0px -50px',
+ down: '-50px -50px',
+ left: '-50px 0px',
+ right: '0px 0px'
}
- bulletX = posX;
- bulletY = posY;
- bulletDir = direction;
+ var direction = rotation.right;
- 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;
+ var bulletX = 0;
+ var bulletY = 0;
+ var bulletDir = direction;
- 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;
+ if(difficulty == 'easy'){
+ difficulty = 2000;
+ }else if(difficulty == 'hard'){
+ difficulty = 1400;
}
- 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;
+ function set_score (){
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;
- bulletY = 0;
- setTimeout(function(){
- bulletDestination.classList.remove('cible-touchee');
- bulletDestination.style.background = '';
- bulletDestination.style.backgroundPosition = '';
- }, 1000);
- return;
+
+ direction = dir;
+
+ grid.style.background = 'url(./assets/img/tank_bg.png) no-repeat';
+ grid.style.backgroundPosition = direction;
+
+ x = posX;
+ y = posY;
}
- switch(bulletDir){
- case rotation.up:
- newY--;
- break;
- case rotation.down:
- newY++;
- break;
- case rotation.left:
- newX--;
- break;
- case rotation.right:
- newX++;
- break;
+ 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){
+ 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 = '';
- grid.style.backgroundPosition = '';
+ 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');
+ }, 1000);
+ return;
+ }
- var bulletDestination = document.querySelector('.line-'+newY+' .col-'+newX);
+ bulletX = newX;
+ bulletY = newY;
- 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');
- }, 1000);
- return;
- }
+ var grid = document.querySelector('.line-'+bulletY+' .col-'+bulletX);
- bulletX = newX;
- bulletY = newY;
+ grid.style.background = 'url(./assets/img/bg_bullet.png) no-repeat';
+ 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';
- grid.style.backgroundPosition = bulletDir;
-}, 32.12);
+ if(ciblex < maxX && cibley < maxY){
+ console.log(ciblex+' pour '+maxX);
+ emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
+ emplacement.classList.add('cible');
+ }
-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;
- }
+ var ciblex = x2,
+ cibley = y2,
+ emplacement = document.querySelector(".line-"+ciblex+" .col-"+cibley);
+ emplacement.classList.add('cible');
+ cibleValue = cibleValue + 1;
+ if (cibleValue>=4){
+ gameover.style.display = 'block';
+ playing = false;
+ clearInterval(ntm);
+ }
+ }, difficulty);
- if(ciblex < maxX && cibley < maxY){
- console.log(ciblex+' pour '+maxX);
- 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);
+ 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';
});
\ No newline at end of file
diff --git a/index.html b/index.html
index bb66ac1..4455f9c 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
+
+
@@ -23,9 +25,9 @@
@@ -252,7 +254,23 @@
+
+
+
+
-
-
