Question

我正在为学校构建一个Jquery游戏，我试图通过在函数末尾放置一个setTimeout（）来让create（）在调用方法时调用它自己（我正在使用setTimeout，因为addEnemySpeed是一个随机生成的，所以它每次都会改变）但它不起作用该方法只运行一次从被调用启动（smallEnemy.create（））但从不回忆自己？我希望这只是我的一个简单的疏忽？在此先感谢您的帮助。欢呼声。

// OBSTACLE OBJECT CONSTRUCTOR //

function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {
  this.type = type;
  this.className = className;
  this.speed = speed;
  this.endX = -160;
  this.startHealth = startHealth;
  this.currentHealth = currentHealth;
  this.damageCause = damageCause;
  this.create = function(type, endX, speed) {
    type = this.type;
    endX = this.endX;
    speed = this.speed;
    var $obstacle = $('<div>');
    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }
    // add correct class name
    $obstacle.addClass(type);
    // add obstacle to playground
    $('#playGround').append($obstacle);
    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({
      x: endX
    }, speed, 'linear', function() {
      $(this).remove();
    });
    setTimeout(this.create,addEnemySpeed);
  };
}

smallEnemy.create()

Answer 1

你尝试过这个：

function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {
  this.type = type;
  this.className = className;
  this.speed = speed;
  this.endX = -160;
  this.startHealth = startHealth;
  this.currentHealth = currentHealth;
  this.damageCause = damageCause;
  this.create = function(type, endX, speed) {
    type = this.type;
    endX = this.endX;
    speed = this.speed;
    var $obstacle = $('<div>');
    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }
    // add correct class name
    $obstacle.addClass(type);
    // add obstacle to playground
    $('#playGround').append($obstacle);
    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({
      x: endX
    }, speed, 'linear', function() {
      $(this).remove();
    });
    var that=this; //this is how you can use "this" element in a function
    setTimeout(function(){that.create;},addEnemySpeed);
  };
}

smallEnemy.create()

Answer 2

这不是原型。相反，它是一个构造函数。当您创建新障碍时，您需要致电var foo = new Obstacle(...);

function Obstacle(type, className, speed, startHealth, currentHealth, damageCause) {

  // private vars
  var timeout,
      endX = -160;

  // private methods
  function create(addEnemySpeed) {
    var $obstacle = $('<div>');

    // if the obstacle is a enemy add enemies class
    if (type == 'smallEnemy' || type == 'bigEnemy') {
      $obstacle.addClass('enemies');
    }

    // add correct class name
    $obstacle.addClass(type);

    // add obstacle to playground
    $('#playGround').append($obstacle);

    // animate obstacle down x axis remove if hits destination
    $obstacle.transition({x: endX}, speed, 'linear', function() {
      $(this).remove();
    });

    timeout = setTimeout(create, addEnemySpeed);
  }

  // I added this method so you can stop spawning this obstacle if you want
  function stop() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  }

  // public api (exports)
  this.type           = type;
  this.className      = className;
  this.speed          = speed;
  this.startHealth    = startHealth;
  this.currentHealth  = currentHealth;
  this.damageCause    = damageCause;

  this.create         = create;
  this.stop           = stop;
}

好的，让我们立即使用

var smallEnemy = new Obstacle(...);

// Spawn a new enemy of this type ever 5 seconds
// Don't forget to pass addEnemySpeed
// (addEnemySpeed was undefined in your code)
smallEnemy.create(5000);

可选：当您想要停止产卵时致电stop

smallEnemy.stop();

作为旁注，您可能需要考虑定义一些默认值并将对象传递给构造函数。这样你就不需要将6个有序参数传递给构造函数（我认为这很多）。

new Obstacle({type: "foo", speed: 100});

回退到未在对象中设置的任何键的默认值。如果这是您的选择，您会比我更清楚。我只是想提一下。

jQuery对象构造函数 - 回忆自身的方法

2 个答案: