如何讓此動畫從右向左移動？

Question

我一直在學習一些JavaScript，這是練習之一。它工作得很好，但其中一個挑戰是讓動畫從右向左移動，而我一直在那裏停留。我敢肯定，是非常簡單的，但一切我都試過是行不通的

"use strict"; 
 

 
var Test = { 
 
    canvas: undefined, 
 
    canvasContext: undefined, 
 
    rectanglePosition: 0 
 
}; 
 

 
Test.start = function() { 
 
    Test.canvas = document.getElementById("myCanvas"); 
 
    Test.canvasContext = Test.canvas.getContext("2d"); 
 
    Test.mainLoop(); 
 
}; 
 
document.addEventListener('DOMContentLoaded', Test.start); 
 
Test.update = function() { 
 
    var d = new Date(); 
 
    Test.rectanglePosition = d.getTime() % Test.canvas.width; 
 
}; 
 
Test.draw = function() { 
 
    Test.canvasContext.fillStyle = "green"; 
 
    Test.canvasContext.fillRect(Test.rectanglePosition, 100, 50, 50); 
 

 
}; 
 
Test.mainLoop = function() { 
 
    Test.clearCanvas(); 
 
    Test.update(); 
 
    Test.draw(); 
 
    window.setTimeout(Test.mainLoop, 1000/60); 
 
}; 
 

 
Test.clearCanvas = function() { 
 
    Test.canvasContext.clearRect(0, 0, Test.canvas.width, Test.canvas.height); 
 
};

<div id="testArea"> 
 
    <canvas id="myCanvas" width="800" height="480"></canvas> 
 
</div>

Answer 1

您應該能夠通過更改Test.update功能來做到這一點。

當前您正在查看d的秒數，並將其除以屏幕寬度並抓取其餘部分。餘下的，你正在確定你的廣場的水平位置。

如果您設置一個變量i和direction外的更新功能的調整i與方向每次更新（+或 - ），直到你達到0或屏幕的寬度，你應該能夠得到它去來回...簽出更新：

"use strict"; 
 

 
var Test = { 
 
    canvas: undefined, 
 
    canvasContext: undefined, 
 
    rectanglePosition: 0 
 
}; 
 
var i = 0; //current location of the square 
 
var direction = 1; //1 if we are going right, -1 if we are going left 
 

 
Test.start = function() { 
 
    Test.canvas = document.getElementById("myCanvas"); 
 
    Test.canvasContext = Test.canvas.getContext("2d"); 
 
    Test.mainLoop(); 
 
}; 
 
document.addEventListener('DOMContentLoaded', Test.start); 
 
Test.update = function() { 
 
    //var d = new Date(); 
 
    //Test.rectanglePosition = d.getTime() % Test.canvas.width; 
 
    
 
    if (i <= 0) { 
 
    direction = 1; 
 
    } else if (i >= (Test.canvas.width - 50)) { 
 
    //Text.canvas.width - 50 is how far you can go to the 
 
    //right without running the square off the screen 
 
    //(since 50 is the width of the square) 
 
    direction = -1; 
 
    } 
 
    i += direction; 
 
    Test.rectanglePosition = i; 
 
}; 
 
Test.draw = function() { 
 
    Test.canvasContext.fillStyle = "green"; 
 
    Test.canvasContext.fillRect(Test.rectanglePosition, 100, 50, 50); 
 

 
}; 
 
Test.mainLoop = function() { 
 
    Test.clearCanvas(); 
 
    Test.update(); 
 
    Test.draw(); 
 
    window.setTimeout(Test.mainLoop, 1000/60); 
 
}; 
 

 
Test.clearCanvas = function() { 
 
    Test.canvasContext.clearRect(0, 0, Test.canvas.width, Test.canvas.height); 
 
};

<div id="testArea"> 
 
    <canvas id="myCanvas" width="400" height="480"></canvas> 
 
</div>