Inhaltsverzeichnis
Viele Webentwickler verwenden die Jquery-Bibliothek, um ihre Webseiten interaktiver und funktionaler zu gestalten. Die jQuery-Bibliothek bietet mehrere Methoden und Funktionen, darunter den Jquery-Effekt, der verwendet wird, um den Elementen einer Website Interaktivität und Animation hinzuzufügen.Die Animationen benötigen kein spezielles Plugin und sind mit den meisten Browsern kompatibel, auch CSS3 wird für den grafischen Teil verwendet.
Einige Eigenschaften sind:
Die animate()-MethodeDiese Methode ermöglicht es, einen CSS-Stil auf ein Element einer Webseite anzuwenden, um beispielsweise eine Ebene zu vergrößern.
Die Syntax ist wie folgt
(Selektor) .animieren ({style}, Geschwindigkeit)Ein einfaches Beispiel für die Animationsfunktion, die verwendet wird, um einen CSS-Stil auf ein Element anzuwenden:
Animieren und zusammenklappen Animieren und reduzierenWir können also sehen, wie wir mit der animate()-Methode CSS auf ein Element anwenden und es in einer bestimmten Zeit (Millisekunden) ändern können, um jeden gewünschten Effekt zu erzeugen.
Wir erstellen das Spiel mit Jquery und der Animate()-Methode
Wir werden mit dieser Methode ein Spiel im Simon-Dice-Stil oder ein Memory-Spiel erstellen, das darin besteht, eine Reihe von roten Kreisen auf dem Bildschirm anzuzeigen und nur einige von ihnen werden in einer blauen Sequenz angezeigt. Der Spieler muss die Sequenz wiederholen, wenn er Wenn die Sequenz erfolgreich ist, wird der Bildschirm neu gezeichnet, weitere Kreise hinzugefügt und der Schwierigkeitsgrad erhöht. Wenn der Spieler die Sequenz nicht besteht, muss er diese Spielstufe wiederholen, bis er sie korrekt abgeschlossen hat. Außerdem wird Ihnen eine Warnung mitgeteilt, ob Sie das Level abgeschlossen haben und somit zum nächsten Level gelangen.
Das Spiel beginnt mit 2 Reihen und 2 Spalten, 4 Kreisen, von denen 2 für einige Sekunden blau dargestellt werden. Dann müssen wir auf die beiden klicken, die blau waren. So wird in jeder Ebene eine Spalte und in einer anderen Ebene eine Zeile hinzugefügt, außerdem werden weitere aktive Kreise in Blau hinzugefügt, um später zu versuchen, sich die gleiche Reihenfolge zu merken.
Die Reihenfolge des Erscheinens spielt keine Rolle, sondern es werden alle blau markierten Kreise angeklickt.
Die maximale Größe des Boards oder der Bühne beträgt 6 Spalten mal 6 Zeilen, was ein Raster von 36 Kreisen ergibt.
Memory-SpielSimon sagt Spiel
Wir müssen uns die Abfolge der blauen Kreise merken und
Klicken Sie auf Wiederholen der Sequenz
Die Jquery-Version mit 1.9 oder höher ist für dieses Beispiel in Ordnung. Dann erstellen wir die Datei style.css für die Stylesheets, verwenden CSS3 für die Schatten und einige Effekte für unsere Spiele. Die Bezeichner und die Klassen werden dann von Jquery verwendet, um die Animation und Interaktivität des Spiels durchführen zu können.
Körper {Rand: 0px; Füllung: 0px; } #background {background: # 333 url (background.jpg.webp); Textausrichtung: Mitte; Rand oben: -20px; Polsterung-Oberseite: 10px; Höhe: 800px; Bildschirmsperre; } h2 {Farbe: #fff; } h3 {Farbe: #ccc; } .container {Auffüllung: 4px; Anzeige: Inline-Block; Hintergrundfarbe: #ffffff; Breite: 200px; Höhe: 200px; Rand: 1px schwarzer Vollton; Rahmen: 1px festes RGB (204, 204, 204); Randradius: 3px 3px 3px 3px; -webkit-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); -moz-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0,75); Kastenschatten: 6px 5px 8px 0px rgba (50, 50, 50, 0,75);; } .figure {border: 2px #fff solid; Hintergrund: rot; Rand: 0px; Füllung: 0px; Anzeige: Inline-Block; Box-Schatten: 2px 2px 2px RGB (136, 136, 136); Rand: 2px; } Abbildung: Hover {Cursor: Zeiger; } .aktiv {Hintergrundfarbe: # 4D90FE; } .error {Hintergrundfarbe: rot; } .circle {/ * Randradius: 50px; * / Breite: 100px; Höhe: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; Randradius: 50px; }Wenn wir die Stile erstellt haben, können wir die Funktionalität und Animation des Spiels erstellen. Wir erstellen eine Datei game.js Wir schreiben den folgenden Javascript-Code, wir müssen hier identifizieren, welche Klassen und CSS-Identifikatoren am Spiel teilnehmen und wofür wir sie verwenden. Jeder hat ein atrr-Attribut und Klassen können mit addClass hinzugefügt werden.
var Tfigure = 55; // Größe der Figur var StartGame = false // Spiel starten False = Nein var NextLevel = true; // Wahr, das Spiel fortsetzen, wenn es falsch ist, stoppt das Spiel var Spalten = Reihen = 2 // Anfangsgröße der Chips oder Kreise auf dem Brett 2x2, das sind 4 Kreise $ (Dokument) .ready (Funktion () {// Ich generiere das Spiel nach der Anzahl der Spalten und Reihen jedes Schwierigkeitsgrades GeneraJuego (Spalten, Reihen);}); Funktion GameGenerate (c, r) {// If NextLevel gleich false zeigt an, dass das Spiel beendet werden soll if (! NextLevel) return; // Ich beende das Spiel NextLevel = false; // Wir löschen alle Elemente der Bühne oder des Spielbretts $ (".game") .fadeOut (1000, // am Ende der Fade-Methode // leeren die Elemente des Spiels auf der Bühne oder Spielbrettfunktion ( ) {$ (".game") .empty (); // Erweitere die Bühne oder das Spielbrett, um die Kreise aufzunehmen $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px", width: ((Tfigure + 8) * c) + "px"}, 1000, // am Ende der Erweiterung mit amimate () // ich erstelle die neuen Figuren entsprechend der neuen Dimension des Bildschirms i game level function () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("circle", Tfigure)); $ (".game" ) .fadeIn (200); // Ich erstelle zufällig, welche Kreise auf dem Board angeklickt werden können und welche nicht CreateBlueFigure (;})}); } Funktion CreateFigure (shapetype, r) {// Wenn eine Form angeklickt wird, geben Sie $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Ich überprüfe, ob diese Figur das ausgewählte Attribut hat, d ist eine davon in blau aktiv if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Wenn die Anzahl der Klicks in aktiven Kreisen und die Anzahl der Klicks in nicht aktiven Kreisen größer ist als die Anzahl der getätigten Klicks, wir setzen das Spiel nicht fort und regenerieren den Bildschirm später ohne Änderung des Levels if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Wenn die Klickfehlerstufe 0 ist, bedeutet dies, dass wir die Sequenz if ($ (". error"). length == 0 ) {alert ("Sie haben die Sequenz getroffen, gehen Sie zum nächsten Level"); if (columns == rows) column ++; else if (columns> rows) rows ++; / / Die maximale Stufe so n 6 Zeilen mal 6 Spalten if (Spalten> 6) {Spalten = 6; Reihen = 6; }} GeneraJuego (Spalten, Zeilen); }}}); } Funktion CreateBlueFigure () {var count = 0; var length = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length/3);) {var random = Math.ceil (Math.random () * length); if (random .figure ") .eq (random) .hasClass (" active ")) {$ (" .game> .figure ") .eq (random) .addClass (" active "). attr (" selected ", "selected"); count ++;}}} // Versteckt die ausgewählten Figuren nach der Anzeige der zu wiederholenden Sequenz window.setTimeout (HideBlueFigures, 1200)} function HideBlueFigures () {$ (".game> .figure") . removeClass ("active"); GameStart = true; NextLevel = true;}So schließen wir das Spiel ab, wir können Punkte, Warnungen und Nachrichten hinzufügen, auch Ton, wenn wir möchten, zusätzlich zu der Möglichkeit, das Spiel zu stoppen und fortzusetzen, denken Sie daran, dass es nur Javascript, HTML und CSS ist, aber es wäre einfach zu Erweitern Sie das Hinzufügen von Ergebnissen zu Datenbankdaten oder integrieren Sie einen höheren Schwierigkeitsgrad.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
