如何使用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 （为旧版浏览器创建包装器）