update js

master
sundowndev 2017-12-09 06:10:14 +01:00
parent cf6161317a
commit 9a0df65f8f
5 changed files with 461 additions and 215 deletions

197
assets/js/nano.js Normal file
View File

@ -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();
}
});
}

View File

@ -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';
});

View File

@ -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>

BIN
lazer.mp3 Normal file

Binary file not shown.

BIN
song.mp3 Normal file

Binary file not shown.