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是一种新的生活方式。

＆＃13;

// =====================================================================
// 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;
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

有用的链接

Convert your ActionScript code to HTML5 — Adobe
[Tag] JavaScript: ES6 — SitePoint
[Tag] HTML: Canvas & SVG — SitePoint
ES6 Classes — MDN
You Might Not Need jQuery（为旧版浏览器创建包装器）

如何使用JavaScript随机移动角色

1 个答案:

有用的链接