0

html5 キャンバス タグと JavaScript を使用して単純な抽象パターンを作成したいと考えています。いくつかの変数、関数、オブジェクトを使用してやりたいことの根性を考え出しましたが、採用した境界検出を使用して、特定の形状が画面の外に出たときに開始位置に戻るようにしたいと考えています。 （したがって、アニメーションをループします）。

それが私の質問なので、ここに私のコードがあります。また、私は Javascript で OO を初めて使用するため、他の構造のヒントも高く評価されます。

ここで私の進捗状況を参照してください: http://helloauan.com/apps/test/

乾杯！

4

1 に答える 1

0

大きな白い対角線がページの右上隅から完全に外れると、左下から再開したいときですか？右？

あなたがする必要があるのは、線がキャンバスの幅と高さを超えているかどうかを確認することです.あなたの場合、キャンバスがブラウザウィンドウを埋めるため、ウィンドウ自体です. したがって、一連の条件を実行する必要があります。ライン x + ラインの幅が > キャンバスの幅であり、line.y + ラインの高さが > キャンバスの高さであるかどうかを確認します。両方が true の場合、線の x と y をその時点での値に設定します。次のようなものです：

if( line.x + line.width > canvas.width && line.y + line.height < 0) {
  line.x = -0;
  line.y = canvasHeight + line.height;
}

これは、画面の右側から入ってくる円をリサイクルし、左側から出ると右側からやり直す方法です。

if( d.x + d.radius < 0 ) {
    d.radius = 5+(Math.random()*10);
    d.x = cwidth + d.radius;
    d.y = Math.floor(Math.random()*cheight);
    d.vX = -5-(Math.random()*5);
}

最初は単なる疑似です。このようなものの出発点として使用するために作成したものを見てください。コードの構造はもう少し整理することができ、キャンバスは本当に複雑になります。矢印キーを使用して、正方形を 4 つの側面のいずれかから移動し、反対側に入ることを確認します。 http://anti-code.com/games/envy/envy.html

必要に応じてフォーク: https://github.com/jaredwilli/envy

于 2011-07-31T11:48:47.803 に答える