如何让此动画从右向左移动？

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>