2017-10-24 8 views
1

私はKhan Academyを使用してコーディングを学んでいる学生です。私はかなり進歩しました。私は私の大学でもかなりのHTML、CSS、JSを学んできました。 my game(ProcessingJSで書かれたKhan Academyで)をオフラインHTMLページとして再生する方法があるかどうか疑問に思っていました。ウェブサイトでkhan academyプログラムを使用しています

ここで私はここで質問する前に相当量の研究を行った。私は以下を試しました:

1. This HTML template、Khan Academy。
でもある。
3. this oneもスタックオーバーフローします。

上記のテンプレートを使用すると、出力が半減し、キーボードのコントロールが機能していないようです。どちらのアニメーションもありません。

ありがとうございます!

+0

どのような出力が得られているか説明できますか? – jrtapsell

+0

理想的には、私の出力は口を開閉している黄色のパックマンでなければなりません。キャンバスは深い青色で、パックマンはキャンバスと同じ色の目を持っています。また、矢印キーを押すと、Pacmanは対応する方向に移動する必要があります。私はこのO/PをKAに完全に入れています。
しかし、オフラインのWebページには、矢印キーを押したときに噛んだり動いたりすることのない深い青色のキャンバス、黄色のパックマンがあります。
上記の3つの方法とKevin(下記)が提案した解決策は、同じで応答のない結果をもたらします。 –

+0

あなたはこれを理解できましたか? –

答えて

0

恥知らずの自己宣伝:Processing.jsを展開するためのチュートリアルを書いています。here

基本的に、Processing.jsライブラリをダウンロードすることで、ページの「オフライン」バージョンを作成できます。hereを入手できます。

これを取得したら、そのファイルを.htmlファイルに読み込むだけです。ここでは例index.htmlファイルです:

<!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> 

この場合、processing.jsファイルがすぐ隣index.htmlファイルにある、と<script src="processing.js"></script>ラインは、それをロードします。 JavaScriptでProcessing.jsを使用することができます。別の.pdeまたは.jsファイルを使用して、Processing.jsコードを格納することもできます。

Khan AcademyとVanilla Processing.jsの間には、ラジアン対度のような微妙な違いがあることにも注意してください。

+0

私はあなたが提案したことをやってみました。しかし、私は以前と同じ出力を得ています。私は上記の私の質問のコメントのセクションで私の出力がどのように見えるかを詳しく述べました。 –

+0

また、私はKAのProのバージョンの違いを見ることができます。 JSと上記のもの。同様の関数の宣言/初期化は異なっており、関数名の前に 'void'を書く必要があります。そして、 'background()'の引数も異なっています。そのような違いの完全なリストはどこかにありますか? –

+0

@AdishWar [Processing.jsヘルプセンター](http://processingjs.org/articles/p5QuickStart.html)と[Processing.jsリファレンス](http://processingjs.org/reference/ )。これはいくつかの違いを説明しています。あなたが指摘したことのいくつかは、Khan AcademyとProcessing.jsの違いではなく、両方でさまざまなやり方で対応しています。例えば、 'background()'関数に1,2,3の引数を与えることができます。物事を試してください。 –

関連する問題