[Duda] ¿Como le hacemos para que rebote la bolita en todas direcciones?

<meta charset="UTF-8">

<canvas width="600" height="400"> </canvas>


<script>

    var screen = document.querySelector ("canvas");

    var pencil = screen.getContext("2d");

        pencil.fillStyle = "lightblue";
        pencil.fillRect (0,0,600,400);


function makingCircunference (sectorX,sectorY,sectorRadius){

    pencil.fillStyle = ("red");
    pencil.beginPath();
    pencil.arc(sectorX,sectorY,sectorRadius,0,2*Math.PI);
    pencil.fill();

}


    function clearScreen (){

        pencil.clearRect(0,0,600,400);
    }


var vectorX = 0;
var vectorY = 0;

var orientationX = 1;
var orientationY = 1;


        function updatingScreen (){

            clearScreen();
            if(vectorX > 600){
                orientationX = -1;
            }
                else if (vectorX < 0){
                orientationX = 1;
                }

            if(vectorY > 400){
                orientationY = -1;
            }
                else if (vectorY < 0){
                orientationY = 1;
                }

            makingCircunference(vectorX,vectorY,10);
            vectorX = vectorX + orientationX;
            vectorY = vectorY + orientationY;

        }


    setInterval(updatingScreen,10);



</script>

En este código, agregamos una variable para la dirección en el eje Y llamada "vectorY", y dos variables para la orientación en los ejes X e Y llamadas "orientationX" y "orientationY".

En la función "updatingScreen", agregamos condiciones para que el círculo rebote en los bordes superior e inferior del lienzo, modificando la orientación del vectorY en consecuencia. También agregamos una condición para el borde derecho e izquierdo, que modifica la orientación del vectorX en consecuencia.

Finalmente, en la función "makingCircunference", usamos la variable "vectorY" para establecer la posición vertical del círculo.

Con estos cambios, la bolita debería rebotar en cualquier dirección en el lienzo.

genial Jose!!!! y para que la bolita cambie de color cada que cambie de direccion??? ;)

Para hacer que la bolita cambie de color cada vez que rebote en las paredes, puedes agregar una declaración de cambio de color dentro de la función updatingScreen() que se ejecute cuando la bolita llegue a una pared.

<script>
  var screen = document.querySelector("canvas");
  var pencil = screen.getContext("2d");
  pencil.fillStyle = "lightblue";
  pencil.fillRect(0, 0, 600, 400);

  function makingCircunference(sectorX, sectorY, sectorRadius, sectorColor) {
    pencil.fillStyle = sectorColor;
    pencil.beginPath();
    pencil.arc(sectorX, sectorY, sectorRadius, 0, 2 * Math.PI);
    pencil.fill();
  }

  function clearScreen() {
    pencil.clearRect(0, 0, 600, 400);
  }

  var vectorX = 0;
  var vectorY = 0;

  var orientationX = 1;
  var orientationY = 1;
  var color = "red"; // Color de la bolita

  function updatingScreen() {
    clearScreen();
    if (vectorX > 600) {
      orientationX = -1;
      color = getRandomColor(); // Cambia el color de la bolita
    } else if (vectorX < 0) {
      orientationX = 1;
      color = getRandomColor(); // Cambia el color de la bolita
    }

    if (vectorY > 400) {
      orientationY = -1;
      color = getRandomColor(); // Cambia el color de la bolita
    } else if (vectorY < 0) {
      orientationY = 1;
      color = getRandomColor(); // Cambia el color de la bolita
    }

    makingCircunference(vectorX, vectorY, 10, color);
    vectorX = vectorX + orientationX;
    vectorY = vectorY + orientationY;
  }

  // Función para obtener un color aleatorio
  function getRandomColor() {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  setInterval(updatingScreen, 10);
</script>

En este ejemplo, agregué una variable color para almacenar el color actual de la bolita. Luego, dentro de la función updatingScreen(), cuando la bolita llega a una pared, cambio el valor de la variable color utilizando la función getRandomColor(), que genera un color aleatorio en cada llamada. Finalmente, actualizo la llamada a makingCircunference() para incluir la variable color como el cuarto parámetro, lo que cambia el color de la bolita cada vez que rebota en una pared.

wooow genial hermano!!! me surgio la idea del cambio de color pero no sabia como implementarla, muchas gracias!!!

Puedes por favor explicar a detalle la primera parte de la funcion para obtener el color de forma aleatoria, no entiendo el proposito de las dos primeras lineas y el porque lo multiplicas por 16??

Este código es una función que permite generar colores aleatorios en formato hexadecimal (#RRGGBB). Primero se define una variable "letters" que contiene los caracteres válidos para los valores de color: 0123456789 y las letras de la A a la F (que representan el valor 10 al 15 en hexadecimal). Luego se define la variable "color" con el valor inicial "#", que es el símbolo que se utiliza para indicar que se trata de un valor hexadecimal. A continuación se utiliza un bucle "for" que recorre seis veces (para generar seis caracteres en el código hexadecimal) y en cada iteración se elige un número aleatorio entre 0 y 15 (correspondiente a los valores en "letters") utilizando la función "Math.random()", se redondea hacia abajo con la función "Math.floor()" y se utiliza para elegir un caracter al azar en "letters" con la notación de corchetes [ ]. Finalmente se concatena ese caracter al final de la variable "color". Una vez finalizado el bucle, se devuelve el valor completo de "color".