$(document).ready(function(){
var carte = new EvertonMemory({
contenitore: '.everton'
});
});
class EvertonMemory {
// costruttore della classe a cui passiamo un dizionario di impostazioni
constructor( impostazioni ) {
// dizionario di impostazioni predefinite che andremo ad usare successivamente
this.impostazioni = {
contenitore: '.everton',
larghezza: 600,
altezza: 800,
bordo: '1px solid #000',
bordo_carta: '2px solid #000',
raggio_bordo_carta: '12px',
immagine_retro_carta: 'img/everton.jpg',
sfondo: 'img/sfondo.jpg',
// immagini delle carte sul fronte
immagini: [
{nome:"Pickford",img:"img/pickford.jpg"},
{nome:"Calwert-Lewin",img:"img/calwert-lewin.jpg"},
{nome:"Digne",img:"img/digne.jpg"},
{nome:"Gomes",img:"img/gomes.jpg"},
{nome:"Holgate",img:"img/holgate.jpg"},
{nome:"Keane",img:"img/keane.jpg"},
{nome:"Richarlison",img:"img/richarlison.jpg"},
{nome:"Sigurdsson",img:"img/sigurdsson.jpg"}
],
// immagini per le combo
combo: [
{url:"img/basic.png"},
{url:"img/triple.png"},
{url:"img/dixie.png"},
{url:"img/great_escape.png"},
{url:"img/awesome.png"},
{url:"img/monster.png"},
{url:"img/pickford.png"}
],
// descrizione finale per la vittoria
finale: [
{msg:'Maddai! Neanche due carte consecutive!'},
{msg:'Ne hai beccati al massimo due di seguito, niente di che!'},
{msg:'Massimo tre di fila? Puoi fare di meglio!'},
{msg:'Quattro di fila? C\'è di peggio!'},
{msg:'Cinque di seguito? Niente male!'},
{msg:'Sei uno dopo l\'altro? Ti sei allenato proprio!'},
{msg:'Già che ne hai beccati 7 potevi beccarne 8!'},
{msg:'Otto in fila! Sbalorditivo!'}
],
// numero utilizzato per calcolare il punteggio base
basepunteggio: 6000000000000,
// codice univoco da accorpare a tutti gli elementi #ID della classe, in modo da evitare interferenze con altri elementi omonimi non creati dalla classe medesima
idunivoco: 'p9dk3l1o2ll'
}
// sovrapponiamo, dove sono dichiarate, le impostazioni dell'utente a quelle predefinite
this.impostazioni = Object.assign({},this.impostazioni,impostazioni);
// verifichiamo sul mobile
this.controlloMobile();
// carichiamo il gioco
this.caricamento();
}
controlloMobile() {
var larghezza = $(window).width();
var rapporto = this.impostazioni.altezza / this.impostazioni.larghezza;
if( this.impostazioni.larghezza > larghezza ) {
this.impostazioni.larghezza = larghezza;
this.impostazioni.altezza = rapporto * larghezza;
}
}
// carichiamo il gioco la prima volta
caricamento() {
this.creazioneStile();
// impostiamo le caratteristiche base del contenitore
// faccio notare che il contenitore è istanziato in un oggetto globale della classe
this.contenitore = $(this.impostazioni.contenitore);
this.contenitore.css("width", this.impostazioni.larghezza);
this.contenitore.css("height", this.impostazioni.altezza);
this.contenitore.css("border", this.impostazioni.bordo);
this.contenitore.css("background-image", 'url("'+this.impostazioni.sfondo+'")');
this.contenitore.css("position", "relative");
// creiamo la pagina iniziale
this.creazioneHome();
}
// creiamo la home introduttiva al gioco
creazioneHome() {
var questo = this;
// creiamo un pulsante per lo start del gioco
this.contenitore.html('<div class="start" id="start'+questo.impostazioni.idunivoco+'">Inizia</div>');
// azioni quando si clicca sul pulsante start
$('#start'+questo.impostazioni.idunivoco).click(function() {
// puliamo il contenuto del contenitore, rimuovendo il pulsante start stesso
questo.contenitore.html('');
// creiamo il gioco
questo.creazioneGioco();
});
}
// creazione del gioco
creazioneGioco() {
// puliamo e creiamo l'elenco delle 16 carte da utilizzare
this.carte = null;
this.carte = $.merge($.merge([], this.impostazioni.immagini), this.impostazioni.immagini);
// ordiniamo le carte come ci piace di più
this.carte.sort(() => Math.random() - 0.5);
this.cartaattuale = "";
this.consecutivi = 0;
this.punteggio = 0;
this.giocoiniziato = false;
this.cartetrovate = 0;
// per il commento finale calcoliamo il numero massimo di carte consecutive aperte
this.max_consecutivi = 0;
// creiamo il menu
this.creazioneMenu();
// avviamo il timer
this.creazioneTimer();
// creiamo lo spazio per le combo
this.contenitore.append('<div class="combo" id="combo'+this.impostazioni.idunivoco+'"></div>');
// nascondiamo lo spazio delle combo
$('#combo'+this.impostazioni.idunivoco).hide();
// aggiungiamo le carte
for(var i = 0; i < 16; i++ ) this.creaCarta(i);
// per un attimo mostriamo tutte le carte
this.mostraTutte();
}
// mostriamo tutte le carte
mostraTutte() {
var questo = this;
// entro 500 ms mostriamo tutte le carte
setTimeout(
function(){
$('.carta').flip(true);
// entro 2000 ms, ovvero 2 secondi, nascondiamo le carte mostrate
setTimeout(
function(){
$('.carta').flip(false);
// confermiamo l'inizio del gioco
questo.giocoiniziato = true;
}, 2000);
}, 500);
}
// incrementiamo il punteggio
incrementaPunteggio() {
// calcoliamo il tempo trascorso dalla data iniziale a quella attuale
// questo valore è in millisecondi
var trascorso = +new Date() - this.inizio;
// verifichiamo il numero di elementi consecutivi massimo
this.max_consecutivi = this.consecutivi > this.max_consecutivi ? this.consecutivi : this.max_consecutivi;
// incrementiamo il punteggio con una funzione matematica
this.punteggio += Math.round(this.impostazioni.basepunteggio/Math.pow(trascorso+1,2)*this.consecutivi);
// aggiorniamo il punteggio
$('#punteggio'+this.impostazioni.idunivoco).text(this.punteggio.toLocaleString('it-IT'));
// chiamiamo il popup delle combo
this.comboPopUp();
}
// popup delle combo
comboPopUp() {
// se c'è più di un elemento consecutivo, quindi almeno 2 consecutivi aperti, allora mostra una "combo"
if( this.consecutivi > 1 ) {
var questo = this;
$('#combo'+this.impostazioni.idunivoco).css('background-image','url("'+this.impostazioni.combo[this.consecutivi-2].url+'")');
$('#combo'+this.impostazioni.idunivoco).css('background-size','contain');
$('#combo'+this.impostazioni.idunivoco).css('background-repeat','no-repeat');
$('#combo'+this.impostazioni.idunivoco).css('background-position','center center');
$('#combo'+this.impostazioni.idunivoco).css('z-index','9999');
$('#combo'+this.impostazioni.idunivoco).show();
$("#combo"+this.impostazioni.idunivoco).animate({height: "128px",width: "400px","margin-top":"-64px","margin-left":"-200px"});
// all'animazione aggiungiamo un suono
var obj = document.createElement("audio");
// prendiamo il file wav
obj.src = "Blast-SoundBible.com-2068539061.wav";
// riproduciamolo
obj.play();
// dopo 800ms nascondiamo il popup della combo
setTimeout(
function(){
$('#combo'+questo.impostazioni.idunivoco).hide();
}, 800);
}
}
// creiamo gli stili
creazioneStile() {
var stile = $('<style>'+
this.impostazioni.contenitore+' .carta{width:22%;height:20.2%;margin:1.5%;float:left;cursor:pointer;}'+
this.impostazioni.contenitore+' .carta .front{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';}'+
this.impostazioni.contenitore+' .carta .back{width:100%;height:100%;border:'+this.impostazioni.bordo_carta+';border-radius:'+this.impostazioni.raggio_bordo_carta+';position:relative;}'+
this.impostazioni.contenitore+' .carta .back .titolo{width:100%;color:#fff;text-align:center;position:absolute;bottom:6px;font-size:10px;}'+
this.impostazioni.contenitore+' .menu{width:100%;height:10.2%;padding-top:8px;text-align:center;}'+
this.impostazioni.contenitore+' .start{width:200px;height:64px;line-height:64px;background-color:#00319a;color:#fff;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;text-align:center;cursor:pointer;}'+
this.impostazioni.contenitore+' .start:hover{background-color:#0040c8;}'+
this.impostazioni.contenitore+' .combo{width:200px;height:64px;position:absolute;top:'+this.impostazioni.altezza/2+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-100px;margin-top:-32px;}'+
this.impostazioni.contenitore+' .restart{display:inline-block;padding:8px;background-color:#00319a;color:#fff;margin-top:4px;cursor:pointer;}'+
this.impostazioni.contenitore+' .restart:hover{background-color:#0040c8;}'+
this.impostazioni.contenitore+' .messaggio-fine{width:400px;height:200px;position:absolute;top:'+this.impostazioni.altezza/4+'px;left:'+this.impostazioni.larghezza/2+'px;margin-left:-200px;margin-top:-100px;text-align:center;display:table;}'+
this.impostazioni.contenitore+' .messaggio-fine span{width:100%;}'+
'</style>')
$('html > head').append(stile);
}
// creiamo il menu
creazioneMenu() {
var questo = this;
this.contenitore.append('<div class="menu">'+
'Punteggio: <span id="punteggio'+this.impostazioni.idunivoco+'">0</span> • Tempo trascorso: <span id="tempo'+this.impostazioni.idunivoco+'">0:00:00</span><br><span id="restart'+this.impostazioni.idunivoco+'" class="restart">Ricomincia</span>'+
'</div>');
$('#restart'+this.impostazioni.idunivoco).click(function(){
questo.contenitore.html('');
questo.creazioneGioco();
});
}
// avviamo il timer
creazioneTimer() {
this.inizio = +new Date();
this.contatoreTimer();
}
// creiamo il timer
contatoreTimer() {
var questo = this;
setTimeout(
function(){
var trascorso = +new Date() - questo.inizio;
var secondi = trascorso / 1000;
var minuti = secondi / 60;
var ore = minuti / 60;
$('#tempo'+questo.impostazioni.idunivoco).text(Math.floor(ore)+":"+(Math.floor(minuti-Math.floor(ore)*60)+"").padStart(2, '0')+":"+(Math.floor(secondi-Math.floor(minuti)*60)+"").padStart(2, '0'));
if(questo.cartetrovate<8) questo.contatoreTimer();
else questo.fineGioco();
}, 500);
}
// fine del gioco
fineGioco() {
var questo = this;
// mostriamo il punteggio e tutti i commenti
this.contenitore.html('<div class="messaggio-fine"><span><h3>Finito!</h3></span><span>Hai totalizzato</span><span><h4>'+this.punteggio.toLocaleString('it-IT')+'</h4></span><span><h5>punti</h5></span><span>'+this.impostazioni.finale[this.max_consecutivi-1].msg+'</span></div><div class="start" id="rigioca'+questo.impostazioni.idunivoco+'">Rigioca</div>');
$('#rigioca'+questo.impostazioni.idunivoco).click(function() {
questo.contenitore.html('');
questo.creazioneGioco();
});
}
// creiamo le carte
creaCarta(id) {
var fronte = '<div class="front"></div>';
var retro = '<div class="back"><div class="titolo">' + this.carte[id].nome + '</div></div>';
var questo = this;
this.contenitore.append('<div id="carta'+id+'-'+this.impostazioni.idunivoco+'" class="carta" data-nome="'+this.carte[id].nome+'" data-giocabile="1">'+fronte+retro+'</div>');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-image','url("'+this.impostazioni.immagine_retro_carta+'")');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-size','cover');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-repeat','no-repeat');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .front').css('background-position','center center');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-image','url("'+this.carte[id].img+'")');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-size','cover');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-repeat','no-repeat');
$('#carta'+id+'-'+this.impostazioni.idunivoco+' .back').css('background-position','center center');
$('#carta'+id+'-'+this.impostazioni.idunivoco).flip({
axis: 'y',
trigger: 'manual'
});
$('#carta'+id+'-'+this.impostazioni.idunivoco).click(function(){
if( $(this).attr('data-giocabile') == 1 && questo.giocoiniziato ) {
var carta = $(this).data("flip-model");
if( carta.isFlipped ) {
$(this).flip(false);
} else {
$(this).flip(true);
}
var cartagiocata = $(this).attr('data-nome');
if( questo.cartaattuale == "" ) {
questo.cartaattuale = cartagiocata;
$(this).attr('data-giocabile',0);
} else {
if( questo.cartaattuale == cartagiocata ) {
// giusta
$('div[data-nome="'+questo.cartaattuale+'"]').attr('data-giocabile',0);
questo.consecutivi++;
questo.incrementaPunteggio();
questo.cartetrovate++;
} else if( questo.cartaattuale != "" && questo.cartaattuale != cartagiocata ) {
// sbagliata
var cartaattuale = questo.cartaattuale;
setTimeout(
function(){
$('div[data-nome="'+cartaattuale+'"]').flip(false);
$('div[data-nome="'+cartagiocata+'"]').flip(false);
$('div[data-nome="'+cartaattuale+'"]').attr('data-giocabile',1);
$('div[data-nome="'+cartagiocata+'"]').attr('data-giocabile',1);
}, 800);
questo.consecutivi = 0;
}
questo.cartaattuale = "";
}
}
});
}
}