JavaScript-Quellcode für Elimination
|
JavaScript zum Erreichen der Quellcode-Download-Adresse des Spiels: Klicken Sie hier, um den Quellcode herunterzuladen
Hauptseite <!doctype html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="Breite=Gerätebreite, benutzerdefiniert skalierbar=nein, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0"> <meta http-equiv="X-UA-kompatibel" content="ie=edge"> <Titel>LuckyStar</Titel> <link rel="stylesheet" href="./css/index.css?v=1.0.0" rel="externes nofollow" > </Kopf> <Text> <div Klasse="Glücksstern" id="Glücksstern"> <div Klasse="Ergebnis-Ziel"> <p class="score-level">Stufe<span id="scoreLevel"></span></p> <p>Ziel: <span id="scoreTarget"></span></p> </div> <div class="score-current">Punktzahl<span id="scoreCurrent"></span></div> <div Klasse = "score-select" id = "scoreSelect"></div> <ul Klasse = "Sternliste" id = "Sternliste"> </ul> </div> </body> <script src="./js/countUp.js"></script> <script src="./js/index.js"></script> <script src="./js/resize.js"></script> <Skript> neuer PopStar() </Skript> </html> JS-Datei
Haupt-JS
(Funktion() {
//Globale Konfiguration var config = {
tileWidth: .75, //Breite und Höhe des kleinen Sterns tileHeight: .75,
tileSet: [], //Zweidimensionales Array zum Speichern von kleinen Sternen tableRows: 10, //Anzahl der Zeilen baseScore: 5, //Die Basispunktzahl jedes kleinen Sterns stepScore: 10, //Die inkrementelle Punktzahl jedes kleinen Sterns targetScore: 2000, //Die Zielpunktzahl, anfänglich 2000
el: document.querySelector('#starList'), // Sternliste scoreTarget: document.querySelector('#scoreTarget'), // Zielpunktzahl scoreCurrent: document.querySelector('#scoreCurrent'), // aktuelle Punktzahl scoreSelect: document.querySelector('#scoreSelect'), // ausgewählte Sternpunktzahl scoreLevel: document.querySelector('#scoreLevel'), // aktuelles Level };
//Globale berechnete Eigenschaften var computed = {
Flag: true, //Sperre wählen: [], //Timer für ausgewählte Sternsammlung: null,
totalScore: 0, //Gesamtpunktzahl tempTile: null,
Level: 1, //Aktuelle Levelnummer (+1 für jedes bestandene Level, 1 bei Spielfehler)
stepTargetScore: 1000, //Inkrementelle Punktzahl für erfolgreiches Bestehen des Levels (1000/Level)
score: 0 //Aktueller Berechnungsscore };
//Blockobjektfunktion Block(Nummer, Zeile, Spalte) {
var tile = document.createElement('li');
Kachel.Breite = Konfiguration.KachelBreite;
Kachelhöhe = config.Kachelhöhe;
Kachel.Nummer = Nummer;
Kachel.Zeile = Zeile;
Kachel.col = col;
Rückgabeplättchen;
}
//Eingabefunktion function PopStar() {
gibt neues PopStar.prototype.init() zurück;
}
//PopStar-Prototyp PopStar.prototype = {
/**
* PopStars Eingabefunktion */
init: Funktion() {
dies.initTable();
},
/**
* Initialisierungsvorgang */
initTable: Funktion() {
dies.initScore();
dies.initTileSet();
dies.initBlocks();
},
/**
* Aktuellen Punktestand und Ziel initialisieren */
initScore: Funktion() {
neuer CountUp(config.scoreTarget, config.targetScore, config.targetScore).start();
config.scoreCurrent.innerHTML = berechneter Gesamtscore;
config.scoreLevel.innerHTML = berechneter Level;
},
/**
* Klickereignisoperation */
Mausklick: Funktion() {
var tileSet = config.tileSet,
wählen = berechnet.wählen,
baseScore = config.baseScore,
Schrittzahl = config.Schrittzahl,
el = konfiguration.el,
selbst = dies,
len = Länge wählen;
wenn (!computed.flag || Länge <= 1) {
zurückkehren;
}
berechnetes Flag = falsch;
berechnet.tempTile = null;
Var-Punktzahl = 0;
für (var i = 0; i < len; i++) {
Punktzahl += Basispunktzahl + i * Schrittpunktzahl;
}
neuer CountUp(config.scoreCurrent, berechneter.Gesamtscore, berechneter.Gesamtscore += Punktzahl).start();
für (var i = 0; i < len; i++) {
setzeTimeout(Funktion(i) {
tileSet[wählen[i].row][wählen[i].col] = null;
el.removeChild(wählen[i]);
}, ich * 100, ich);
}
setzeTimeout(Funktion() {
selbst.bewegen();
//Beurteile das Ende setTimeout(function() {
wenn (self.isFinish()) {
selbst löschen();
wenn (berechneter.Gesamtscore >= config.Zielscore) {
neuer CountUp(config.scoreTarget, config.targetScore, config.targetScore += (berechneter Level - 1) * berechnet
.stepTargetScore)
.Start();
neuer CountUp(config.scoreLevel, berechneter.Level, berechneter.Level += 1).start();
alert("Herzlichen Glückwunsch zum Gewinn");
console.log("Herzlichen Glückwunsch zum Gewinn")
} anders {
config.targetScore = config.scoreTarget = 2000;
berechneter Level = berechneter Gesamtscore = 0;
alert("Spiel fehlgeschlagen");
console.log("Spiel fehlgeschlagen")
}
berechnetes Flag = wahr;
} anders {
wähle = [];
computed.flag = true; //Sperre aufheben, nachdem alle Aktionen abgeschlossen sind self.mouseOver(computed.tempTile);
}
}, 300 + ausgewählte Länge * 150);
}, wähle.Länge * 100);
},
/**
* Lösche die Ebene, wenn sie erfolgreich ist oder fehlschlägt (lösche das zweidimensionale Array und die untergeordneten Knoten von el) */
löschen: Funktion() {
var tileSet = config.tileSet,
Zeilen = Kachelsatz.Länge,
el = Konfiguration.el;
vartemp = [];
für (var i = Zeilen - 1; i >= 0; i--) {
für (var j = tileSet[i].length - 1; j >= 0; j--) {
wenn (Kachelsatz[i][j] === null) {
weitermachen;
}
temp.push(Kachelsatz[i][j])
KachelSet[i][j] = null;
}
}
für (var k = 0; k < temp.länge; k++) {
setzeTimeout(Funktion(k) {
el.removeChild(temp[k]);
wenn(k>=temp.length-1){
setzeTimeout(Funktion(k) {
neuer PopStar();
},1000)
}
}, k * 100, k);
}
},
/**
* Ist das Spiel vorbei? * @returns {boolean}
*/
istFertig: Funktion() {
var tileSet = config.tileSet,
Zeilen = Kachelsatz.Länge;
für (var i = 0; i < Zeilen; i++) {
var Zeile = Kachelsatz[i].Länge;
für (var j = 0; j < Zeile; j++) {
vartemp = [];
Dies.checkLink(tileSet[i][j], temp);
wenn (temp.Länge > 1) {
gibt false zurück;
}
}
}
gibt true zurück;
},
/**
* Bewegungsoperationen nach dem Eliminieren von Sternen */
verschieben: Funktion() {
var Zeilen = config.tableRows,
KachelSet = Konfiguration.KachelSet;
//Nach unten verschieben for (var i = 0; i < rows; i++) {
var pointer = 0; // Zeiger zeigt auf das kleine Quadrat. Wenn er auf null stößt, stoppt er und wartet, bis das darüber liegende kleine Quadrat hier landet. for (var j = 0; j < rows; j++) {
wenn (Kachelsatz[j][i] != null) {
if (j !== Zeiger) {
Kachelsatz[Zeiger][i] = Kachelsatz[j][i];
tileSet[j][i].row = Zeiger;
KachelSet[j][i] = null;
}
Zeiger++;
}
}
}
//Horizontal verschieben (ob in der untersten Zeile eine leere Spalte vorhanden ist)
für (var i = 0; i < tileSet[0].length;) {
wenn (tileSet[0][i] == null) {
für (var j = 0; j < Zeilen; j++) {
Kachelsatz[j].splice(i, 1);
}
weitermachen;
}
ich++;
}
dies.aktualisieren()
},
/**
* Blinkvorgang bei Bewegung der Maus * @param obj
*/
mouseOver: Funktion(Objekt) {
if (!computed.flag) { //Im gesperrten Zustand ist kein Vorgang zulässig computed.tempTile = obj;
zurückkehren;
}
dies.clearFlicker();
var wähle = [];
this.checkLink(Objekt, auswählen);
berechnet.wählen = wählen;
wenn (wähle.Länge <= 1) {
wähle = [];
zurückkehren;
}
dies.flicker(wählen);
this.computeScore(wählen);
},
/**
* Berechnen Sie die ausgewählte Sternebewertung * @param arr
*/
berechneScore: Funktion(arr) {
var Punktzahl = 0,
len = arr.Länge,
baseScore = config.baseScore,
Schrittzahl = config.Schrittzahl;
für (var i = 0; i < len; i++) {
Punktzahl + = Basispunktzahl + i * Schrittpunktzahl
}
wenn (Punktzahl <= 0) {
zurückkehren;
}
berechneter Score = Punktzahl;
config.scoreSelect.style.opacity = "1";
config.scoreSelect.innerHTML = arr.length + "Ergebnisse" + score + "Ergebnisse";
setzeTimeout(Funktion() {
config.scoreSelect.style.opacity = "0";
}, 1200)
},
/**
* Entfernen Sie das Flackern des Sterns, wenn die Maus herausbewegt wird */
clearFlicker: Funktion() {
var tileSet = config.tileSet;
für (var i = 0; i < tileSet.length; i++) {
für (var j = 0; j < tileSet[i].length; j++) {
var div = Kachelsatz[i][j];
wenn (div === null) {
weitermachen;
}
div.classList.remove("Skala");
}
}
},
/**
* Sterne funkeln * @param arr
*/
flimmern: Funktion(arr) {
für (var i = 0; i < arr.length; i++) {
var div = arr[i];
div.classList.add("Skala");
}
},
/**
* Überprüfen Sie, ob der Stern, in den die Maus bewegt wird, mit demselben Stern verbunden ist.
* @param obj Stern
* @param arr wählen
*/
checkLink: Funktion(Objekt, arr) {
wenn (Objekt === null) {
zurückkehren;
}
arr.push(Objekt);
/**
* Prüfen Sie, ob der linke Block zur ausgewählten Reihe entfernbarer Sterne hinzugefügt werden kann:
* Der ausgewählte Stern kann nicht der ganz linke sein,
* Links neben dem ausgewählten Stern sollte ein Stern stehen.
* Der Stern links vom ausgewählten Stern ist derselbe wie der ausgewählte Stern.
* Der Stern links vom ausgewählten Stern wurde nie ausgewählt */
var tileSet = config.tileSet,
Zeilen = config.tableRows;
wenn (Objekt.Spalte > 0 && KachelSet[Objekt.Zeile][Objekt.Spalte - 1] && KachelSet[Objekt.Zeile][Objekt.Spalte - 1].Zahl === Objekt.Zahl && arr.Index von(
Kachelsatz[Objekt.Zeile][Objekt.Spalte - 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col - 1], arr);
}
wenn (obj.col < Zeilen - 1 und Kachelsatz[obj.Zeile][obj.col + 1] und Kachelsatz[obj.Zeile][obj.col + 1].Zahl === obj.Zahl und
arr.indexOf(tileSet[obj.row][obj.col + 1]) === -1) {
this.checkLink(tileSet[obj.row][obj.col + 1], arr);
}
wenn (Objekt.Zeile < Zeilen - 1 und Kachelsatz[Objekt.Zeile + 1][Objekt.Spalte] und Kachelsatz[Objekt.Zeile + 1][Objekt.Spalte].Zahl === Objekt.Zahl und
arr.indexOf(tileSet[Objekt.Zeile + 1][Objekt.Spalte]) === -1) {
this.checkLink(tileSet[obj.row + 1][obj.col], arr);
}
wenn (Objektzeile > 0 und Kachelsatz[Objektzeile - 1][Objektzeile] und Kachelsatz[Objektzeile - 1][Objektzeile].Nummer === Objektzeile und arr.indexOf(
Kachelsatz[Objekt.Zeile - 1][Objekt.Spalte]) === -1) {
this.checkLink(tileSet[obj.row - 1][obj.col], arr);
}
},
/**
* Initialisieren Sie ein zweidimensionales Array */
initTileSet: Funktion() {
var Zeilen = config.tableRows,
arr = Konfiguration.tileSet;
für (var i = 0; i < Zeilen; i++) {
arr[i] = [];
für (var j = 0; j < Zeilen; j++) {
arr[i][j] = [];
}
}
},
/**
* Initialisiere die untergeordneten Knoten von el */
initBlocks: Funktion() {
var tileSet = config.tileSet,
selbst = dies,
el = konfiguration.el,
cols = Kachelsatz.Länge;
für (var i = 0; i < cols; i++) {
var Zeilen = Kachelsatz[i].Länge;
für (var j = 0; j < Zeilen; j++) {
var tile = this.createBlock(Math.floor(Math.random() * 5), i, j);
tile.onmouseover = Funktion() {
self.mouseOver(dies)
};
tile.onclick = Funktion() {
self.mouseClick();
};
tileSet[i][j] = Kachel;
el.appendChild(Kachel);
}
}
dies.aktualisieren()
},
/**
* Rendern Sie die untergeordneten Knoten von el */
aktualisieren: function() {
var tileSet = config.tileSet;
für (var i = 0; i < tileSet.length; i++) {
var Zeile = Kachelsatz[i].Länge;
für (var j = 0; j < Zeile; j++) {
var Kachel = Kachelsatz[i][j];
wenn (Kachel == null) {
weitermachen;
}
Kachel.Zeile = i;
Kachel.col = j;
tile.style.left = tileSet[i][j].col * config.tileWidth + "rem";
tile.style.bottom = tileSet[i][j].row * config.tileHeight + "rem";
tile.style.backgroundImage = "url('./images/" + tileSet[i][j].number + ".png')";
}
}
},
/**
* Funktion zum Erstellen eines untergeordneten Sternknotens * @param Nummer
* @param Zeile
* @param col
* @returns {HTMLElement}
*/
createBlock: Funktion(Zahl, Zeile, Spalte) {
gib einen neuen Block zurück (Nummer, Zeile, Spalte);
},
};
PopStar.prototype.init.prototype = PopStar.prototype;
Fenster.PopStar = PopStar;
})();
index.js
(Funktion()
{Funktion u(a,b,c)
{
var d = document.createElement("li");
d.Breite=e.Kachelbreite;d.Höhe=e.Kachelhöhe;
d.Nummer=a;
d.Zeile=b;d.Spalte=c;return d}
Funktion m()
{return new m.prototype.init
}
var e={Kachelbreite:.75,Kachelhöhe:.75,Kachelsatz: [],
Tabellenzeilen: 10, Basisscore: 5,
Schrittzahl: 10,
Zielergebnis:2E3,
el:document.querySelector("#starList"),
scoreTarget:document.querySelector("#scoreTarget"),
scoreCurrent:document.querySelector("#scoreCurrent"),
Ergebnisauswahl:document.querySelector("#scoreSelect"),
Punktestand:document.querySelector("#Punktestand")
},
n=!0,t=[],p=0,r=null,q=1;
m.prototype={
init:Funktion(){diese.initTable()
}
,initTable:Funktion(){
dies.initScore();
dies.initTileSet();
dies.initBlocks()
}
,
initScore:Funktion(){
(neuer CountUp(e.scoreTarget,e.targetScore,e.targetScore)).start();
e.scoreCurrent.innerHTML=p;e.scoreLevel.innerHTML=q
},
Mausklick:Funktion(){
var a=e.tileSet,b=t,c=e.baseScore,d=e.stepScore,f=e.el,g=this,h=b.length;wenn(n&&!(1>=h)){
n=!1;r=null;
für (var l=0,k=0;
k<h;k++)l+=c+k*d;(neuer CountUp(e.scoreCurrent,p,p+=l)).start();
für (k=0;k<h;k++)
setzeTimeout(Funktion(c){a[b[c].row][b[c].col]=
null;
f. removeChild(b[c])},100*k,k);
setTimeout(Funktion(){g.move();
setzeTimeout(Funktion()
{g.isfinish ()? (g.clear (), p> = e.targetScore? ((New CountUp (e.Scoretarget, e.TargetScore), E.TargetScore+= 1E3*(q-1)). Start (), (New Countup (E.Scorelevel, q+= 1) 80dc "), console.log (" \ u606d \ u559c \ u83b7 \ u80dc ")) :( E. -TargetScore = E.Scoretarget = 2E3, q = p = 0, alert (" \ u6e38 \ u620f \ u5931 \ u8d25 "), con620f \ u5931 \ u8d25"), con620f \ u5931 \ u8d25 "), con620 \ u5931 \ u8d25") 20f \ u5931 \ u8d25 ")), n =! 0) :( b = [], n =! 0, g.mouseover (r))}, 300+150*B.Length)}, 100*B.Length)}},,
löschen:Funktion()
{für(var a=e.tileSet,b=e.el,c=[],
d=a.Länge-1;0<=d;d--)
für (var f=a[d].length-1;0<=f;f--)
null!==a[d][f]&&(c.push(a[d][f]),a[d][f]=null);
für (a = 0; a < c. Länge; a++)
setzeTimeout(Funktion(a))
{b.entfernenKind(c[a]);
a>=c.length-1&&setTimeout(Funktion(a){neues m},1E3)},100*a,a)},istFinish:Funktion()
{für(var a=e.tileSet,b=a.length,c=0;c<b;c++)
für (var d=a[c].Länge,f=0;f<d;f++)
{var g=[];dies.checkLink(a[c][f],g);
wenn (1<g.Länge)
zurück!1}zurück!0},
verschieben:Funktion()
{für(var a=e.tableRows,b=e.tileSet,c=0;
c<a;c++)für(var d=
0,f=0;f<a;f++)null!=b[f][c]&&(f!==d&&(b[d][c]=b[f][c],b[f][c].row=d,b[f][c]=null),d++);
für (c=0;c<b[0].Länge;
)wenn(null==b[0][c])
für(f=0;f<a;f++)b[f].splice(c,1);sonst c++;diese.refresh()},
mouseOver:Funktion(a){wenn(n)
{this.clearFlicker();
var b=[];
dies.checkLink(a,b);
t=b;1>=b.Länge||(dieses.Flicker(b),dieses.ComputeScore(b))}
sonst r=a
},
berechneScore:Funktion(a)
{für(var b=0,c=a.Länge,d=e.Basisscore,f=e.Schrittscore,g=0;
g<c;g++)b+=d+g*f;
0>=b||(e.scoreSelect.style.opacity="1",e.scoreSelect.innerHTML=a.length+"\u8fde\u6d88 "+
b+"\u5206",setTimeout(Funktion(){
e.scoreSelect.style.opacity="0"},1200))
},clearFlicker:Funktion(){
für (var a=e.tileSet,b=0;b<a.length;b++)
für (var c = 0; c <a [b].length; c++) {var d = a [b] [c]; null! == d & & d.classList.remove ("scale")}}, flicker: function (a) {für (var b = 0; b <a.length; b++) a [b].classList.add ("scale")
},
checkLink:Funktion(a,b){
wenn(null!==a){
b.push(a);var c=e.tileSet,d=e.tableRows;0<a.col&&c[a.row][a.col-1]&&c[a.row][a.col-1].number===a.number&&-1===b.indexOf(c[a.row][a.col-1])&&this.checkLink(c[a.row][a.col-
1],b);a.col<d-1&&c[a.row][a.col+1]&&c[a.row]
[a.col+1].Nummer===a.Nummer&&-1===b.indexOf(c[a.row][a.col+1])&&this.checkLink(c[a.row][a.col+1],b);a.row<d-1&&c[a.row+1][a.col]&&c[a.row+1][a.col].Nummer===a.Nummer&&-1===b.indexOf(c[a.ro w+1][a.col])&&this.checkLink(c[a.row+1][a.col],b);0<a.row&&c[a.row-1][a.col]&&c[a.row-1][a.col].Nummer===a.Nummer&&-1===b.indexOf(c[a.row-1][a.col])&&this.checkLink(c[a.row-1][a.col],b)}},
initTileSet:Funktion(){
für (var a=e.tableRows,b=e.tileSet,c=0;c<a;c++){b[c]=[];
für (var d = 0; d <a; d++) b [c] [d] = []}},
initBlocks:Funktion()
{
für (var a=e.tileSet,b=this,c=e.el,d=a.length,f=0;f<d;f++)
für(var g=a[f].Länge,h=0;h<g;h++){
var l = this.createBlock(Math.floor(5*Math.random()),f,h);
l.onmouseover=Funktion(){b.mouseOver(diese)};
l.onclick=function(){b.mouseClick()};
a[f][h]=l;
c.anhängenKind(l)}
dies.aktualisieren()},
aktualisieren:Funktion()
{für(var a=e.tileSet,b=0;b<a.length;b++)
für (var c=a[b].Länge,d=0;d<c;d++)
{var f=a[b][d];
null!=f&&(f.row=b,f.col=d,f.style.left=a[b][d].col*e.tileWidth+"rem",f.style.bottom=
a[b][d].Zeile*e.Kachelhöhe+"rem",f.style.backgroundImage="url('./images/"+a[b][d].Nummer+".png')")
}
}
,Block erstellen:Funktion(a,b,c){return new u(a,b,c)
}
}
;m.prototype.init.prototype=m.prototype;window.PopStar=m
})();Größe ändern.js
// JavaScript-Dokument
(Funktion px2rem(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'Orientierungsänderung' im Fenster? 'Orientierungsänderung': 'Größe ändern',
neu berechnen = Funktion () {
var Clientbreite = docEl.Clientbreite;
wenn (!Clientbreite) return;
docEl.style.fontSize = 100 * (Clientbreite / 750) + 'px';
/*
* 100 -> html,body { Schriftgröße:100px; }
* 750 -> Hier ist die Layoutseite 750 Pixel groß, also doppelt so breit wie der Designentwurf des iPhone 6. * Ändern Sie diese beiden Werte je nach der jeweiligen Situation */
};
wenn (!doc.addEventListener) return;
// Die Fenstergröße ändert sich, initialisieren Sie win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', neu berechnen, false);
//Ausführung verhindern, wenn HTML nicht vollständig geladen ist, um die richtige Seitenbreite sicherzustellen setTimeout(function(){
px2rem(doc, gewinnen);
}, 200);
})(Dokument, Fenster);countUp.js
(Funktion(Wurzel, Fabrik) {
wenn (Typ der Definition === 'Funktion' und definieren.amd) {
definieren (Fabrik);
} sonst wenn (Typ der Exporte === 'Objekt') {
module.exports = Fabrik(erfordern, Exporte, Modul);
} anders {
root.CountUp = Fabrik();
}
}(diese, Funktion(erfordern, Exporte, Modul) {
/*
countUp.js
von @inorganik
*/
// Ziel = ID des HTML-Elements oder Variable des zuvor ausgewählten HTML-Elements, in dem die Zählung erfolgt
// startVal = der Wert, bei dem Sie beginnen möchten
// endVal = der Wert, den Sie erreichen möchten
// Dezimalstellen = Anzahl der Dezimalstellen, Standard 0
// Dauer = Dauer der Animation in Sekunden, Standard 2
// options = optionales Objekt von options (siehe unten)
var CountUp = function(Ziel, Startwert, Endwert, Dezimalstellen, Dauer, Optionen) {
var selbst = dies;
self.version = Funktion () { return '1.9.3'; };
// Standardoptionen
selbst.Optionen = {
useEasing: true, // Easing umschalten
useGrouping: true, // 1.000.000 vs. 1000000
Trennzeichen: ',', // als Trennzeichen zu verwendendes Zeichen
Dezimalzahl: '.', // als Dezimalzahl zu verwendendes Zeichen
easingFn: easeOutExpo, // optionale benutzerdefinierte Easing-Funktion, Standard ist Robert Penners easeOutExpo
formattingFn: formatNumber, // optionale benutzerdefinierte Formatierungsfunktion, Standard ist formatNumber oben
Präfix: '', // optionaler Text vor dem Ergebnis
Suffix: '', // optionaler Text nach dem Ergebnis
numerals: [] // optional ein Array mit benutzerdefinierten Ziffern für 0-9 übergeben
};
// Standardoptionen mit übergebenem Optionsobjekt erweitern
if (Optionen && Typ der Optionen === 'Objekt') {
für (var Schlüssel in self.options) {
if (options.hasOwnProperty(Schlüssel) && options[Schlüssel] !== null) {
self.options[Schlüssel] = Optionen[Schlüssel];
}
}
}
wenn (selbst.optionen.trennzeichen === '') {
self.options.useGrouping = falsch;
}
anders {
// Stellen Sie sicher, dass das Trennzeichen eine Zeichenfolge ist (formatNumber nimmt dies an)
selbst.Optionen.Trennzeichen = '' + selbst.Optionen.Trennzeichen;
}
// Stellen Sie sicher, dass requestAnimationFrame und cancelAnimationFrame definiert sind
// Polyfill für Browser ohne native Unterstützung
// von Operningenieur Erik Möller
var letzteZeit = 0;
var Anbieter = ['webkit', 'moz', 'ms', 'o'];
für(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = Fenster[Anbieter[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = Fenster[Anbieter[x]+'CancelAnimationFrame'] || Fenster[Anbieter[x]+'CancelRequestAnimationFrame'];
}
wenn (!window.requestAnimationFrame) {
window.requestAnimationFrame = Funktion(Rückruf, Element) {
var currTime = neues Date().getTime();
var Anrufzeit = Math.max(0, 16 - (aktuelleZeit - letzteZeit));
var id = window.setTimeout(function() { callback(aktuelleZeit + Anrufzeit); }, Anrufzeit);
letzteZeit = aktuelleZeit + Anrufzeit;
Rückgabe-ID;
};
}
wenn (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = Funktion(ID) {
Zeitüberschreitung löschen(id);
};
}
Funktion formatNumber(num) {
var neg = (num < 0),
x, x1, x2, x3, i, Länge;
num = Math.abs(num).toFixed(self.decimals);
Zahl += '';
x = num.split('.');
x1 = x[0];
x2 = x.Länge > 1 ? self.Optionen.Dezimal + x[1] : '';
wenn (selbst.Optionen.Gruppierung verwenden) {
x3 = '';
für (i = 0, len = x1.length; i < len; ++i) {
wenn (i !== 0 und ((i % 3) === 0)) {
x3 = selbst.Optionen.Trennzeichen + x3;
}
x3 = x1[Länge - i - 1] + x3;
}
x1 = x3;
}
// optionale Ziffernsubstitution
wenn (selbst.Optionen.Zahlen.Länge) {
x1 = x1.replace(/[0-9]/g, Funktion(w) {
gibt self.Optionen.Ziffern[+w] zurück;
})
x2 = x2.replace(/[0-9]/g, Funktion(w) {
gibt self.Optionen.Ziffern[+w] zurück;
})
}
Rückgabe (neg? '-': '') + selbst.Optionen.Präfix + x1 + x2 + selbst.Optionen.Suffix;
}
// Robert Penners easeOutExpo
Funktion easeOutExpo(t, b, c, d) {
gibt c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b zurück;
}
Funktion secureNumber(n) {
Rückgabe (Typ von n === 'Zahl' und !isNaN(n));
}
selbst.initialisieren = funktion() {
wenn (selbstinitialisiert) true zurückgibt;
selbst.fehler = '';
self.d = (Typ des Ziels === „Zeichenfolge“)? document.getElementById(Ziel): Ziel;
wenn (!self.d) {
self.error = '[CountUp] Ziel ist null oder undefiniert'
gibt false zurück;
}
self.startVal = Zahl(startVal);
self.endVal = Zahl(endVal);
// Fehlerprüfungen
wenn (sicherstellenNummer(self.startVal) und sicherstellenNummer(self.endVal)) {
selbst.dezimalstellen = Math.max(0, Dezimalstellen || 0);
self.dec = Math.pow(10, self.decimals);
selbst.dauer = Zahl(Dauer) * 1000 || 2000;
self.countDown = (self.startVal > self.endVal);
self.frameVal = self.startVal;
selbstinitialisiert = wahr;
gibt true zurück;
}
anders {
self.error = '[CountUp] startVal ('+startVal+') oder endVal ('+endVal+') ist keine Zahl';
gibt false zurück;
}
};
//Wert auf Ziel drucken
self.printValue = Funktion(Wert) {
var Ergebnis = self.options.formattingFn(Wert);
wenn (self.d.tagName === 'EINGABE') {
this.d.value = Ergebnis;
}
sonst wenn (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
this.d.textContent = Ergebnis;
}
anders {
this.d.innerHTML = Ergebnis;
}
};
self.count = Funktion(Zeitstempel) {
wenn (!self.startTime) { self.startTime = Zeitstempel; }
self.timestamp = Zeitstempel;
var Fortschritt = Zeitstempel – self.startTime;
self.remaining = self.duration – Fortschritt;
// lockern oder nicht lockern
wenn (selbst.optionen.useEasing) {
wenn (selbst.countDown) {
self.frameVal = self.startVal – self.options.easingFn(Fortschritt, 0, self.startVal – self.endVal, self.duration);
} anders {
self.frameVal = self.options.easingFn(Fortschritt, self.startVal, self.endVal - self.startVal, self.duration);
}
} anders {
wenn (selbst.countDown) {
self.frameVal = self.startVal – ((self.startVal – self.endVal) * (Fortschritt / self.duration));
} anders {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (Fortschritt / self.duration);
}
}
// nicht über endVal hinausgehen, da der Fortschritt die Dauer im letzten Frame überschreiten kann
wenn (selbst.countDown) {
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
} anders {
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
}
// Dezimal
self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
//Wert formatieren und drucken
selbst.printValue(selbst.frameVal);
// ob fortgefahren werden soll
wenn (Fortschritt < selbst.Dauer) {
self.rAF = requestAnimationFrame(self.count);
} anders {
wenn (selbst.callback) selbst.callback();
}
};
// starte deine Animation
self.start = Funktion(Rückruf) {
wenn (!self.initialize()) return;
self.callback = Rückruf;
self.rAF = requestAnimationFrame(self.count);
};
// schaltet Animation anhalten/fortsetzen um
selbst.pauseResume = Funktion() {
wenn (!self.paused) {
selbst.paused = wahr;
AnimationFrame abbrechen(self.rAF);
} anders {
selbst.paused = falsch;
lösche self.startTime;
selbst.Dauer = selbst.verbleibend;
self.startVal = self.frameVal;
AnfrageAnimationFrame(self.count);
}
};
// auf Startwert zurücksetzen, damit die Animation erneut ausgeführt werden kann
selbst.reset = funktion() {
selbst.paused = falsch;
lösche self.startTime;
selbstinitialisiert = falsch;
wenn (selbst.initialisieren()) {
AnimationFrame abbrechen(self.rAF);
selbst.druckenWert(selbst.startVal);
}
};
// übergebe ein neues endVal und starte die Animation
self.update = Funktion (neuerEndwert) {
wenn (!self.initialize()) return;
neuerEndwert = Zahl(neuerEndwert);
wenn (!ensureNumber(newEndVal)) {
self.error = '[CountUp] update() – neuer Endwert ist keine Zahl: '+newEndVal;
zurückkehren;
}
selbst.fehler = '';
wenn (newEndVal === self.frameVal) zurückgeben;
AnimationFrame abbrechen(self.rAF);
selbst.paused = falsch;
lösche self.startTime;
self.startVal = self.frameVal;
self.endVal = neuesEndVal;
self.countDown = (self.startVal > self.endVal);
self.rAF = requestAnimationFrame(self.count);
};
// startVal bei Initialisierung formatieren
wenn (self.initialize()) self.printValue(self.startVal);
};
CountUp zurückgeben;
}));
index.css
a, Körper, Schaltfläche, dd, div, dl, dt, Formular, h1, h2, h3, h4, h5, h6, Eingabe, Bezeichnung, li, ol, p, span, Tabelle, td, Textbereich, th, tr, ul
{ -webkit-box-sizing:border-box;
-moz-box-sizing:Rahmenbox;Box-Sizing:Rahmenbox;
Rand: 0; Polsterung: 0;
Rahmen: 0;-WebKit-Tap-Highlight-Farbe: transparent
}
Textkörper,html{
Breite: 100 %; Mindesthöhe: 100 %; Hintergrundfarbe: #fff;
-webkit-Benutzerauswahl: keine;
-moz-Benutzerauswahl: keine;
-ms-Benutzerauswahl: keine;
Benutzerauswahl: keine
}
Körper
{Farbe:#333;
Schriftfamilie:Microsoft YaHei}
h1, h2, h3, h4, h5, h6
{
Schriftstärke: 400;
Schriftgröße: 100 %
}
A{
Farbe: #555
}
ein, ein:schweben{
Textdekoration: keine
}
img{
Rand: keiner
}
li,ol,ul{
Listenstil: keiner
}
Eingabe,Textbereich{
Umriss: 0;
-webkit-auftritt:keine
}
::-webkit-Eingabeplatzhalter{
Farbe: #b0b0b0
}
:-moz-Platzhalter,::-moz-Platzhalter{
Farbe: #b0b0b0
}
:-ms-Eingabeplatzhalter{
Farbe: #b0b0b0
}
[v-Umhang]{
Anzeige: keine
}
.Glücksstern{
Position: fest;
oben: 0; links: 0; Breite: 100 %;
Höhe: 100 %;
Hintergrundbild: URL (../images/cover.jpg); Hintergrundgröße: Cover; Hintergrundwiederholung: keine Wiederholung; Schriftgröße: 0;
-moz-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße:Abdeckung
}
.score-Ziel
{
Polsterung: 0,3rem; Höhe: 1,5rem;
-webkit-box-pack:begründen;
-webkit-justify-content:Leerzeichen zwischen;
-moz-box-pack:begründen;
-ms-flex-pack:begründen;
Inhalt ausrichten:Abstand zwischen
}
.score-aktuell,.score-ziel{
Anzeige: -webkit-box;Anzeige: -webkit-flex;Anzeige: -moz-box;Anzeige: -ms-flexbox;
Anzeige: Flex; Breite: 100 %;
Farbe: #fff; Schriftgröße: .24rem;
-webkit-box-align:center;
-webkit-align-items:center;
-moz-box-align:center;
-ms-flex-align:center;
Elemente ausrichten: zentrieren
}
.score-aktuell{
Position:absolut;oben:.3rem;
-webkit-box-orient:vertikal;
-webkit-box-direction:normal;
-webkit-flex-direction:Spalte;
-moz-box-orient:vertikal;
-moz-box-Richtung:normal;
-ms-flex-direction:Spalte;
Flex-Richtung:Spalte;
-WebKit-Box-Pack:Mitte;
-webkit-justify-content:center;
-moz-box-pack:Mitte;
-ms-flex-pack:center;
Inhalt ausrichten: zentrieren
}
.score-aktuelle Spanne{
Farbe: #fffc0f;
Schriftgröße: .48rem
}
.score-Auswahl{
Breite: 100 %;
Farbe: #fff;
Textausrichtung: zentriert;
Schriftgröße: .28rem; Deckkraft: 0;
-webkit-transition: Deckkraft 1s;
-moz-Übergang: Deckkraft 1 s;
-o-Übergang: Deckkraft 1 s;
Übergang: Deckkraft 1s
}
.Sternenliste{
Position: fest;
unten: 0; links: 0;
Breite: 100 %;
Höhe: 70%}
.Sternenliste li{
Position: absolut;
Breite: .75rem;
Höhe: .75rem;
Rand: 0;
-webkit-border-radius:.16rem;
-moz-border-radius:.16rem;
Randradius: .16rem;
Hintergrundgröße: Abdeckung;
-webkit-transition:links .3s,unten .3s,-webkit-transform .3s;-moz-transition:transform .3s,links .3s,unten .3s,-moz-transform .3s;-o-transition:links .3s,unten .3s,-o-transform .3s;übergang:links .3s,unten .3s,-webkit-transform .3s;übergang:transform .3s,links .3s,unten .3s;übergang:transform .3s,links .3s,unten .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s;
-moz-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße:Abdeckung
}
.Sternliste li.scale{
Rand: 2px durchgezogen #bfefff;
-webkit-animation:scale .3s linear unendlich alternativ;
-moz-animation:scale .3s linear unendlich alternativ;
-o-animation:Skala .3s linear unendlich alternativ;animation:Skala .3s linear unendlich alternativ}
.star-list li img{position:absolute;top:15%;left:15%;width:70%;height:70%
@-webkit-keyframes skalieren
0 %{-webkit-transform:scale(1);transform:scale(1)
}
Zu{
-webkit-transform:Skala(.95);
transformieren:skalieren(.95)
}
}
@-moz-keyframes skalieren
0 %{
-moz-transform:Skala(1);
transformieren:skalieren(1)}
Zu{
-moz-transform:Skala(.95);
transformieren:skalieren(.95)
}
}
@-o-keyframes scale{
0 %{
-o-transform:Skala(1);
transformieren:skalieren(1)
}
Zu{
-o-transform:Skala(.95);transform:Skala(.95)
}
}
@keyframes skalieren{
0 %{
-webkit-transform:Skala(1);
-moz-transform:Skala(1);
-o-transform:Skala(1);
transformieren:skalieren(1)
}
Zu
{
-webkit-transform:Skala(.95);
-moz-transform:Skala(.95);
-o-transform:Skala(.95);transform:Skala(.95)
}
}.DS_Store Dies ist das Ende dieses Artikels über die JavaScript-Implementierung von Candy Crush Saga – Quellcode. Weitere relevante Inhalte zur JS-Implementierung von Candy Crush Saga finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue
>>: Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung
Artikel empfehlen
Achten Sie beim Schreiben von Kurzeigenschaften in CSS auf die Reihenfolge der TRouBLe (um Fallstricke zu vermeiden).
Kurzeigenschaften werden verwendet, um mehreren E...
Beispielcode für HTML-Layout links und rechts
CSS: Code kopieren Der Code lautet wie folgt: html...
Erläuterung der objektorientierten Klassenvererbung in JavaScript
1. Objektorientierte Klassenvererbung In den obig...
Beispiel zum Referenzieren von Umgebungsvariablen in Docker Compose
In einem Projekt müssen Sie häufig Umgebungsvaria...
Lösung für MySQLSyntaxErrorException beim Herstellen einer Verbindung zu MySQL über Bitronix
Lösung für MySQLSyntaxErrorException beim Herstel...
Sammlung gemeinsamer DIV-Attribute
1. Immobilienliste Code kopieren Der Code lautet w...
Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme
Redux ist ein einfacher Statusmanager. Wir werden...
Detaillierte Erklärung der MySQL-Gruppierung durch Optimierung
Inhaltsverzeichnis Standardausführungsprozess Opt...
Vue+js realisiert Video-Ein- und Ausblendeffekte
Vue+js realisiert das Ein- und Ausblenden des Vid...
4 Möglichkeiten, doppeltes Einfügen von Daten in Mysql zu vermeiden
Die gebräuchlichste Methode besteht darin, einen ...
HTML-Meta erklärt
Einführung Der Meta-Tag ist ein Hilfstag im HEAD-...
Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React
Im Vergleich zum alten Lebenszyklus Drei Hooks we...
Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung
Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...
So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein
1. Geschäftshintergrund Die Verwendung einer Mask...
Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus
Vorwort Das Konzept des Dunkelmodus stammt ursprü...