Beispiele und Hacks

• Passwort-Abfrage innerhalb einer Szene
• Typewriter Effekt

Passwort-Abfrage innerhalb einer Szene

Wenn du eine eigene Passwort- oder Wertabfrage implementieren möchtest, dann erstelle zunächst eine neue, leere Szene.

1. Füge die Funktion "Javascript" hinzu:

    window.passwort = function () {
    
    let content = '<input type="text" id="passwort" name="name" required size="10" placeholder="Passwort?">'
    
    $.confirm({
        title: 'Bitte gib ein gültiges Passwort ein:',
        content: content,
        buttons: {
            'Flug suchen': {
                text: 'Passwort prüfen',
                btnClass: 'btn-blue',
                action: function () {
                    var passwort = this.$content.find('#passwort').val();
                    if(!passwort){
                        $.alert('Bitte gib ein Passwort ein!');
                        return false;
                    }
                    if(passwort == "123456") {
                        // do something!
                        $.alert('Richtig!');
                        window.story.go('ZIELSZENE'); // Hier den Titel deiner Ziel-Szene eingeben
                    } else {
                        $.alert('Das Passwort ' + name + ' ist leider falsch!');
                    }
                }
            },
            'Abbrechen': function () {
                //close
            },
        },
        onContentReady: function () {
            // bind to events
            var jc = this;
            this.$content.find('form').on('submit', function (e) {
                e.preventDefault();

            });
        }
    });
    };

2. Editiere in deiner Szene den HTML Code und füge folgenden Coder an einer beliebigen Stelle ein:

<button name="test" onClick="window.passwort();">Passwort</button>

 

Typewriter Effekt

Demo

 

Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:

Globale Sektion -> Funktion Javascript

window.showSpeechBubble = function (text) {
    var output = document.getElementById("output");

    // Sprechblase erstellen
    var bubble = document.createElement("div");
    bubble.classList.add("speech-bubble");
    output.appendChild(bubble);

    // Text Typing Effekt
    let index = 0;
    bubble.style.opacity = 1; // Blendet die Sprechblase ein
    
    function typeWriter() {
        // HTML-Interpretation sicherstellen
        bubble.innerHTML = text.substring(0, index);

        if (index < text.length) {
            index++;
            setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
        }
    }

    typeWriter();
}

Globale Sektion -> Stylesheet

*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.

.speech-bubble {
    position: absolute;
    top:100px;
    left: 5%;
    max-width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    font-family: mom;
    font-size: 14px;
    color: black;
    line-height: 1.4;
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 0.5s; /* Sanftes Einblenden */
}

.speech-bubble::after {

    position: absolute;

    left: 5%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-left: -5px;
}

Szene -> Funktion Javascript

setTimeout(function() {
    window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);