Skip to content

Commit

Permalink
Desarrollo del modo fiesta
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaidanxp
Zaidanxp committed Dec 10, 2023
1 parent 5565a78 commit 1cf7446
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 12 deletions.
16 changes: 15 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,26 @@ <h2>OPCIONES</h2>
</div>
</div>

<div class="row">
<div class="mt-3 col-12">
<div class="ml-2 col-2">
<h1 id="tituloMasInformacion">?</h1>
</div>
<div class="col-7 mr-1">
<h4 id="textoInformativoMF" class="no-ver blanco">Pulse CONTROL + TABULADOR para activar MF y para una mejor esperiencia</h4>
</div>
</div>
</div>

</div>

<!-- CANVAS -->
<div class="col-4">

<canvas id="miCanvas" width="380" height="598"></canvas>
<div id="card" class="ml-2 card">
<div class="uwu"></div>
<canvas id="miCanvas" width="380" height="598"></canvas>
</div>

</div>

Expand Down
41 changes: 32 additions & 9 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ window.onload = function() {
let idAnimacionHockey;
let idAnimacionAbrirCerrarBoca;
let idAnimacionTimer;
let idModoFiesta;

let dificulty;

Expand All @@ -12,6 +13,9 @@ window.onload = function() {

let inputNickName;
let botonStartGame;
let tituloMasInformacion;
let textoInformativoMF;
let card;

let radioButtonEassy;
let radioButtonMedium;
Expand Down Expand Up @@ -270,32 +274,32 @@ window.onload = function() {
this.mantenerPuckEnElCanvas = function(){
if(this.direccion != 0){
if(Math.floor(this.y) < LIMITEARRIBA) {

if(this.haEntradoUnaParteEnLaPorteriaVisitante){
if(Math.floor(this.x) < Porteria.prototype.INICIOPORTERIA || Math.floor(this.coordsLadoDerecho()) > Porteria.prototype.FINPORTERIA){
this.direccion = Math.PI - this.direccion;
puckComeCocos.reproducirAudio();
}

}else if(Math.floor(this.x) <= Porteria.prototype.INICIOPORTERIA && Math.floor(this.x) >= 118
||
Math.floor(this.coordsLadoDerecho()) >= Porteria.prototype.FINPORTERIA && Math.floor(this.coordsLadoDerecho() <= 262)){

this.direccion = -this.direccion;
puckComeCocos.reproducirAudio();

}else if(Math.floor(this.x) < Porteria.prototype.INICIOPORTERIA || Math.floor(this.coordsLadoDerecho()) > Porteria.prototype.FINPORTERIA){
this.direccion = -this.direccion;
puckComeCocos.reproducirAudio();
}

}
if(Math.floor(this.x) < LIMITELADOIZQUIERDO || Math.floor(this.coordsLadoDerecho()) > LIMITELADODERECHO){
this.direccion = Math.PI - this.direccion;
puckComeCocos.reproducirAudio();
}
if(Math.floor(this.coordsParteAbajo()) > LIMITEABAJO){

if(this.haEntradoUnaParteEnLaPorteriaLocal){
if(Math.floor(this.x) < Porteria.prototype.INICIOPORTERIA || Math.floor(this.coordsLadoDerecho()) > Porteria.prototype.FINPORTERIA){
this.direccion = Math.PI - this.direccion;
Expand All @@ -304,10 +308,10 @@ window.onload = function() {
}else if(Math.floor(this.x) <= Porteria.prototype.INICIOPORTERIA && Math.floor(this.x) >= 118
||
Math.floor(this.coordsLadoDerecho()) >= Porteria.prototype.FINPORTERIA && Math.floor(this.coordsLadoDerecho() <= 262)){

this.direccion = -this.direccion;
puckComeCocos.reproducirAudio();

}else if(Math.floor(this.x) < Porteria.prototype.INICIOPORTERIA || Math.floor(this.coordsLadoDerecho()) > Porteria.prototype.FINPORTERIA){
this.direccion = -this.direccion;
puckComeCocos.reproducirAudio();
Expand Down Expand Up @@ -853,6 +857,20 @@ window.onload = function() {
sonidoVictoria = document.getElementById("sonidoVictoria");
sonidoDerrota = document.getElementById("sonidoDerrota");
cancionSecreta = document.getElementById("cancionSecreta");

tituloMasInformacion = document.getElementById("tituloMasInformacion");
textoInformativoMF = document.getElementById("textoInformativoMF");
card = document.getElementById("card");

tituloMasInformacion.addEventListener("mouseenter", function(){
textoInformativoMF.classList.remove("no-ver");
tituloMasInformacion.classList.add("hoverH1");
});

tituloMasInformacion.addEventListener('mouseleave', function() {
textoInformativoMF.classList.add("no-ver");
tituloMasInformacion.classList.remove("hoverH1");
});

}

Expand All @@ -863,10 +881,15 @@ window.onload = function() {
* la tecla que ha pulsado el usuario
* @param {event} event
*/
function activarTeclaPulsada(event) {
function activarTeclaPulsada(event) {

if(event.shiftKey && event.key === 'Tab'){
cancionSecreta.play();
card.firstElementChild.classList.add("bg");
idModoFiesta = setTimeout(function() {
card.firstElementChild.classList.remove("bg");
clearTimeout(idModoFiesta);
},82000);
}

switch (event.keyCode) {
Expand Down
91 changes: 89 additions & 2 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ li{
#miCanvas{
border: 2px;
border-radius: 30px;
margin-left: 75px;
}

#nickName, #dificulty{
Expand All @@ -212,4 +211,92 @@ li{
border-bottom: .2em solid var(--colorTexto);
background: transparent;
padding: .4em;
}
}

h1{
background-color: transparent;
border: none;
padding: 0;
color: rgb(199, 199, 199);
}

.hoverH1{
text-shadow: 2px 2px 2px white;
cursor: pointer;
}


h4{
color: rgb(199, 199, 199);
}

.ver{
display: block;
}

.no-ver{
display: none;
}



.card {
position: relative;
width: 380px;
color: white;
height: 598px;
background: transparent;
border-radius: 30px;
}

.bg {
position: absolute;
z-index: -1;
inset: -4px;
border-radius: 16px;
overflow: hidden;
}

.uwu {
filter: blur(8px);
transition: filter 0.3s;
}

.bg::before {
content: '';
position: absolute;
aspect-ratio: 1/1;
top: 50%;
left: 50%;
min-width: 150%;
min-height: 150%;
background-image: conic-gradient(
hsl(0, 100%, 50%),
hsl(30, 100%, 50%),
hsl(60, 100%, 50%),
hsl(90, 100%, 50%),
hsl(120, 100%, 50%),
hsl(150, 100%, 50%),
hsl(180, 100%, 50%),
hsl(210, 100%, 50%),
hsl(240, 100%, 60%),
hsl(270, 100%, 50%),
hsl(300, 100%, 50%),
hsl(330, 100%, 50%),
hsl(360, 100%, 50%)
);
animation: speeen 4s linear infinite;
transform-origin: 0% 0%;
transform: rotate(0deg) translate(-50%, -50%);
}

@keyframes speeen {
from {
transform: rotate(0deg) translate(-50%, -50%);
}

to {
transform: rotate(360deg) translate(-50%, -50%);
}
}

15 changes: 15 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
margin-left: var(--pcolumna);
}

.mr-1{
margin-right: var(--pcolumna);
}

.ml-2{
margin-left: calc(var(--pcolumna) * 2);
}
Expand All @@ -34,10 +38,21 @@
margin-top: var(--pcolumna);
}

.mb-1{
margin-bottom: var(--pcolumna);
}

.mt-2{
margin-top: calc(var(--pcolumna) * 2);
}

.mt-3{
margin-top: calc(var(--pcolumna) * 3);
}

.mt-4{
margin-top: calc(var(--pcolumna) * 4);
}

.col-2{
width: calc(var(--pcolumna) * 2);
Expand Down

0 comments on commit 1cf7446

Please sign in to comment.