汕头高端建站：HTML5游戏设计原理

var lastUpdate;function tick() {
  var now = window.Date.now();
  if (lastUpdate) {
    var elapsed = (now-lastUpdate) / 1000;
    lastUpdate = now;
    // Update all game objects here.
    update(elapsed);
    // ...and render them somehow.
    render();
  } else {
    // Skip first frame, so elapsed is not 0.
    lastUpdate = now;
  }
  // This makes the `tick` function run 60 frames per second (or slower, depends on monitor's refresh rate).
  window.requestAnimationFrame(tick);};

point2.distance = function(a, b) {
  // The x and y variables hold a vector pointing from point b to point a.
  var x = a.x - b.x;
  var y = a.y - b.y;
  // Now, distance between the points is just length (magnitude) of this vector, calculated like this:
  return Math.sqrt(x*x + y*y);};

vector2.normalize = function(vector) {
  var length = vector2.length(vector);
  if (length > 0) {
    return vector2(vector.x / length, vector.y / length);
  } else {
    // zero-length vectors cannot be normalized, as they do not have direction.
    return vector2();
  }};

// Note that this function is different from `vector2.direction`.// Please don't confuse them.point2.direction = function(from, to) {
  var x = to.x - from.x;
  var y = to.y - from.y;
  var length = Math.sqrt(x*x + y*y);
  if (length > 0) {
    return vector2(x / length, y / length);
  } else {
    // `from` and `to` are identical
    return vector2();
  }};

function Entity() {
  ...
  // Center of mass usually.
  this.position = point2();
  // Linear velocity.
  // There is also something like angular velocity, not described here.
  this.velocity = vector2();
  // Acceleration could also be named `force`, like in the Box2D engine.
  this.acceleration = vector2();
  this.mass = 1;
  ...}

Entity.prototype.update = function(elapsed) {
  // Acceleration is usually 0 and is set from the outside.
  // Velocity is an amount of movement (meters or pixels) per second.
  this.velocity.x += this.acceleration.x * elapsed;
  this.velocity.y += this.acceleration.y * elapsed;
  this.position.x += this.velocity.x * elapsed;
  this.position.y += this.velocity.y * elapsed;
  ...
  this.acceleration.x = this.acceleration.y = 0;}

// 10 meters per second in the right direction (x=10, y=0).var right = vector2(10, 0);if (keys.left.isDown)
  // The -1 inverts a vector, i.e. the vector will point in the opposite direction,
  // but maintain magnitude (length).
  spaceShip.applyImpulse(right, -1);if (keys.right.isDown)
  spaceShip.applyImpulse(right, 1);

// BlaserProjectile inherits from Entity classvar topBullet = new BlasterProjectile();  // This bullet will move slightly up.var middleBullet = new BlasterProjectile();  // This bullet will move horizontally.var bottomBullet = new BlasterProjectile();  // This bullet will move slightly down.var direction;// Angle 0 is pointing directly to the right.// We start with the bullet moving slightly upwards.direction = vector2.direction(radians(-5));  // Convert angle to an unit vectortopBullet.applyImpulse(direction, 30);direction = vector2.direction(radians(0));middleBullet.applyImpulse(direction, 30);direction = vector2.direction(radians(5));middleBullet.applyImpulse(direction, 30);

function radians(angle) {
  return angle * Math.PI / 180;}// Note that this function is different from `point2.direction`.// Please don't confuse them.vector2.direction = function(angle) {
  /*
   * Converts an angle in radians to a unit vector. Angle of 0 gives vector x=1, y=0.
   */
  var x = Math.cos(angle);
  var y = Math.sin(angle);
  return vector2(x, y);};

Rocket.prototype.update = function(elapsed) {
  var direction;
  if (this.target) {
    // Assuming that `this.target` points to the nearest enemy ship.
    direction = point2.direction(this.position, this.target.position);
  } else {
    // No target, so fly ahead.
    // This will fail for objects that are still, so remember to apply some initial velocity when spawning rockets.
    direction = vector2.normalize(this.velocity);
  }
  // You can use any number here, depends on the speed of the rocket, target and units used.
  this.applyForce(direction, 10);
  // Simple inheritance here, calling parent's `update()`, so rocket actually moves.
  Entity.prototype.update.apply(this, arguments);};

// Firstly get random angle in degrees in the allowed span. Note that the span below always points to the right.var angle = radians(random.uniform(-40, 40));// Now get how far from the barrel the projectile should spawn.var distance = random.uniform(5, 150);// Join angle and distance to create an offset from the gun's barrel.var direction = vector2.direction(angle);var offset = vector2(direction.x * distance, direction.y * distance);// Now calculate absolute position in the game world (you need a position of the barrel for this purpose):var position = point2.move(barrel, offset);

var offset, midpoint;midpoint = point2.midpoint(A, B);// Calculate an unit-length vector pointing from A to B.offset = point2.direction(A, B);// Rotate this vector 90 degrees clockwise.offset = vector2.perpendicular(offset);// We want our offset to work in two directions perpendicular to the segment AB: up and down.if (random.sign() === -1) {
  // Rotate offset by 180 degrees.
  offset.x = -offset.x;
  offset.y = -offset.y;}// Move the midpoint by an offset.var offsetLength = Math.random() * 10;  // Offset by 10 pixels for example.midpoint.x += offset.x * offsetLength;midpoint.y += offset.y * offsetLength;Below are functions used in the above code:point2.midpoint = function(a, b) {
  var x = (a.x+b.x) / 2;
  var y = (a.y+b.y) / 2;
  return point2(x, y);};vector2.perpendicular = function(v) {
  /*
   * Rotates a vector by 90 degrees clockwise.
   */
  return vector2(-v.y, v.x);};random.sign = function() {
  return Math.random() < 0.5 ? -1 : 1;};