0

Flex で非常に便利なのは、コンポーネントを作成し、コーディングし、スキンを適用して、好きなように再利用できることです。これは、作成するコピーのそれぞれからコードが独立していることを意味します。

私はhtmlとjsを使用してこれを達成しようとしています(私はjQueryを使用していますが、可能性はあります)。

基本的に、独自の JS コードと独自のスキンを持つページ (コンポーネント) を作成しました。ここで、このコンポーネントを複製し、それぞれに独自のコードを持たせたいと考えています。

私は2つのオプションを試しました。

  1. コンポーネントを iFrame としてロードします。このようにして、2 つのページが読み込まれるため、それらのページ内のコードが分離されます。ただし、iFrame は面倒です。ドラッグアンドドロップではうまく機能せず、サイジングに関しては異なる動作をします。
  2. PHP を使用してこれらのコンポーネントを含めようとしました。ただし、これを行うと、すべて同じソースを共有しているため、コードを分離する方法がわかりません! つまり、ビジュアル部分は分割されています (2 つのコピーがあります) が、その下のコードは同じです。

これを行う賢い方法を知っていますか？

具体的な例が必要な場合は、簡単な例を次に示します。

車のゲームを作成しています。車は2台しかありません。各プレーヤーは、異なるキーを使用して同じキーボードで演奏します。したがって、「車」コンポーネントを作成します。各車は同じ動作をしますが、独立して実行する必要があります。

1 つを構築するのは非常に簡単です。しかし、コードを複製せずに 2 つ目のコードを作成するにはどうすればよいでしょうか?

4

2 に答える 2

0

私は多くのことを誤解しているかもしれませんが、あなたは OOP について次のように話しているのですか?

function Car(){}

Car.prototype = {

    constructor: Car,

    crash: function(){}

};

var firstCar = new Car(),
    secondCar = new Car();

firstCar.crash(); //only first car crashes

ここで個別のサンドボックスが必要な理由がわかりません。しかし、誰もそう答えていません。

于 2011-11-07T16:49:49.960 に答える
0

個別のページは作成しません。ページは、コンポーネントが使用されるコンテキスト、つまりアプリケーションです。Javascript を使用すると、クラスを作成できます (CSS クラスと混同しないでください)。各クラスのインスタンスを作成できます。したがって、クラス Car を取得した場合は、そのうちの 2 つをインスタンス化して、それらをページと対話させることができます。例えば：

// Javascript is a prototyped language. A class is defined as a function:
function Car()
{
  // Some initialization of properties by assigning to this.propname
  this.x = 0; this.y = 0;
  this.direction = 0;
  this.velocity = 0;
}

// Add methods by extending the prototype
Car.prototype.show = function()
{
  // For each Car object, create and remember a DOM element. 
  // This is what makes your car visible.
  this.DOMelement = document.createElement('div');

  // Set style properties to position the car.

  // Add sub-elements to make the case visible (images?)
}

Car.prototype.move = function()
{
  // Update this.x and this.y

  // Move/update the related DOM element accordingly.
}

これで、2 つの車を作成できます。

var Car1 = new Car();
var Car2 = new Car();

Car1.show(); // Show the first.

また、キーを取得する必要があります。私はそれほど頻繁に行ったことはありませんが、おそらく多くの例があります。

コントロールキーを車のプロパティにすることができるので、車を作成してそのキーを指定できます。車は、必要なキーをゲームに伝えることができます。ゲームはすべての入力を処理し、適切な車に送信できます。

その後、何らかのループを作成してアニメーションを追加する必要があります。

//Instead of an actual loop, you can create a function to render a single frame
function tick()
{
  // Handle input and redirect it to the appropriate cars

  // Call .move of all the cars
}

// Call the tick function repeatedly every 10 ms. 
setInterval('tick', 10);

もちろん、このすべてのゲーム情報を保持するクラスを作成することもできます。そうすれば、window オブジェクトが乱雑になることがなくなり (すべてのグローバル変数と関数が実際に window オブジェクトの一部になります)、ゲームを既存のサイトに埋め込むのがより簡単になります。1 つのページで 2 つの別々のゲームを実行することもできます! 彼らは鍵をめぐって戦うでしょうが。

とにかく、埋めなければならないギャップがたくさんありますが、これがあなたのアイデアになることを願っています.

于 2011-11-07T16:50:32.610 に答える