memory

<script type=”text/javascript src=”http://www.nome-tuo-dominio.it/scripts/mio-javascript.js”></script>

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(‘

‘);

// 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(‘

‘);

// 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 = $(‘

‘)
$(‘html > head’).append(stile);
}

// creiamo il menu
creazioneMenu() {

var questo = this;

this.contenitore.append(‘

‘);

$(‘#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('

‘);

$(‘#rigioca’+questo.impostazioni.idunivoco).click(function() {
questo.contenitore.html(”);
questo.creazioneGioco();
});

}

// creiamo le carte
creaCarta(id) {

var fronte = ‘

‘;
var retro = ‘

‘;
var questo = this;
this.contenitore.append(‘

‘);
$(‘#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 = “”;
}
}
});

}

}[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]