如何使用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;
  }
}

Previously, I am using ActionScript 3.0 to do my animation, but now I have to convert my code to JavaScript.

And I know nothing about JavaScript, I need some help here.

Answer 1

Well, this is a starting point. I converted the AS3 into ES6 JavaScript with minimal cosmetic changes to your existing code. You can see how very similar they are.

Unless you are using third party ActionScript libraries, I believe that over 90% of you logic will port over well. Although AS3 uses the ECMAScript4, it was leagues ahead of the ES4 and ES5 implementation standardization in JavaScript.

You will need to tweak the event handler because I am uncertain how Event.ENTER_FRAME works, it's been a while since I worked with Flex. I assume it's some kind of mouse event. As for the trace, I just mimicked it's functionality by slicing the incoming arguments, because they can be comma-delimited in Flash; and just map-joined them.

I highly recommend switching over to JavaScript right away. Flex/AS/Flash is a dying language and ES6 + HTML5 is the new way of life.

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

Helpful Links

• Convert your ActionScript code to HTML5 — Adobe
• [Tag] JavaScript: ES6 — SitePoint
• [Tag] HTML: Canvas & SVG — SitePoint
• ES6 Classes — MDN
• You Might Not Need jQuery (Create wrappers for legacy browsers)