If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Einfache Szenenwechsel

Sagen wir, dass wir die Geschichte von Winston in einem illustrierten Buch darstellen wollen, bei dem der Nutzer klicken muss, um den nächsten Teil der Geschichte zu lesen. Wir fangen mit der Hauptszene an, die nur einen Titel zeigt:
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
Nun wollen wir es dem Nutzer ermöglichen, den nächsten Teil der Geschichte aufzurufen: Winstons dramatische Geburt. Dazu können wir eine Funktion mouseClicked definieren, die immer dann aufgerufen wird, wenn der Nutzer mit der Maus klickt, und wir können dort Code zum Zeichnen unserer zweiten Szene einfügen. Achte darauf, dass wir vor dem Zeichnen der zweiten Szene background() aufrufen müssen. Ansonsten liegen beide Szenen direkt übereinander:
mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};
Probiere es im Program unten. Klicke um den Szenenwechsel zu sehen und der kleine Winston wird geboren!
Nun möchte ich, dass du den Code für die zweite Szene editierst, wie z.B. den Text oder die Platzierung des Bildes anzupassen. Hast du bemerkt, wie du jedes Mal wenn du die Resultate sehen möchtest, einen Mausklick brauchst, um die zweite Szene zu sehen?
Persönlich finde ich das ärgerlich, da es sooo lange dauert, um Szene 2 zu bearbeiten, bis sie mir gefällt. Stelle dir vor, wir hätten 10 Szenen und wollten Szene 10 bearbeiten - wir müssten jedes mal 10 mal klicken für jede Bearbeitung. Unmöglich!
Lösen wir dieses Problem zuerst. Wir beiden könne diese Umstände vielleicht ganz gut ignorieren, aber wir wollen auch effiziente Programmierer werden. Und wäre es nicht effizienter, wenn wir die Ergebnisse direkt in Echtzeit sehen könnten? Dafür wäre es eine einfache Lösung, den gesamten Code der zweiten Szene in eine Funktion zu packen, diese Funktion durch mouseClicked aufrufbar zu machen und die Funktion dann aufzurufen, wenn wir debuggen. Ich meine folgendes:
var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Lil Winston is born!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

mouseClicked = function() {
    drawScene2();
};

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);

drawScene2();
Wenn wir aus der zweiten Szene eine Funktion gemacht haben, können wir auch aus der ersten Szene eine Funktion machen. Packe einfach den gesamten Code in eine Funktion und rufe ihn auf.
var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("The Story of Winston", 10, 200);
};
Jetzt probieren Sie das Programm unten aus. Dieses Mal, wenn du Änderungen an Szene 2 vornehmen möchtest, kannst du einfach den Aufruf drawScene2() entfernen und deine Änderungen sofort anzeigen.
Sehr gut, jetzt haben wir eine Hauptszene und eine zweite Szene. Was machen wir, wenn wir eine dritte Szene anzeigen wollen? Oder zurück zur ersten Szene gehen wollen, wenn wir auf die dritte klicken? Dafür müssen wir die Logik von mouseClicked so ändern, dass eine bedingte Auswahl für die angezeigten Szenen getroffen wird, anstatt immer die zweite Szene aufzurufen. Dies bedeutet, dass wir eine if-Anweisung benötigen, in der eine bestimmte Bedingung geprüft wird. Wir können dafür zunächst Pseudocode verwenden:
// Wenn der Benutzer einen Mausklick ausführt:
    // wenn die aktuelle Szene #1 ist, gehe zu #2
    // wenn die aktuelle Szene #2 ist, gehe zu #3
    // wenn die aktuelle Szene #3 ist, gehe zurück zu #1
Es scheint so, als müssten wir die aktuelle Szene als "current scene" aufzeichnen, was in Form einer Zahl am meisten Sinn ergibt. Wir deklarieren eine globale Variable currentScene und überprüfen sie innerhalb von mouseClicked.
var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};
Die Bedingungen sehen wie unser Pseudocode aus, es gibt jedoch ein Problem: Wir haben für currentScene bisher keinen Wert gesetzt, weshalb diese Bedingung niemals wahr sein wird. Wir könnten ihn innerhalb der if-Bedingungen festlegen, allerdings ist es wahrscheinlich günstiger, dies direkt innerhalb der Funktion "drawScene" zu machen. So ist die Variable richtig gesetzt, egal woher die Szenenzeichenfunktion aufgerufen wird.
var drawScene1 = function() {
    currentScene = 1;
    ...
};

var drawScene2 = function() {
    currentScene = 2;
    ...
};

var drawScene3 = function() {
    currentScene = 3;
    ...
};
Im untenstehenden Programm ist alles zusammengefügt. Klicke dich einfach durch und schau dir an, wie die Szenen bis zum Anfang der Geschichte durchwechseln. Versuche, eine vierte Szene hinzuzufügen (Winston trifft Oh Noes? Winston trifft Winstonia und zieht nach Winstonsin?), und lass die neue Programmversion laufen:

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.