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/

Javascript基本动画

1 个答案: