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/