Saludos, vi la solución ofrecida por el instructor y la entiendo bien, sin embargo al intentar resolver el ejercicio por mi cuenta había pensado una solución que incluyera una función que integrara un array de dos opciones "x++" y "x--" y que así como con el ejercicio de cambiar de color el círculo, pudiera alternar entre las dos opciones del array cuando llegase a los extremos, pero no logro hacer que funcione porque el círculo azul no logra interpretar mi variable "d" como "x++" ni como "x--", si alguien me lograse dar una recomendación para que funcione mi idea de solución les agradecería mucho, estoy casi seguro que la línea lógica es buena, pero mi falta de conocimientos en JavaScript me limita para ejecutarla.
<canvas width = "600" height = "400"> </canvas>
<script>
var screen = document.querySelector ("canvas");
var paintbrush = screen.getContext ("2d");
paintbrush.fillStyle = "grey";
paintbrush.fillRect (0,0,600,400);
function design_circle (x,y,radius) {
paintbrush.fillStyle = "blue";
paintbrush.beginPath ();
paintbrush.arc (x,y,radius,0,2*Math.PI);
paintbrush.fill ();
}
function clean_screen () {
paintbrush.clearRect (0,0,600,400);
}
var direction = ["x++","x--"];
var dir_cycle = 0;
var d = direction [dir_cycle];
var x = 0;
function switch_dir () {
dir_cycle++;
if (dir_cycle > direction.length) {
dir_cycle = 0;
}
}
function update_screen () {
clean_screen ();
if (x>600 || x<0) { // || = or
switch_dir;
}
design_circle (x,20,10);
d;
}
setInterval (update_screen,20); //función sin (), intervalo en miliseg
</script>
