mirror of https://github.com/sundowndev/Detank.git
Big update (sounds + volume + copyright + responsive Desktop + tuto + fix)
orphevs
parent
193239b182
commit
1327c2fe8e
|
|
@ -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 |
|
|
@ -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;
|
||||
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
56
index.html
56
index.html
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue