mit Khan Academy-Programme in Websites

Ich bin ein Student mit Khan-Akademie, um Codierung zu lernen, und ich habe dort einen großen Fortschritt gemacht. Ich habe auch ein gutes Stück HTML, CSS und JS in meinem College gelernt. Ich habe mich gefragt, ob es eine Möglichkeit gibt, my game (auf Khan Academy, geschrieben in ProcessingJS) als Offline-HTML-Seite zu spielen.mit Khan Academy-Programme in Websites

Jetzt habe ich eine ganze Menge Forschung gemacht, bevor ich hier gefragt habe. Ich habe folgendes versucht:

1. This HTML template auf Khan Academy.
2. This template auch.
3. Und this one auf Stack Overflow zu.

Die Verwendung einer der oben genannten Vorlagen gibt mir eine unausgewogene Ausgabe, und es scheint, dass die Tastatursteuerungen nicht funktionieren. Genauso wenig wie die Animationen.

Vielen Dank im Voraus!

Quelle

2017-10-24 Adish War

Können Sie erklären, welche Ausgabe Sie bekommen? – jrtapsell

Idealerweise sollte meine Ausgabe ein gelber Pacman sein, der seinen Mund wiederholt öffnet und schließt. Die Leinwand ist tiefblau und der Pacman hat ein Auge, das die gleiche Farbe wie die Leinwand hat. Wenn ich die Pfeiltasten drücke, sollte sich Pacman in die entsprechende Richtung bewegen. Ich bekomme dieses O/P perfekt auf KA.
Was ich jedoch in meiner Offline-Webseite bekomme, ist eine tiefblaue Leinwand mit einem gelben Pacman, der weder kaut noch sich bewegt, wenn die Pfeiltasten gedrückt werden.
Die obigen drei Methoden und die von Kevin vorgeschlagene Lösung (siehe unten) ergeben das gleiche, nicht reagierende Ergebnis. –

Hast du das jemals herausgefunden? –

Schamlose Eigenwerbung: Ich habe ein Tutorial zum Bereitstellen von Processing.js verfasst here.

Grundsätzlich können Sie eine "Offline" -Version Ihrer Seite erstellen, indem Sie die Processing.js-Bibliothek herunterladen, die Sie here erhalten können.

Sobald Sie das haben, dann ist es nur eine Frage des Ladens dieser Datei in eine .html Datei. Hier ist ein Beispiel index.html Datei:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Sketch</title> 
     <script src="processing.js"></script> 
    </head> 
    <body> 
     <script type="application/processing"> 
      void setup(){ 
       size(200, 200); 
      } 

      void draw(){ 
       background(64); 
       ellipse(mouseX, mouseY, 20, 20); 
      } 
     </script> 
     <canvas> </canvas> 
    </body> 
</html>

In diesem Fall wird die processing.js Datei befindet sich direkt neben der index.html-Datei und die <script src="processing.js"></script> Zeile lädt es. Dann können Sie Processing.js in Ihrem JavaScript verwenden. Sie können auch eine separate .pde oder .js Datei verwenden, die Ihren Code Processing.js enthält.

Es ist auch erwähnenswert, dass es einige kleine Unterschiede zwischen Khan Academy und Vanille Processing.js gibt, wie zum Beispiel Radianten gegen Grad.

Quelle

2017-10-24 17:49:21

Ich habe gerade versucht zu tun, was Sie vorgeschlagen haben; Ich bekomme jedoch immer noch die gleiche Ausgabe wie zuvor. Ich habe ausgearbeitet, wie meine Ausgabe im Kommentarabschnitt meiner Frage oben aussieht. –

Auch kann ich mehr Unterschiede in der KA-Version von Pro sehen. JS und deine oben genannte. Gleich - Funktionsdeklarationen/Initialisierungen sind unterschiedlich und "void" muss vor dem Funktionsnamen geschrieben werden. Und die Argumente von 'background()' sind auch anders. Gibt es irgendwo eine vollständige Liste all dieser Unterschiede? –

@AdishWar Ich empfehle Ihnen, [die Processing.js-Hilfe] (http://processingjs.org/articles/p5QuickStart.html) und [die Veredelung von Processing.js] (http://processingjs.org/reference/) zu lesen.). Dies erklärt einige der Unterschiede. Einige der Punkte, auf die Sie hingewiesen haben, sind keine wirklichen Unterschiede zwischen Khan Academy und Processing.js, es gibt nur unterschiedliche Möglichkeiten, beides zu tun. Zum Beispiel können Sie der 'background()' -Funktion 1, 2 oder 3 Argumente geben. Bitte probiere die Dinge aus. –

mit Khan Academy-Programme in Websites

Antwort

Verwandte Themen