jQuery von Kopf bis Fuß (German Edition)
Teil des Monstergesichts angeklickt hat. Eigentlich brauchen Sie also nur eine Zeile Code:
... und auch die Funktion zufallszahl_erzeugen
In den Kapitel 2 , Kapitel 3 und Kapitel 6 haben wir bereits eine Funktion zum Erzeugen von Zufallszahlen programmiert. Diese Funktion können wir hier mit minimalen Anpassungen wiederverwenden.
Definieren Sie Ihre Variable und übergeben Sie sie an die Funktion:
Hier ist die Kernaufgabe der Funktion:
Hier das Ergebnis (bzw. die Ausgabe) der Funktion:
Nächster Programmpunkt: die
ziel_position
(der zufällig gewählte Gesichtsteil), zu der die Bildleiste verschoben werden soll
Code-Fertiggericht
Erweitern Sie Ihre Dateien index.html und meine_skripts.js um den hervorgehobenen Code. Damit wird Ihre Zufallsfunktion eingerichtet. Außerdem bauen wir ein paar Warnmeldungen ein, die Ihnen die (mit der Zufallszahl erzeugte) Zielposition und die aktuelle Position anzeigen (die sich aus der Anzahl der Klicks auf einen bestimmten Gesichtsteil ergeben).
Probefahrt
Nachdem Sie den Code von den vorigen Seiten in Ihr Programm eingebaut haben, öffnen Sie die Seite index.html im Browser, um die
mischen
-Funktion zu testen. Klicken Sie zehn bis zwanzig Mal auf den Button »Gesichter mischen«, um zu überprüfen, ob wirklich alles funktioniert.
Der Zufallsgenerator funktioniert ...
... für die ersten paar Klicks
Die Funktionen machen nicht ganz, was wir wollen, aber genau das, was Sie im Code geschrieben haben. Wir wollen versuchen, herauszufinden, woran wir offensichtlich nicht gedacht haben.
Kraft-Training
Was müssen Sie tun, damit der Bildstreifen nicht aus dem Rahmen fällt und stattdessen ein zufälliger Monster-Gesichtsteil angezeigt wird?
Dinge relativ zur aktuellen Position bewegen
Damit der Bildstreifen nicht auf dem Rahmen fällt, sondern zufällig einen Teil eines Monstergesichts zeigt, müssen Sie ihn relativ zu seiner aktuellen Position bewegen. Das heißt, wir müssen die aktuelle Position und etwas Bedingungslogik in unsere Funktion einbauen. Es folgen die entsprechenden Schritte.
Dann klickt der Besucher auf den Button »Gesichter mischen«, der eine Zufallszahl zwischen 0 und 9 erzeugt. Dadurch kann zweierlei passieren.
Szenario 1: Ziel > Aktuell
Die
zufallszahl_erzeugen
-Funktion gibt den Wert 5 zurück. Dieser wird in der Variable
ziel_position
gespeichert. Das heißt, der Wert von
ziel_position
ist größer als der Wert der Variablen
aktuelle_position
. Um diese Situation in den Griff zu bekommen, brauchen wir etwas Bedingungslogik.
Szenario 2: Ziel < Aktuell
Die Funktion
zufallszahl_erzeugen
gibt den Wert 1 zurück und weist ihn der Variable
ziel_position
zu. In diesem Fall ist er kleiner als der Wert von
aktuelle_position
. Können Sie sich basierend auf Szenario 1 denken, welche Art von Logik hier gebraucht wird?
Pool-Puzzle
Ihre Aufgabe besteht darin, die Codeschnipsel aus dem Pool zu fischen und sie auf den leeren Zeilen im Code zu platzieren. Jeder Codeschnipsel soll nur einmal benutzt werden, allerdings werden vermutlich nicht alle Schnipsel gebraucht. Ihr Ziel ist es, die
mischen
-Funktion so umzubauen, dass nicht versehentlich irgendwelche Gesichtsteile fehlen.
var w = 367;
var m = 10;
function zufallszahl_erzeugen(zahl){
var zufallszahl = Math.floor(Math.random()*zahl);
return zufallszahl;
}
function mischen(){
$(".gesicht")___________________ {
var ziel_position = zufallszahl_erzeugen(m);
var aktuelle_position = klicks[index] ;
klicks[index] = ziel_position;
if(____________________________________) {
var endpunkt = (__________________________________) * w;
$(this)_animate( );
}else if(___________________________________){
var endpunkt = (__________________________________) * w;
$(this)_animate(______________________________);
}else{
// Beide Werte sind gleich_ Nicht bewegen!
}
});
};
Hinweis: Jeder Codeschnipsel im Pool darf nur einmal benutzt werden!
Pool-Puzzle: Lösung
Ihre Aufgabe bestand darin, die Codeschnipsel aus dem Pool zu fischen und sie auf den leeren Zeilen im Code zu platzieren. Jeder Codeschnipsel sollte nur einmal benutzt werden, allerdings werden vermutlich nicht alle Schnipsel gebraucht. Ihr Ziel bestand darin, die
mischen
-Funktion so umzubauen, dass nicht versehentlich irgendwelche Gesichtsteile fehlen.
Genau.
Erinnern Sie sich noch an den Button »Neu anfangen«, den wir vor ein paar Seiten in die Datei index.html file eingebaut haben? Den müssen Sie jetzt noch mit einer
Weitere Kostenlose Bücher