Javascript Basic动画

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不工作)

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

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