Big update (sounds + volume + copyright + responsive Desktop + tuto + fix)

master
orphevs 2017-12-09 16:50:37 +01:00
parent 193239b182
commit 1327c2fe8e
10 changed files with 245 additions and 46 deletions

View File

@ -76,8 +76,8 @@ body{
text-align: center;
position: absolute;
width: 100%;
height: 73%;
top: 0;
height: 72.7%;
top: 0px;
padding-top: 150px;
background: rgba(155, 0, 0, 0.85);
box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.75);
@ -144,6 +144,8 @@ body{
padding-top: 7px;
padding-bottom: 3px;
overflow: hidden;
width: 1140px;
height: 540px;
}
.line{
@ -195,11 +197,11 @@ body{
.startmenu{
text-align: center;
position: absolute;
position: relative;
width: 100%;
height: 73%;
top: 0;
padding-top: 150px;
height: 100%;
top: -7px;
padding-top: 60px;
background: rgba(0, 0, 0, 1);
box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.75);
z-index: 10;
@ -212,7 +214,7 @@ body{
font-size: 64px;
color: #fff;
margin: inherit;
padding-bottom: 60px;
padding-bottom: 40px;
animation: pulse 3s infinite;
}
@ -260,7 +262,7 @@ body{
color: #000;
}
.startmenu img{
.startmenu .tank{
width: 50%;
position: absolute;
left: -45px;
@ -270,6 +272,11 @@ body{
animation: tankPulse 3s infinite;
}
.startmenu .tuto{
max-width: 30%;
margin-bottom: 15px;
}
@keyframes tankPulse{
0%{
transform: rotate(0deg) scale(1);
@ -290,8 +297,169 @@ body{
position: absolute;
left: 15;
bottom: 15px;
cursor: pointer;
}
.mute-off{
background-position: 0px -64px;
}
.copyright{
color: #fff;
width: 100%;
position: absolute;
margin-top: 50px;
text-align: center;
margin-bottom: 30px;
}
.copyright ul{
margin: inherit;
padding: inherit;
padding-top: 10px;
margin-top: 0px;
}
.copyright ul li{
display: inline;
}
.copyright ul > li > a{
color: #fff;
font-size: 12px;
transition: 0.15s;
}
.copyright ul > li > a:hover{
color: green;
}
.volume{
position: absolute;
left: 100px;
bottom: 30px;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
opacity: 0.7;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #e7e7e7;
border-radius: 0px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 1px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #e7e7e7;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #e7e7e7;
border-radius: 0px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 1px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #e7e7e7;
border: 0px solid #000000;
border-radius: 0px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #e7e7e7;
border: 0px solid #000000;
border-radius: 0px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 1px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #e7e7e7;
}
input[type=range]:focus::-ms-fill-upper {
background: #e7e7e7;
}
@media (max-width: 1440px){
.map{
transform: scale(0.8);
}
.startmenu{
height: 490px;
}
.startmenu .tuto{
max-width: 40%;
margin-bottom: 15px;
}
.startmenu h1{
font-size: 38px;
padding-bottom: 30px;
}
.copyright{
color: #fff;
width: 100%;
position: absolute;
margin-top: 0px;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 1280px){
.header h1{
display: none;
}
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -140,6 +140,7 @@ function run (difficulty) {
} else if (event.keyCode == 32){
event.preventDefault();
tirer();
audio_tir.play();
}
}else{
return;
@ -147,7 +148,6 @@ function run (difficulty) {
}
setInterval(function(){
console.log('test');
if(bulletX == 0 || bulletY == 0){
return;
}
@ -212,6 +212,7 @@ function run (difficulty) {
e.textContent = Number(e.textContent)+100;
});
bulletDestination.classList.add('cible-touchee');
audio_touche.play();
bulletX = 0;
bulletY = 0;
setTimeout(function(){
@ -254,7 +255,9 @@ function run (difficulty) {
gameover.style.display = 'block';
playing = false;
clearInterval(ntm);
nanoPlayer.pause();
audio_musique.pause();
audio_musique.currentTime = 0.0;
audio_gameover.play();
}
}, difficulty);
@ -267,21 +270,36 @@ var startmenu = document.querySelector('.startmenu');
var easy = document.querySelector('.play.easy');
var hard = document.querySelector('.play.hard');
var mute = document.querySelector('#mute');
var volume = document.querySelector('.volume');
var audio_musique = new Audio();
audio_musique.src = 'assets/sounds/song.mp3';
var audio_tir = new Audio();
audio_tir.src = 'assets/sounds/laser.wav';
var audio_gameover = new Audio();
audio_gameover.src = 'assets/sounds/gameover.wav';
var audio_touche = new Audio();
audio_touche.src = 'assets/sounds/touche.wav';
replay.addEventListener('click', function(){
run('easy');
startmenu.style.display = 'block';
});
easy.addEventListener('click', function(){
run('easy');
startmenu.style.display = 'none';
nanoPlayer.play();
audio_musique.play();
volume.style.display = 'block';
});
hard.addEventListener('click', function(){
run('hard');
startmenu.style.display = 'none';
nanoPlayer.play();
audio_musique.play();
volume.style.display = 'block';
});
mute.addEventListener('click', function(e){
@ -289,9 +307,26 @@ mute.addEventListener('click', function(e){
if(mute.classList.contains('mute-off')){
mute.classList.remove('mute-off');
nanoPlayer.play();
volume.style.display = 'block';
audio_musique.play();
audio_tir.volume = 0.5;
audio_gameover.volume = 0.5;
audio_touche.volume = 0.5;
}else{
mute.classList.add('mute-off');
nanoPlayer.pause();
audio_musique.pause();
volume.style.display = 'none';
audio_tir.volume = 0;
audio_gameover.volume = 0;
audio_touche.volume = 0;
}
});
});
function SetVolume(val)
{
audio_musique.volume = val / 100;
audio_tir.volume = val / 100;
audio_gameover.volume = val / 100;
audio_touche.volume = val / 100;
}

BIN
assets/sounds/gameover.wav Normal file

Binary file not shown.

BIN
assets/sounds/laser.wav Normal file

Binary file not shown.

BIN
assets/sounds/touche.wav Normal file

Binary file not shown.

View File

@ -1,4 +1,5 @@
<html>
<head>
<meta charset="UTF-8">
<title>de_tank</title>
@ -6,31 +7,33 @@
</head>
<body>
<div class="nano-player" style="display: none"></div>
<section class="header">
<h1>de_tank</h1>
</section>
<div class="container">
<section class="map">
<div class="score">
<h3>SCORE</h3>
<h5><span class="textScore"></span></h5>
</div>
<div class="gameover">
<h1>GAME OVER</h1>
<h4>Votre score : <span class="textScore"></span></h4>
<a href="#" class="replay">Rejouer</a>
</div>
<div class="score">
<h3>SCORE</h3>
<h5><span class="textScore"></span></h5>
</div>
<div class="gameover">
<h1>GAME OVER</h1>
<h4>Votre score : <span class="textScore"></span></h4>
<a href="#" class="replay">Rejouer</a>
</div>
<div class="startmenu">
<h1>DE_TANK</h1>
<img class="tuto" src="assets/img/keyboard-de_tank.png" alt="tuto">
<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 easy">Facile</a>
<br><br>
<a href="#" class="play hard">Pas facile</a>
<img src="assets/img/tank.png" alt="tank">
<img class="tank" src="assets/img/tank.png" alt="tank">
</div>
<div id="mute" class="mute"></div>
<div class="volume">
<input type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>
<div class="line line-1">
<div class="col col-1"></div>
<div class="col col-2"></div>
@ -252,26 +255,19 @@
<div class="col col-20"></div>
</div>
</section>
<div class="copyright">
Jeu réalisé en 12 heures pendant une nuit charette
<br>
<ul>
<li><a href="https://twitter.com/Orphevs" target="_blank" >@Orphevs</a></li>
<li><a href="https://twitter.com/NyroxCdejaPris" target="_blank">@NyroxCdejaPris</a></li>
<li><a href="https://twitter.com/SundownDEV" target="_blank">@SundownDEV</a></li>
<li><a href="https://twitter.com/idealistick8" target="_blank">@idealistick</a></li>
</ul>
</div>
</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: false,
loop: true,
defaultVolume: 100,
songList: [
{
name: 'musique',
path: 'song.mp3'
}
],
DefaultSong: 0
})
</script>
</body>
</html>

BIN
lazer.mp3

Binary file not shown.