6

この 1 年ほどの間、私は Javascript に慣れ親しんでいました。この言語を徹底的に学習するために、HTML5 ゲームを作成することにしました。私が遭遇した問題は、画像を画面上で滑らかに、斜めに移動する方法がまったくわからないことです。x 軸を上下に 1 ピクセル、y 軸を上下に 1 ピクセル移動することで、45 度の角度で移動できますが、それだけでは十分に具体的ではありません。非常に特定の角度で移動するにはどうすればよいですか? 最も近いピクセルに丸める関数が必要だと思いますか?

正確にはわかりません...ライブラリ固有の説明ではない方が望ましいですが、どの解決策でも問題なく機能します。

ありがとう！

4

3 に答える 3

1

あなたが見たいのは、線形補間（またはlerp）のJavaScript実装です。別名ですmotion tweenが、ゲーム開発というよりはアニメーション用語だと思います。

アイデアは、開始と終了の 2 つの座標と、アニメーションが発生する時間を持ち、線形補間を使用して 2 つの間をアニメーション化するというものです。

リンクされた Stack Question から、この記事では、補間を可能にするブラウザーの実装について説明します。

于 2012-11-28T07:20:36.820 に答える
0

まず、HTML5でゲームを作成している場合は、Canvas要素を試してみてください。DOM要素を操作する代わりに、すべてのゲームをCanvas内に描画します。そうは言っても、画像（キャンバスまたは画像タグ内）を移動するための原則は、sin /cos+キャンバス/ウィンドウの左上隅からの距離で位置を計算することです。

例：

160° (South by South-East, give or take), distance 130 pixels.
sin(160)*130
  = 44.462619
cos(160)*130
  = -122.160041

->左上隅はx=44、y = 122にあります（0：0の​​左下座標系の44：-122は、0：0の左上の座標系の44：122に変換されるため）。

于 2012-11-28T07:21:37.830 に答える
0

そこで三角法が必要になります:)たとえば、オブジェクトをマウスカーソルに移動する場合は、オブジェクト座標とマウス座標があり、XとYのステップ長を計算する必要があります（私の英語では申し訳ありません）

于 2012-11-28T07:21:44.780 に答える