MelonJS でゲームを起動し、スコアを mongoDB データベースに渡す VueJS でアプリケーションを作成しています。

現時点では、ゲームを挿入したい .vue コンポーネントがあります。

これは、ゲームが起動する場所です

divscreenは、ゲームを実行する場所です。元のゲームはファイルを縮小し、index.html ファイルではその div に挿入されます。

使いたいゲームです

スクリプト ファイルの要求またはインポートに関して、私は混乱しています。Vue は、コンポーネントでこのような大きなコード ブロックを使用することをサポートしていますか? 新しいプロジェクトの html ファイルにファイルをリンクすると、コンポーネントが読み込まれると、js ファイルと css ファイルにアクセスできるようになりますか?

コンポーネントにそれらを要求することができ、html ファイルと同じように動作するという考えがあります。

時間の経過とともにフェードする移動オブジェクトにトレイル エフェクトを追加したいと考えています。これは私がこれまでに得たものです：

デモ（WASDまたは矢印キーで移動）

ローカルでテストするための完全なプロジェクトへのリンクを次に示します。

しかし、フェードが行われるのと同じ方法で、トレイル内のアイテムの色を変更したいと思います。

フェイザーでは、これはスプライトに色を付けることができますが、 melonjsでそれを達成する方法についてはわかりません。

注: 効果がイメージの代わりに基本的な形状で実行できる場合も機能します。

これは初歩的な質問ですが、私はまだ JavaScript をあまり使っていません。クラス用にプログラミングしているゲームがあり、これまでのところすべて問題ないように見えますが、ゲームエンジンの一部として使用している melonJS の me を main.js ファイルに認識させることができません。コードは以下のとおりです。

main.js ソースコード:

ここに私のインデックスコードファイルがあります:

次のように glsl シェーダーを作成しました。

次を実行して、ゲームのロードで初期化します。

これは、ビデオが初期化された後に行われ、シェーダー プログラムをコンパイルして正常にロードされるようです。シェーダーは、shaderfrog.com や他の同様のサイトにロードすると、正常に動作するようです。

問題は、キャラクターを移動して再描画するまで、完全に黒い画面が表示されることです。私は webgl の基礎サイトを読みましたが、文字位置を GL バッファーにバインドしているようです。

melonjsでこれを行うにはどうすればよいですか。