Die Animationen erfordern kein spezielles Plugin und sind mit den meisten Browsern kompatibel. Für den grafischen Teil wird CSS3 verwendet.
Einige Eigenschaften sind:
Die Animationsmethode ()
Mit dieser Methode können Sie einem Element einer Web-Pogina einen CSS-Stil zuweisen, z. B. um eine Ebene zu vergrößern.
Die Syntax lautet wie folgt
(Selektor) .animate ({style}, Geschwindigkeit)
Ein einfaches Beispiel für die Animationsfunktion, mit der ein CSS-Stil auf ein Element angewendet wird:
<html> <head> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </ script> <script> $ (document). ready (function () {$ ("# buttonA"). click (function () {$ ("# greencloak"). animiere ({height: "400px"});}); $ ("# buttonB"). Klicken Sie auf (function () {$ ("# capaverde verde"). animate ({height: "50px"});}); </ script> </ head> <body> <button id = "ButtonA"> Animieren und Erweitern entlang </ button> <button id = "ButtonB"> Animieren und Reduzieren </ button> <div id = "layer green" style = "Hintergrund: # 98bf21; Höhe: 200px; Breite: 200px; Rand: 10px; "> </ div> </ body> </ html>
So können wir sehen, wie wir mit der Methode animate () CSS auf ein Element anwenden und es in einer bestimmten Zeit (Millisekunden) ändern können, um den gewünschten Effekt zu erzielen.
Wir haben das Spiel mit Jquery und der Animate-Methode erstellt ()
Mit dieser Methode erstellen wir ein Spiel im Simon-Dice-Stil oder ein Memory-Spiel, bei dem mehrere rote Kreise auf dem Bildschirm angezeigt werden und nur einer von ihnen in einer blauen Sequenz angezeigt wird. Der Spieler sollte auf klicken, um die Sequenz zu wiederholen, wenn es ihm gelingt. Die Reihenfolge, in der der Bildschirm neu gezeichnet wird, fügt weitere Kreise hinzu und erhöht den Schwierigkeitsgrad. Wenn der Spieler die Sequenz nicht besteht, muss er diese Spielstufe wiederholen, bis er sie korrekt beendet hat. Eine Warnung teilt Ihnen auch mit, ob Sie das Level abgeschlossen haben, und wechselt zum nächsten Level.
Das Spiel beginnt mit 2 Reihen und 2 Spalten, von denen 4 Kreise für einige Sekunden blau dargestellt werden. Dann müssen wir auf die beiden blauen klicken. So wird in jeder Ebene eine Spalte und in einer anderen Ebene eine Zeile hinzugefügt, und es werden auch aktivere Kreise in Blau hinzugefügt, und dann wird versucht, sich an dieselbe Sequenz zu erinnern.
Es spielt keine Rolle, in welcher Reihenfolge das Bild angezeigt wird, aber klicken Sie auf alle blauen Kreise.
Die maximale Tafel- oder Bühnengröße beträgt 6 Spalten mal 6 Zeilen, was ein Raster von 36 Kreisen ergibt.
Wir suchen nach einem Hintergrundbild für unser Spiel, das der Hintergrund des Webs sein wird oder wir können eine flache Farbe verwenden. Wir beginnen mit der Erstellung eines Spieleverzeichnisses und in einer index.html-Datei, die die Webseite enthält, wird der Code des Webs wie folgt lauten:
<html> <head> <title> Memory-Spiel </ title> <script src = "http://code.jquery.com/jquery-1.11.2.js" language = "javascript" type = "text / javascript"> </ script> <script src = "game.js" language = "javascript" type = "text / javascript"> </ script> <link href = "styles.css" rel = "stylesheet" /> </ head> <body> <div id = "background"> <h2> Spiel Simon Dice </ h2> <h3> Wir müssen uns an die Abfolge der blauen Kreise und Symbole erinnern Klicken Sie auf die Wiederholung der Sequenz </ h3> <div class = "container"> <div class = "game"> </ div> </ div> </ div> </ body> </ html>
Die Version von Jquery mit 1.9 oder höher ist für dieses Beispiel in Ordnung. Anschließend erstellen wir die Datei styles.css für Stylesheets. Wir verwenden CSS3 für Schatten und einige Effekte für unsere Spiele. Die Bezeichner und Klassen werden dann von Jquery verwendet, um die Animation und Interaktivität des Spiels durchzuführen.
Körper { Rand: 0px; Polsterung: 0px; } #fondo { Hintergrund: # 333 url (background.jpg); Textausrichtung: Mitte; Rand oben: -20px; Auffüllenoberteil: 10px; Höhe: 800px; Anzeige: Block; } h2 { Farbe: #fff; } h3 { Farbe: #ccc; } .containment { Polsterung: 4px; Anzeige: Inline-Block; Hintergrundfarbe: #ffffff; Breite: 200px; Höhe: 200px; Rand: 1px schwarzer Feststoff; Rand: 1px festes RGB (204, 204, 204); Randradius: 3px 3px 3px 3px; -webkit-box-shadow: 6 x 5 x 8 x 0 x rgba (50, 50, 50, 0,75); -moz-box-shadow: 6 x 5 x 8 x 0 x rgba (50, 50, 50, 0,75); Kastenschatten: 6 x 5 x 8 x 0 x rgba (50, 50, 50, 0,75); } .figura { Rand: 2px #fff fest; Hintergrund: Netzwerk; Rand: 0px; Polsterung: 0px; Anzeige: Inline-Block; Kastenschatten: 2px 2px 2px rgb (136, 136, 136); Rand: 2px; } .figura: schweben { Cursor: Zeiger; } .activa { Hintergrundfarbe: # 4D90FE; } .error { Hintergrundfarbe: Netzwerk; } .circle { / * Rahmenradius: 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 juego.js wir schreiben den folgenden Javascript-Code, wir müssen hier identifizieren, welche Klassen und CSS-Kennungen am Spiel teilnehmen und für welche wir sie verwenden. Jedes hat ein Attribut und Sie können Klassen mit addClass hinzufügen.
var Tfigura = 55; // Größe der Figur var Start Game = false // Start Game False = No var ProximoLivel = true; // Wahr setzt das Spiel fort, wenn es falsch ist, stoppt das Spiel var columns = rows = 2 // Anfangsgröße der Chips oder Zirkusse auf dem Brett 2x2 Bone 4 Kreise $ (document) .ready (function () { // Ich erstelle das Spiel anhand der Anzahl der Spalten und Zeilen für jeden Schwierigkeitsgrad GeneraJuego (Spalten, Zeilen); }); Funktion GeneraJuego (c, r) { // Wenn ProximoLevel gleich false ist, wird angezeigt, dass das Spiel beendet werden soll if (! Nächstes Level) zurückkehren; // Ich stoppe das Spiel NextLevel = false; // Wir löschen alle Elemente der Bühne oder des Spielplans $ (".juego") .fadeOut (1000, // am Ende der Fade-Methode // Leere die Spielelemente auf der Bühne oder dem Spielplan function () { $ (".juego") .empty (); // Erweitern Sie die Bühne oder das Spielfeld, um die Kreise aufzunehmen $ (".container") .animate ({height: ((Tfigure + 8) * r) + "px", width: ((Tigure + 8) * c) + "px"}, 1000, // am Ende der Erweiterung mit amimate () // Ich erstelle die neuen Figuren entsprechend der neuen Dimension des Bildschirms und der Spielebene function () { für (i = 0; i <(c * r); i ++) $ (".juego") .append (CrearFigura ("circulo", Tfigura)); $ (".juego") .fadeIn (200); // Ich erstelle in zufälliger Form, welche Kreise der Tafel angeklickt werden könnten und welche nicht BlueFrame erstellen (); } ) } ); } Funktion CrearFigura (tipofigura, r) { // Wenn eine Figur angeklickt wird $ ("<div>") zurückgeben. addClass ("figure" + tipofigura) .width (r) .height (r) .click (function () { if (Spiel starten) { // Ich überprüfe, ob diese Figur das ausgewählte Attribut hat, ob es eines der aktiven in blau ist if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); sonst $ (this) .addClass ("error"); var SelectedTotal = $ (".figure [selected = 'selected']") .length // Wenn die Anzahl der Klicks in aktiven Kreisen und die Anzahl der Klicks in inaktiven Kreisen größer ist als die Anzahl der Klicks, setzen wir das Spiel nicht fort und generieren den Bildschirm später erneut, ohne das Level zu ändern if (($ (". active"). length + $ (". error"). length)> = TotalSelected) { Spiel starten = falsch; $ (".figure [selected = 'selected']: not (.active)") .addClass ("active"); // Wenn die Klickfehlerstufe 0 ist, bedeutet dies, dass wir die Sequenz getroffen haben if ($ (". error"). length == 0) { alert ("Sie haben die Sequenz erraten, die Sie zum nächsten Level übergeben haben"); if (Spalten == Zeilen) columns ++; sonst wenn (Spalten> Zeilen) rows ++; // Die maximale Ebene beträgt 6 Zeilen mal 6 Spalten if (Spalten> 6) { Spalten = 6; Zeilen = 6; } } GeneraJuego (Spalten, Zeilen); } } }); } Funktion CrearFiguraAzul () { var count = 0; var length = $ (".juego> .figura") .length for (count = 0; count <Math.ceil (length / 3);) { var random = Math.ceil (Math.random () * length); if (zufällig <Länge) { if (! $ (".juego> .figura") .eq (zufällig) .hasClass ("active")) { $ (".juego> .figura") .eq (zufällig) .addClass ("aktiv"). attr ("ausgewählt", "ausgewählt"); count ++; } } } // Blende die ausgewählten Figuren aus, nachdem die zu wiederholende Sequenz angezeigt wurde window.setTimeout (HidefiguresBlue, 1200) } Funktion HidefiguresAzules () { $ (".juego> .figura") .removeClass ("active"); Spiel starten = wahr; NextLevel = true; }
Damit wir das Spiel beenden können, können wir Punkte, Hinweise und Nachrichten hinzufügen. Wenn wir möchten, können wir das Spiel auch beenden und fortsetzen. Denken Sie jedoch daran, dass es sich nur um Javascript, HTML und CSS handelt. Es wäre jedoch einfach, das Hinzufügen von Ergebnissen zu einer Basis von zu erweitern Daten oder einen höheren Schwierigkeitsgrad enthalten.