JavaScript アクションの実行

概要

JavaScript を実行 アクションを使用すると、特定のイベントをプログラムし、Labvanced 変数を読み取り/設定することができますが、実験内のオブジェクトも制御できます。トリガーされると実行されるカスタム JavaScript を入力することで、行動を作成できます。

上記の JavaScript を実行 アクションが選択されると、実行環境 のオプションとともに、JavaScript コードを書くためのコードエディタが表示されます（役に立つ指示がいくつかあります）:

実行環境オプション

ここでは、実行している JavaScript の性質を指定できます。オプションは次のとおりです：

• Acorn インタプリタ: 変数の読み取り/書き込みのみが行われるシナリオに最適です。
• ネイティブ JavaScript: 実験内でのドキュメントオブジェクトモデル (DOM) の直接操作のためにカスタム JavaScript の実行を可能にし、画面上の要素を編集することができ、インタラクティブな JavaScript ベースのゲームを統合したり、JavaScript を介してよりダイナミックなコンテンツを作成するのに役立ちます。

ネイティブ JavaScript の活用

ドキュメントオブジェクトモデル (DOM) 内の要素を制御するために ネイティブ JavaScript を利用する際の重要な要素の一つは、どの HTML ノードにアタッチするかを知っておくことと、いくつかのスタイルガイドを考慮することです。

使用するのに簡単な ID として background 識別子を考慮すると、以下の例のように他の Labvanced オブジェクトがフレーム内に表示されることが可能になります：

const container = document.getElementById('background');
container.appendChild(gameContainer);

ここで示す例では、gameContainer はカスタムコンテンツのメインコンテナ / div であり、absolute 位置を持たせる必要があり、そのために width と height を設定する必要があります：

const gameContainer = document.createElement('div');
gameContainer.style.position = 'absolute';
gameContainer.style.width = window.innerWidth +"px";
gameContainer.style.height = window.innerHeight +"px";

このようなアプローチの結果は、Labvanced で Pong ゲームを実装するために ネイティブ JavaScript オプションを使用したこのデモにて見ることができます: https://www.labvanced.com/page/library/75148

JavaScript を実行 アクションの一般的な使い勝手についての質問がある場合は、気軽にメールまたはチャットでお問い合わせください。