如何使用JavaScript使角色隨機移動

Question

var dx:Number = 0;
var dy:Number = 0;
var target:Point;
var Speed:Number = 10;

target = new Point(Math.random() * 500, Math.random() * 400);

trace(target);

stage.addEventListener(Event.ENTER_FRAME, FollowBall);

function FollowBall(event: Event):void {
  var angle = Math.atan2(dy, dx) / Math.PI * 180;

  Mozzie.rotation = angle;

  dx = Mozzie.x - target.x;
  dy = Mozzie.y - target.y;
  Mozzie.x -= dx / Speed;
  Mozzie.y -= dy / Speed;

  var hyp = Math.sqrt((dx * dx) + (dy * dy));

  if (hyp <= 20) {
    target.x = Math.random() * 1000;
    target.y = Math.random() * 600;
  }
}

以前，我使用ActionScript 3.0制作動畫，但是現在我必須將代碼轉換為JavaScript。

而且我對JavaScript一無所知，在這里需要一些幫助。

Answer 1

好吧，這是一個起點。 我將AS3轉換為ES6 JavaScript，並且對現有代碼進行了最少的外觀更改。 您可以看到它們有多么相似。

除非您使用第三方ActionScript庫，否則我相信您90％以上的邏輯都可以很好地移植。 盡管AS3使用ECMAScript4，但它比JavaScript中的ES4和ES5實現標准化領先。

您將需要調整事件處理程序，因為我不確定Event.ENTER_FRAME工作方式，因為我使用Flex已經有一段時間了。 我認為這是某種鼠標事件。 至於跟蹤，我只是通過切入傳入參數來模仿它的功能，因為它們可以在Flash中用逗號分隔。 然后將他們加入地圖

我強烈建議立即切換到JavaScript。 Flex / AS / Flash是一種垂死的語言，ES6 + HTML5是一種新的生活方式。

 // ===================================================================== // Setup // ===================================================================== class Point { constructor(x, y) { this.x = x; this.y = y; } } class Mozzie { } Mozzie.x = 0; Mozzie.y = 0; Mozzie.rotation = 0; function trace() { console.log([].slice.call(arguments).map(x => JSON.stringify(x)).join(' ')); } var stage = document.getElementById('stage'); // ===================================================================== var dx = 0; var dy = 0; var target; // Point var Speed = 10; target = new Point(Math.random() * 500, Math.random() * 400); trace(target); stage.addEventListener('mouseenter', FollowBall); function FollowBall(event) { var angle = Math.atan2(dy, dx) / Math.PI * 180; Mozzie.rotation = angle; dx = Mozzie.x - target.x; dy = Mozzie.y - target.y; Mozzie.x -= dx / Speed; Mozzie.y -= dy / Speed; var hyp = Math.sqrt((dx * dx) + (dy * dy)); if (hyp <= 20) { target.x = Math.random() * 1000; target.y = Math.random() * 600; } } 

 #stage { width: 500px; height: 400px; border: thin solid black; } 

 <div id="stage"></div> 

有用的網址

• 將您的ActionScript代碼轉換為HTML5- Adobe
• [Tag] JavaScript：ES6- SitePoint
• [Tag] HTML：畫布和SVG- SitePoint
• ES6類-MDN
• 您可能不需要jQuery （為舊版瀏覽器創建包裝器）