// 1. Configuración del canvas
const canvas = document.getElementById("miCanvas");
const ctx = canvas.getContext("2d");

const jugador = {
  x: canvas.width / 2 - 25, 
  y: canvas.height / 2 - 25, 
  ancho: 50,
  alto: 50,
  velocidad: 6,
  color: "#00d2ff",
};

const teclas = {
  ArrowUp: false,
  ArrowDown: false,
  ArrowLeft: false,
  ArrowRight: false,
};

window.addEventListener("keydown", function (evento) {
  if (teclas.hasOwnProperty(evento.key)) {
    teclas[evento.key] = true;
    evento.preventDefault();
  }
});

window.addEventListener("keyup", function (evento) {
  if (teclas.hasOwnProperty(evento.key)) {
    teclas[evento.key] = false;
  }
});

function actualizarPosicion() {
  if (teclas.ArrowUp) {
    jugador.y -= jugador.velocidad;
  }
  if (teclas.ArrowDown) {
    jugador.y += jugador.velocidad;
  }

  if (teclas.ArrowLeft) {
    jugador.x -= jugador.velocidad;
  }
  if (teclas.ArrowRight) {
    jugador.x += jugador.velocidad;
  }

  if (jugador.x < 0) jugador.x = 0; 
  if (jugador.y < 0) jugador.y = 0; 
  if (jugador.x + jugador.ancho > canvas.width)
    jugador.x = canvas.width - jugador.ancho; 
  if (jugador.y + jugador.alto > canvas.height)
    jugador.y = canvas.height - jugador.alto; 
}

function dibujar() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = jugador.color;
  ctx.shadowColor = "#00d2ff";
  ctx.shadowBlur = 15;
  ctx.fillRect(jugador.x, jugador.y, jugador.ancho, jugador.alto);

  ctx.shadowBlur = 0;

  ctx.fillStyle = "#ffffff";
  ctx.font = "14px Consolas, monospace";
  ctx.textAlign = "center";
  ctx.fillText(
    `X:${Math.round(jugador.x)} Y:${Math.round(jugador.y)}`,
    jugador.x + jugador.ancho / 2,
    jugador.y - 10,
  );
}

function bucleAnimacion() {
  actualizarPosicion(); 
  dibujar(); 

  requestAnimationFrame(bucleAnimacion);
}

bucleAnimacion();
