Javascript 基础动画

Question

我是一个一般的编码初学者。这也是我第一次尝试用js做点什么；我想为一堆正方形设置动画以向页面上的某个点移动。我用谷歌搜索了很多东西，我写了这个，但它不起作用；谁能告诉我为什么这不起作用？

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var enemies =[];
for (var i = 0; i < 10; i++){
  var randomX = Math.abs(Math.random());
  var randomY = Math.abs(Math.random());
  if (randomX > 100 && randomX < 1200){
    if (randomX%2 == 0){
      randomX = 140;
    } else {
      randomX = 1281;
    }
  }
  if (randomY > 100 && randomY < 75){
    if (randomY%2 == 0){
      randomY = 15;
    } else{
      randomY = 560;
    }
  }
  var enemy = new Enemy(randomX,randomY,0,0);
  enemies.push(enemy);
}

var Enemy = function(x,y,velx,vely){
  this.x = x;
  this.y = y;
  this.velx = 0;
  this.vely = 0;
}

Enemy.prototype.update = function (){
  var tx = 650 - this.x;
  var ty = 250 - this.y;
  var dist = Math.sqrt(tx*tx + ty*ty);
  this.velx = (tx/dist);
  this.vely = (ty/dist);

  if (dist > 0){
    this.x += this.velx;
    this.y += this.vely;
  }
};

Enemy.prototype.render = function(){

  context.fillStyle = #000000;
  context.rect(this.x,this.y,25,25);
  context.fill();
};

function render(){
  context.clearRect(0,0,canvas.width,canvas.height);
  for (var i = 0; i < enemies.length; i++){
    var one = enemies[i];
    context.clearRect(one.x,one.y,25,25);
    one.update();
    one.render();
  }
  requestAnimationFrame(render);
}
render();

Answer 1

使用 var Enemy = function... 语法，Enemy 类声明需要放在任何 new Enemy(...) 构造函数调用之前。并且颜色代码必须用括号括起来。

Math.random() 返回一个从 0（包括）到 1（不包括）的数字，因此您的矩形几乎堆叠在一起。

您没有关闭Enemy.prototype.render 中的路径，这就是它没有被清除的原因。 （类似问题：clearRect not working）

（如果清除整个画布，则不需要单独清除每个矩形，因此可以在渲染函数中删除context.clearRect(one.x, one.y, 25, 25);行。）

编辑： http://jsfiddle.net/f7vgpdko/8/