onlineide:integration:start
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | onlineide:integration:start [2024/08/31 12:03] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Integration der Online-IDE in eigene Webseiten ===== | ||
+ | ===== A. Mittels iframe-Tag ===== | ||
+ | Die Integration mittels '' | ||
+ | - Laden Sie die Dateien auf Ihren Server in ein Verzeichnis '' | ||
+ | - Das '' | ||
+ | - Ersetzen Sie die Adresse '' | ||
+ | |||
+ | <WRAP center round tip 60%> | ||
+ | Wenn das '' | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== B. Ohne iframe-Tag ===== | ||
+ | |||
+ | <WRAP center round tip 60%> | ||
+ | Sie finden alle benötigten Dateien im [[https:// | ||
+ | </ | ||
+ | |||
+ | |||
+ | Im ''< | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP center round tip 60%> | ||
+ | Die Datei '' | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | Nach dem vollständigen Aufbau der Seite sucht die Online-IDE alle DIV-Tags mit der Klasse " | ||
+ | <code html> | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | < | ||
+ | World w = new World(); | ||
+ | new Quadrat(40, 20, 300); | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | class Quadrat extends Rectangle { | ||
+ | public Quadrat(double left, double top, double width){ | ||
+ | super(left, top, width, width); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | ## Tipp: | ||
+ | Tipps werden in einer einfachen Markdown-Syntax verfasst, die **Fettschrift** u.ä. ermöglicht, | ||
+ | ``` | ||
+ | double v = Math.random()*8 + 2; // Betrag der Geschwindigkeit zwischen 2 und 10 | ||
+ | double w = Math.random()*2*Math.PI; | ||
+ | vx = v * Math.cos(w); | ||
+ | vy = v * Math.sin(w); | ||
+ | ``` | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | <script type=" | ||
+ | World w = new World(); | ||
+ | new Quadrat(40, 20, 300); | ||
+ | </ | ||
+ | <script type=" | ||
+ | class Quadrat extends Rectangle { | ||
+ | public Quadrat(double left, double top, double width){ | ||
+ | super(left, top, width, width); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | <script type=" | ||
+ | ## Tipp: | ||
+ | Tipps werden in einer einfachen Markdown-Syntax verfasst, die **Fettschrift** u.ä. ermöglicht, | ||
+ | ``` | ||
+ | double v = Math.random()*8 + 2; // Betrag der Geschwindigkeit zwischen 2 und 10 | ||
+ | double w = Math.random()*2*Math.PI; | ||
+ | vx = v * Math.cos(w); | ||
+ | vy = v * Math.sin(w); | ||
+ | ``` | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Bedeutung der Konfigurationsparameter ===== | ||
+ | Das '' | ||
+ | ^Einstellung mit Beispielwert^Bedeutung^ | ||
+ | |' | ||
+ | |' | ||
+ | |' | ||
+ | |' | ||
+ | |' | ||
+ | |' | ||
+ | |' | ||
+ | |||
+ | |||
+ | ===== Einfachste Variante: ===== | ||
+ | <code html> | ||
+ | < | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | <script type=" | ||
+ | for(int i = 0; i < 10; i++){ | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | <script type=" | ||
+ | for(int i = 0; i < 10; i++){ | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Einbinden eines eigenen Spritesheets: | ||
+ | <code html> | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | <script type=" | ||
+ | for(int i = 0; i < 4; i++){ | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }"> | ||
+ | <script type=" | ||
+ | Sprite campfire = new Sprite(400, 300, SpriteLibrary.Campfire, | ||
+ | campfire.scale(2); | ||
+ | campfire.playAnimation(0, | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ====== Offline-Version ====== | ||
+ | Die Embedded-Version kann auch offline aus dem Dateisystem heraus betrieben werden, wenn ein kleiner Webserver mitgeliefert wird. Hier ein Beispielarchiv mit Startdateien für Windows und Mac OS X: | ||
+ | {{ : | ||
+ | [[.offline: |
onlineide/integration/start.txt · Zuletzt geändert: 2024/08/31 12:03 von 127.0.0.1